Magento – Magento 2 Add javascript to single page

javascriptlayoutmagento-2.1magento2

I'm trying to get some JavaScript in the head on a single CMS page in Magento 2 and cannot figure it out. I understand how to extend layouts to include this, but I don't want the script on all pages that use a layout. Unfortunately this script does have to be loaded before the page body loads for it to work.

In Magento 1, I simply added this to the Layout Update XML:

<reference name="head">
    <block type="core/text" name="blockname">
        <action method="setText">
            <text>
                <![CDATA[<script type="text/javascript">

However, that doesn't work in Magento 2.

Is there any way to do this? It seems so simple, yet I've hit a wall trying to figure it out.

By the way, been a long-time lurker, and you guys are great.

Thanks.

Best Answer

If you use a cms site, you can create a cmsyourname.phtml. Now you can insert your jquery in the top of the file.

In your cms page in the backend, you have to add this:

{{block class="Magento\Framework\View\Element\Template" name="cmsyourname" template="Magento_Cms::html/cmsyourname.phtml"}}

Related Solutions

Magento 1.7 – Adding JavaScript to Head in Certain Pages

Add the following in your local.xml layout file (app/design/frontend/{interface}/{theme}/layout/local.xml) right under the <layout> tag this:
For product pages

<catalog_product_view>
    <reference name="head">
        <block type="core/text" name="some_name" as="some_name">
            <action method="setText">
                <text><![CDATA[YOUR TEXT GOES HERE]]></text>
            </action>
        </block>
    </reference>
</catalog_product_view>

For the checkout page is the same thing, except you need to replace the top tag with <checkout_onepage_index>. So the section above becomes:

<checkout_onepage_index>
    <reference name="head">
        <block type="core/text" name="some_name" as="some_name">
            <action method="setText">
                <text><![CDATA[YOUR TEXT GOES HERE]]></text>
            </action>
        </block>
    </reference>
</checkout_onepage_index>

it works the same for any other page. You just need to know the correct page handle (top tag). For index is cms_index_index, for cart is checkout_cart_index.

Magento – Magento 2 Theming – How are page layout and page configurations connected

First of all, we need to read: putting content in a custom homepage and Magento 2 Include js on the product page

So, we can add a custom js on home page only:

app/design/frontend/Vendor/Theme/Magento_Cms/layout/cms_index_index.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">
    <head>
        <link src="js/mycustom.js"/>
         <!--<script src="Vendor_Module::js/extension.js"/>-->
    </head>
</page>

Or we can call a custom js in phtml:

<?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="content">
        <block class="Magento\Framework\View\Element\Template"
               name="custom.js" as="custom.js" template="Vendor_Module::custom/js.phtml"/>
       </referenceContainer>
    </body>
</page>

In your custom js:

require([
        'jquery'
    ], function ($) {
        console.log("Hello Homepage");
    });

Best Answer

Related Solutions

Magento 1.7 – Adding JavaScript to Head in Certain Pages

Magento – Magento 2 Theming – How are page layout and page configurations connected

Related Topic