0

I'm working on a module for Magento 2, it's my first time writing a Magento module and I feel like there is something very basic I somehow fail to understand, I'm trying to add a code snippet to every page on the frontend, the code snippet is using data from the backend so I can't just add the script in default_head_blocks.xml, it has to be a PHTML file, but either I'm placing the file in the wrong location or not calling it correctly, I just can't seem to get anything printed on the screen, how can I achieve this?

All I want is to print a code snippet to the header of every page on the frontend, an example that adds

<script> alert(1); </script>

would be great help.

Pretty new to this Magento thing so any help, tip or advice will be welcome.

  • FYI you can still use code from the backend in your JS. You just need to pass it through to the JS file via Require JS. This method is best practice, inline JS is not. – Ben Crook Apr 25 '17 at 12:31
0

Create a module (let's call it StackExchange_Snippet) and in the file view/frontend/layout/default.xml add this

<?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>
        <referenceBlock name="head.additional">
            <block type="Magento\Framework\View\Element\Template" name="pulsestorm.head" as="my.head.snippet" template="StackExchange_Snippet::snippet.phtml"/>
        </referenceBlock>
    </body>
</page>

Then create the template file view/frontend/templates/snippet.phtml that should contain your code.

I know it looks strange that you are asking for a block in the head section but I'm adding something in the body tag but trust me, it will work.

Here is some explanation on why this works: Magento 2: Adding Arbitrary HTML to the <head> of Every Page?

0

Your custom should be referenced to container: after.body.start and before.body.end. Take a look: vendor/magento/module-theme/view/frontend/layout/default.xml.

For example:

app/code/Vendor/HelloWorld/view/frontend/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="after.body.start">
            <block name="custom.js" class="Magento\Framework\View\Element\Template"
                   template="Vendor_HelloWorld::page/js/custom_js.phtml" />
        </referenceContainer>
    </body>
</page>

app/code/Vendor/HelloWorld/view/frontend/templates/page/js/custom_js.phtml

<script >
 require([
    'jquery'
], function($){
    alert("Here");
    //Js and PHP code here.
});

</script>

[EDIT]

If you want to add the code snippet in the page Head, you should try with Marius's answer. You can see an example: vendor/magento/module-catalog/view/frontend/layout/default.x‌​ml and vendor/magento/module-catalog/view/frontend/layout/catalog_p‌​roduct_opengraph.xml.

  • can you please provide a more complete example? as I said I'm pretty new to this. – Erez Hochman Apr 25 '17 at 12:19
  • also, I would like the code snippet to be in the page HEAD and not body, is that possible? – Erez Hochman Apr 25 '17 at 12:20
  • If you want to add the code snippet in the page Head, you should try with Marius's answer. You can see an example: vendor/magento/module-catalog/view/frontend/layout/catalog_product_opengraph.xml and vendor/magento/module-catalog/view/frontend/layout/default.xml – Khoa TruongDinh Apr 25 '17 at 12:24

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.