Include JavaScript Only on a Specific Page in Magento 2

javascriptmagento2

I'm using magento 2 and I would like to include a javascript file , '' just into a page , for example about us page.. which file should I edit to do that, so I can add that code ?

Best Answer

You can go to cms -> pages and in the content of the page you want, add the javascript directly like i did in about us page

<script type="text/javascript">
$j=jQuery.noConflict();
$j(".logo").click(function(){
alert("The logo was clicked.");
 });
</script>

Then when i click on logo on about us page only it will alert

Or there is another preferred way to do this by adding this code in js file and load that js file in cms -> page -> design tab in layout update xml.

Related Solutions

Magento – Basic question: How to add javascript functionality to a page

Welcome to Magento.SE!

Because this is theme-related, you would place it in the skin/js folder in your theme's path; something like:

[mage-root]/skin/frontend/[yourpackage]/[yourtheme]/js/jquery.waypoints.js

Next you'll need to add some layout xml to shove this into your theme; possibly in your theme's layout/local.xml file; this is how you achieve the 'targeting' you were asking about earlier:

<catalog_product_view>
    <reference name="head">
        <action method="addItem"><type>skin_js</type><name>js/jquery.waypoints.js</name></action>
    </reference>
</catalog_product_view>

If you want layout xml for sitewide, change catalog_product_view to default.

I recommend you look into jQuery Waypoints, my personal favorite sticky-header JS that does so much more.

Magento 2 – How to Include JS on Product Page

For example, We have our folder structure of current theme:

We should focus four files:

Magento_Catalog/layout/catalog_product_view.xml Magento_Catalog/templates/product/js.phtml

Add new template to call our jQuery plugin. That helps us to include our js on product detail page only.

Layout

#app/design/frontend/Boolfly/yume/Magento_Catalog/layout/catalog_product_view.xml

<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template"
               name="custom.js" as="custom.js" template="Magento_Catalog::product/js.phtml"/>
    </referenceContainer>
</page>

Template:

#app/design/frontend/Boolfly/yume/Magento_Catalog/templates/product/js.phtml

    <script>// <![CDATA[
        require([
            'jquery',
            'hello'
        ], function ($) {
            $('.product-info-main').HelloWorld();
        });
        // ]]>
    </script>

app/design/frontend/Boolfly/yume/web/js/custom.js

We can create our own custom jQuery plugin.

define('jquery', function($) {

    $.fn.HelloWorld = function() {
        alert('Here');
    }

    }(jQuery)
);

app/design/frontend/Boolfly/yume/requirejs-config.js

Create a RequireJS configuration file.

var config = {
    map: {
        '*' : {
            'hello' : 'js/custom'
        }
    }
};

Clear Magento Cache and run static content deploy:

php bin/magento setup:static-content:deploy
php bin/magento cache:clean

We can read more here how to create custom Javascript: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html

Best Answer

Related Solutions

Magento – Basic question: How to add javascript functionality to a page

Magento 2 – How to Include JS on Product Page

Related Topic