7

What is the proper way to add a script before the closing body tag in magento 2?

I want it to be available to all pages.

UPDATE:

I've got in myvendor/mytheme/Magento_Theme/layout/default.xml with:

<referenceContainer name="before.body.end">
    <block class="\Magento\Framework\View\Element\Template" template="Theme_Module::js.phtml" name="module_js"/>
</referenceContainer>

And the js.phtml inside /Magento_Theme/templates

Should that be right?

12

You can do it with layout

    <referenceContainer name="before.body.end">
        <block class="\Magento\Framework\View\Element\Template" template="You_Module::js.phtml" name="module_js"/>
    </referenceContainer>

and in js.phtml

<script src="//cdn.javascrip.com/test.js" />
  • Do I need to create a new module for this? I was trying to override magento_theme default.xml and add this there but to no joy. – Matt Feb 22 '16 at 16:37
  • theme should work – KAndy Feb 22 '16 at 16:40
  • So I've got in myvendor/mytheme/Magento_Theme/layout/ default.xml with <referenceContainer name="before.body.end"> <block class="\Magento\Framework\View\Element\Template" template="Theme_Module::js.phtml" name="module_js"/> </referenceContainer> And the js.phtml inside /Magento_Theme/templates> Should that be right? Thanks – Matt Feb 22 '16 at 16:49
  • Works, but the answer could be a bit more complete so it's actually a real clear example (files etc.). – hakre Sep 15 '16 at 15:33
  • how can i do this in custom module? – jibin george Jan 6 at 12:40
3

Add referenceContainer code in layout file

app/design/frontend/<vendor>/<theme>/Magento_Theme/layout/default.xml

Before body end

 <referenceContainer name="before.body.end">
      <block class="Magento\Framework\View\Element\Js\Components" name="js.beforebody" as="jsbeforebody" template="Magento_Theme::js/js.phtml"/>
    </referenceContainer>

For after body start

 <referenceContainer name="after.body.start">
      <block class="Magento\Framework\View\Element\Js\Components" name="js.afterbody" as="jsafterbody" template="Magento_Theme::js/js.phtml"/>
    </referenceContainer>

Create js.phtml template file and put your js script/code in this file.

app/design/frontend/<vendor>/<theme>/Magento_Theme/templates/js/js.phtml
1

The updated codes in your question is not right. You need to change Theme_Module to Magento_Theme in the default.xml.

Below is the complete code

In your myvendor/mytheme/Magento_Theme/layout/default.xml, add content

<referenceContainer name="before.body.end">
    <block class="Magento\Framework\View\Element\Template" template="Magento_Theme::js.phtml" name="module_js"/>
</referenceContainer>

Add the file js.phtml inside directory myvendor/mytheme/Magento_Theme/templates.

In the js.phtml, add the js content like below

<script>
    ...
</script>

Refresh the site cache and you will see the effect.


Additional Tips

About the js.phtml content

The js content in Magento2 is another topic, you could find it it in official doc Calling and initializing JavaScript.

An official example is like below

<script>
require([
    'jquery',
    'accordion'  // the alias for "mage/accordion"
], function ($) {
    $(function () { // to ensure that code evaluates on page load
        $('[data-role=example]')  // we expect that page contains the <tag data-role="example">..</tag> markup
            .accordion({ // now we can use "accordion" as jQuery plugin
                header:  '[data-role=header]',
                content: '[data-role=content]',
                trigger: '[data-role=trigger]',
                ajaxUrlElement: "a"
            });
    });
});
</script>

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.