0

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

Technocracker
2,0371 gold badge15 silver badges26 bronze badges
asked Jan 3, 2018 at 14:22

4 Answers 4

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.

answered Jan 3, 2018 at 14:36
4
  • 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? Commented Jan 3, 2018 at 14:39
  • Thanks, this works when inside my default.xml, just gives same error when included within default_head_blocks.xml :) Commented Jan 3, 2018 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? Commented Jan 3, 2018 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/… Commented Jan 3, 2018 at 14:53
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>
answered Jan 3, 2018 at 14:31
4
  • 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. Commented Jan 3, 2018 at 14:34
  • Removing the type stops showing the exception however it doesn't add my script to the head :( Commented Jan 3, 2018 at 14:35
  • It should be class instead of type. Try my edited snippet Commented Jan 3, 2018 at 14:37
  • Thanks, this is working, just doesn't work in default_head_blocks.xml but works fine in default.xml Commented Jan 3, 2018 at 14:42
1

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.

answered Jan 3, 2018 at 14:43
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.

answered Jan 3, 2018 at 14:57

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.