1

I am struggling to load a script tag on my Magento website. I am trying to add this to the head by adding the below code. I have tried to add this to the default.xml and default_head_blocks.xml

    <!-- Bugherd -->
    <reference name="head.additional">
        <block type="Magento\Framework\View\Element\Text" name="my_script">
            <action method="setText">
                <argument translate="true" name="text" xsi:type="string">
                    <![CDATA[
                        <script type='text/javascript'>
                        (function (d, t) {
                          var bh = d.createElement(t), s = d.getElementsByTagName(t)[0];
                          bh.type = 'text/javascript';
                          bh.src = 'https://www.bugherd.com/sidebarv2.js?apikey=dkjfsd89id6sftsdghkjn3';
                          s.parentNode.insertBefore(bh, s);
                          })(document, 'script');
                        </script>
                    ]]>
                 </argument>
            </action>
         </block>
    </reference>

Error:

1 exception(s): Exception #0 (Magento\Framework\Config\Dom\ValidationException): Element 'reference': This element is not expected. Expected is one of ( attribute, block, referenceBlock, referenceContainer, container, move, uiComponent ). Line: 637

Can anyone please advise how I can add my script to the head across all pages?

Thanks

4

I would advise using Require JS to load this rather than adding it via XML like this, but if you're adamant you want to do it this way try this:

<!-- Bugherd -->
<referenceBlock name="head.additional">
    <block class="Magento\Framework\View\Element\Text" name="my_script">
        <action method="setText">
            <argument translate="true" name="text" xsi:type="string">
                <![CDATA[
                    <script type='text/javascript'>
                    (function (d, t) {
                      var bh = d.createElement(t), s = d.getElementsByTagName(t)[0];
                      bh.type = 'text/javascript';
                      bh.src = 'https://www.bugherd.com/sidebarv2.js?apikey=dkjfsd89id6sftsdghkjn3';
                      s.parentNode.insertBefore(bh, s);
                      })(document, 'script');
                    </script>
                ]]>
             </argument>
        </action>
     </block>
</referenceBlock>

Same as mtr.web's answer but uses class rather than block.

  • Still get the same error :/ How would I add the script with require JS? Do you think I could just add this script in its own file and add that to the head? – heady12 Jan 3 '18 at 14:39
  • Thanks, this works when inside my default.xml, just gives same error when included within default_head_blocks.xml :) – heady12 Jan 3 '18 at 14:42
  • That's because you can't use blocks inside <head> , there are very few things you can do inside <head>. It's the same thing vice versa to, you can't use head XML inside <body>. If that makes sense? – Ben Crook Jan 3 '18 at 14:49
  • For it to work inside head you would need to use <head><link src="Your_Module::js/filename.js"/></head>. To add it via Require JS this should help - magento.stackexchange.com/questions/85851/… – Ben Crook Jan 3 '18 at 14:53
2

Add this to your theme's default.xml:

<referenceContainer name="head.additional">
      <block class="Magento\Framework\View\Element\Template" name="custom_head" template="Magento_Theme::html/head.phtml" after="-"/>
</referenceContainer>

And create a head.phtml file which contains your inline JS in:

/app/design/frontend/{vendor}/{theme}/Magento_Theme/templates/html/

Clear static content and cache to see the changes.

You can add future inline JS to it when you need it.

1

In Magento 2, referenceBlock (basically) is a replacement for reference, so using that should solve your first error. The second problem is that the name attribute for your block should be class instead:

<!-- Bugherd -->
<referenceBlock name="head.additional">
    <block class="Magento\Framework\View\Element\Text" name="my_script">
        <action method="setText">
            <argument translate="true" name="text" xsi:type="string">
                <![CDATA[
                    <script type='text/javascript'>
                    (function (d, t) {
                      var bh = d.createElement(t), s = d.getElementsByTagName(t)[0];
                      bh.type = 'text/javascript';
                      bh.src = 'https://www.bugherd.com/sidebarv2.js?apikey=dkjfsd89id6sftsdghkjn3';
                      s.parentNode.insertBefore(bh, s);
                      })(document, 'script');
                    </script>
                ]]>
             </argument>
        </action>
     </block>
</referenceBlock>
  • Thanks, but unfortunately it still doesn't work :/ 1 exception(s): Exception #0 (Magento\Framework\Config\Dom\ValidationException): Element 'block', attribute 'type': The attribute 'type' is not allowed. – heady12 Jan 3 '18 at 14:34
  • Removing the type stops showing the exception however it doesn't add my script to the head :( – heady12 Jan 3 '18 at 14:35
  • It should be class instead of type. Try my edited snippet – mtr.web Jan 3 '18 at 14:37
  • Thanks, this is working, just doesn't work in default_head_blocks.xml but works fine in default.xml – heady12 Jan 3 '18 at 14:42
1

You can easily add inline javascript in head from admin.

To add javascript please follow below steps:

  • Open your site admin
  • Go to Content > Configuration
  • Edit your current theme
  • Click on HTML Head tab
  • Under that section, you will find the Scripts and Style Sheets label with textarea control.

Where you can add your Stylesheet or Javascript, which will be included before head closing tag in page HTML.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.