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 Answers 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– alexcr2016年05月11日 10:30:49 +00:00Commented May 11, 2016 at 10:30
-
i have updated my answer. i have to rename js file.Rakesh Jesadiya– Rakesh Jesadiya2016年05月11日 10:33:57 +00:00Commented May 11, 2016 at 10:33
-
thank you for your time @Rakesh , can I use the same for the product page right ?alexcr– alexcr2016年05月11日 10:53:00 +00:00Commented May 11, 2016 at 10:53
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:
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
Explore related questions
See similar questions with these tags.