Magento 2 – Add JavaScript Library Only on Category Page

javascriptlayoutmagento2requirejstemplate

I'm using magento 2 and I'm trying to insert a javascript library into into my category page. I only need it so I can stick my sidebar , so I don't need them also on other pages , what is the right file to edit so I can add the libraries ?

Best Answer

You simple need to override catalog_category_view.xml file into your theme.

code for catalog_category_view.xml file,

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
    <head>  
        <script src="js/custom.js"/>
    </head>
    </body>
</page>

custom.js file path is app/design/frontend/{Vendor}/{theme}/web/js/custom.js.

Call your custom.js file inside theme list.phtml file with below code,

<script>
    require(['jquery','js/custom']);
</script>

Without need of declare requirejs-config.js file you can directly call inside your category page.

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.

Include JavaScript Only on a Specific Page in Magento 2

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.

Best Answer

Related Solutions

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

Include JavaScript Only on a Specific Page in Magento 2

Related Topic