1

I want to add my custom css and js files in my catalog page. Please let me know how to add in header.

I added catalog_product_view.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <head>
        <css src="Sub_Categorylist::css/category_css_slider.css"/>
        <css src="Sub_Categorylist::css/category_css_theme_slider.css"/>

        <script src="Sub_Categorylist::js/category_slider.js"/>
        <script src="Sub_Categorylist::js/category_slider.min.js"/>
    </head>

</page>

Please let me know is there any corrections.

Thanks In Advance..!

1

JS:

The best way to add a JS in Magento (theme or module) is with REQUIREJS.

To add a js in theme via Requirejs:

Supposing that your js file is: myfile.js

app/design/frontend/{Vendor}/{theme}/requirejs-config.js

var config = {
    map: {
        '*': {
            myscript: 'js/myfile'
        }
    }
};

app/design/frontend/{Vendor}/{theme}/web/js/myfile.js

define(['jquery'], function($){
   "use strict";
       return function myscript()
       {
           alert('hello myscript');
           //put all your myfile js code here
       }
});

app/design/frontend/{Vendor}/{theme}/Magento_Theme/templates/{yourfile}.phtml

<script type="text/javascript">
    require(['jquery', 'myscript'], function($, myscript) {
        myscript();
    });
</script>

Info: don't forget to :

  • clean the cache

  • clean var/view_preprocessed content

  • clean pub/static content

  • deploy the static content = php bin/magento setup:static-content:deploy -f

CSS:

app/design/frontend/{Vendor}/{theme}/Magento_Theme/layout/default_head_blocks.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>
        <css src="css/yourstyle.css" />
    </head>
</page>

note :

All these will be displayed in theme, if you just need catalog page, you replace Magento_Theme with Magento_Catalog

  • Hi, i like to add in my module files. i call css and js files like above my updated question. – mohana Apr 25 at 5:47
  • Look this : magento.stackexchange.com/a/255077/48355 – PЯINCƏ Apr 25 at 8:14
  • i like to add 2 js files, one is (custom.mim.js) how to call that .min.js files? – mohana Apr 25 at 8:32
0

Add it to your layout file catalog_product_view.xml(Product Page), catalog_category_view.xml(Category Page)

<head>
    <css src="Namespace_YourModule::css/custom.css"/>
    <script src="Magento_Catalog::js/custom.js"/>
</head>
  • i added in my module .xml file like you given, but i think so js file has corrupted – mohana Apr 25 at 4:58
  • Where is your css or js files placed? Also please share the code you have added – Raj Mohan R Apr 25 at 6:05
  • i had adde my code in "app/code/Sub/Categorylist/view/frontend/web/(css)&(js)folder. – mohana Apr 25 at 6:14
  • i place " <script type="text/javascript"> $(document).on('ready', function() { $(".center").slick({ dots: true, infinite: true, centerMode: true, slidesToShow: 5, slidesToScroll: 3 }); }); </script>" in my app/code/Sub/Categorylist/view/frontend/templates/category/sub.phtml but its not working – mohana Apr 25 at 6:47
  • So what error are you getting when loading the css and js in layout file? So you are placing the script in template, whether the script gets loaded in frontend? – Raj Mohan R Apr 25 at 7:54
0

You can do it by adding it on the head of a layout
Refer from this: Include static resources

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local resources -->
        <css src="css/my-styles.css"/>

        <!-- The following two ways to add local JavaScript files are equal -->
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>

        <!-- Add external resources -->
    <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
        <link rel="stylesheet" type="text/css" src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" />
    </head>
</page>
0

Override catalog_category_view.xml file into your theme.

<?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">
    <body>
    <head>  
        <script src="js/custom.js"/>
        <css src="css/styles-m.css" />
    </head>
    </body>
</page>
-1

Add catalog_product_view.xml layout in your custom extension and add your custom CSS or js in the head tag.

  • i added <layout> <reference name="head"> <action method="addJs"> <script>js/category_slider.js</script> <script>js/category_slider.min.js</script> </action> <action method="addCss"> <css src="css/category_css_slider.css" /> <css src="css/category_css_theme_slider.css" /> </action> </reference> </layout> – mohana Apr 24 at 12:11
  • this is not the correct code, plz follow "magefms" code – Biren Patel Apr 24 at 12:14
  • I edited and my code <head> <css src="Sub_Categorylist::css/category_css_slider.css"/> <css src="Sub_Categorylist::css/category_css_theme_slider.css"/> <script src="Sub_Categorylist::js/category_slider.js"/> <script src="Sub_Categorylist::js/category_slider.min.js"/> </head> – mohana Apr 24 at 12:36
  • <head> <css src="Abenedi_AddCustomCssJs::custom.css"/> <link src="Abenedi_AddCustomCssJs::custom.js"/> </head> – Biren Patel Apr 24 at 12:58
  • and then run static content deploy command once – Biren Patel Apr 24 at 12:59

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.