Add code to <head> using a custom module & theme

magento.stackexchange https://magento.stackexchange.com/questions/316692

  •  14-04-2021
  •  | 
  •  

Question

I'm working on a custom theme for Magento. I'm trying to create a module for the theme that adds some code to the <head> but i'm finding it difficult to get it working.

I've created my module under app/code/Vendor/ModuleName and created the module.xml file and the registration.php file which is as follows:

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_ModuleName',
    __DIR__
);

I've installed the module and when I run php bin/magento module:status Vendor_ModuleName it tells me that the module is enabled.

Next is the part I'm unsure about. I've just copied what I've seen in other themes but i'm unsure if it's correct or if i'm missing something. In app/design/frontend/Vendor/custom_theme (which is my custom theme) I've created the following files:

app/design/frontend/Vendor/custom_theme/Vendor_ModuleName/layout/default.xml:

<?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">
    <body>
        <referenceContainer name="head.additional">
            <block class="Magento\Framework\View\Element\Template" name="custom_head" template="html/head.phtml" after="-"/>
        </referenceContainer>
    </body>
</page>

app/design/frontend/Vendor/custom_theme/Vendor_ModuleName/templates/html/head.phtml:

<script>alert('Hello');</script>

Now when my custom theme is enabled, I would expect this to add the code to the head and see the alert box, but it's not working. I'm unsure why. Do I have this set up correctly? Magento seems to be ignoring the module's layout file that I've placed in my custom theme directory.

Was it helpful?

Solution

head.additional is a block not a container, you can check that out where it's created in vendor/magento/module-catalog/view/frontend/layout/default.xml:

<block class="Magento\Framework\View\Element\Template" name="head.additional" as="head.additional" template="Magento_Theme::html/container.phtml"/>

So you should try using referenceBlock rather than referenceContainer.

You can also try prepending the template with your module like so:

template="Vendor_ModuleName::html/head.phtml"

OTHER TIPS

Replace code default.xml

<?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">
    <body>
        <referenceContainer name="head.additional">
            <block class="Magento\Framework\View\Element\Template" name="custom_head" template="html/head.phtml" after="-"/>
        </referenceContainer>
    </body>
</page>

To

<?xml version="1.0"?>
<body>
    <referenceBlock name="head.additional">
        <block class="Magento\Framework\View\Element\Template" name="custom.head.block" template="Vendor_ModuleName::html/head.phtml">
        </block>
    </referenceBlock>
</body>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top