How to add custom css and js file in Magento 2?

Question

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..!

Community · Accepted Answer · 2020-06-15 08:30:17Z

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. — Priya
– Priya, Commented Apr 25, 2019 at 5:47
i like to add 2 js files, one is (custom.mim.js) how to call that .min.js files? — Priya
– Priya, Commented Apr 25, 2019 at 8:32

Raj Mohan R · Accepted Answer · 2019-04-24 12:11:35Z

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>

answered Apr 24, 2019 at 12:11

Raj Mohan R

2,0861 gold badge10 silver badges14 bronze badges

i added in my module .xml file like you given, but i think so js file has corrupted

Priya
– Priya

2019-04-25 04:58:42 +00:00
Commented Apr 25, 2019 at 4:58
Where is your css or js files placed? Also please share the code you have added

Raj Mohan R
– Raj Mohan R

2019-04-25 06:05:10 +00:00
Commented Apr 25, 2019 at 6:05
i had adde my code in "app/code/Sub/Categorylist/view/frontend/web/(css)&(js)folder.

Priya
– Priya

2019-04-25 06:14:28 +00:00
Commented Apr 25, 2019 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

Priya
– Priya

2019-04-25 06:47:36 +00:00
Commented Apr 25, 2019 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
– Raj Mohan R

2019-04-25 07:54:09 +00:00
Commented Apr 25, 2019 at 7:54

Add a comment |

fmsthird · Accepted Answer · 2019-04-24 12:11:48Z

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>

Saphal Jha · Accepted Answer · 2019-04-24 12:15:55Z

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>

answered Apr 24, 2019 at 12:15

Saphal Jha

1,89315 silver badges26 bronze badges

Add a comment |

Stack Exchange Network

How to add custom css and js file in Magento 2?

4 Answers 4

JS:

To add a js in theme via `Requirejs`:

CSS:

Your Answer

Linked

Hot Network Questions

How to add custom css and js file in Magento 2?

4 Answers 4

JS:

To add a js in theme via Requirejs:

CSS:

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions

To add a js in theme via `Requirejs`: