2

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 ?

2

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.

  • Hi @Rakesh , how do I call it , if the name is custom.js , with this code require(['jquery','js/jscolor']); ? – alexcr May 11 '16 at 10:30
  • i have updated my answer. i have to rename js file. – Rakesh Jesadiya May 11 '16 at 10:33
  • thank you for your time @Rakesh , can I use the same for the product page right ? – alexcr May 11 '16 at 10:53
6

If we take a look at this topic Magento 2 Include js on the product page, we can see how to include js on the product page only. We can include javascript library on category page in the same way.

Our folder structure:

enter image description here

We should focus four files:

-Magento_Catalog/layout/catalog_category_view.xml and Magento_Catalog/templates/category/js.phtml - Add new template to call our jQuery plugin. That helps us to include our js on category page.

Layout

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left"
      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::category/js.phtml"/>
    </referenceContainer>
</page>

Template: using RequireJs to call our custom js or js library.

<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

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.