Skip to content

Adding Head Assets to Liveview Editor

The Hyvä CMS Liveview Editor uses a different frontend stack than the standard Magento admin panel. When third-party modules add CSS or JavaScript assets to the admin panel via default.xml, these assets could potentially cause conflicts.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <head>
        <css src="Vendor_Module::css/my-module-admin.css"/>
        <script src="Vendor_Module::js/my-module-admin.js"/>
    </head>
</page>

To solve this issue, developers must explicitly allow their assets in the Liveview Editor. When adding JavaScript or CSS assets to the Magento admin panel via XML, they must also add them to the allowedAssets argument for the Hyva\CmsLiveviewEditor\Plugin\PageConfigStructurePlugin via di.xml.

<type name="Hyva\CmsLiveviewEditor\Plugin\PageConfigStructurePlugin">
    <arguments>
        <argument name="allowedAssets" xsi:type="array">
            <item name="Vendor_Module::css/my-module-admin.css" xsi:type="string">Vendor_Module::css/my-module-admin.css</item>
            <item name="Vendor_Module::js/my-module-admin.js" xsi:type="string">Vendor_Module::js/my-module-admin.js</item>
        </argument>
    </arguments>
</type>

An example of this can be found in:

vendor/hyva-themes/commerce-module-cms/src/liveview-editor/etc/adminhtml/di.xml