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..!
4 Answers 4
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_preprocessedcontentclean
pub/staticcontentdeploy 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– Priya2019年04月25日 05:47:34 +00:00Commented Apr 25, 2019 at 5:47
-
Look this : magento.stackexchange.com/a/255077/483552019年04月25日 08:14:41 +00:00Commented Apr 25, 2019 at 8:14
-
i like to add 2 js files, one is (custom.mim.js) how to call that .min.js files?Priya– Priya2019年04月25日 08:32:20 +00:00Commented Apr 25, 2019 at 8:32
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 corruptedPriya– Priya2019年04月25日 04:58:42 +00:00Commented Apr 25, 2019 at 4:58
-
Where is your css or js files placed? Also please share the code you have addedRaj Mohan R– Raj Mohan R2019年04月25日 06:05:10 +00:00Commented Apr 25, 2019 at 6:05
-
i had adde my code in "app/code/Sub/Categorylist/view/frontend/web/(css)&(js)folder.Priya– Priya2019年04月25日 06:14:28 +00:00Commented 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 workingPriya– Priya2019年04月25日 06:47:36 +00:00Commented 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 R2019年04月25日 07:54:09 +00:00Commented Apr 25, 2019 at 7:54
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>
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>