Magento 2 is an adaptable E-trade stage with the potential to customize the features for a feasible performance. One of the guides to do so is to add CSS and Javascript files to CMS pages in Magento 2.
Adding CSS and Javascript files to Magento 2 CMS pages permits improving the speed execution. For instance, you need to execute an element on a single CMS page, you can do so utilizing the below code.
So we have as of now module named “Webiators_Grid”, right now, including CSS and js file and for this, we have to make the following directory structure
in this module
app/code/Webiators/Grid/view/frontend/web/css (contain css file )
app/code/Webiators/Grid/view/frontend/web/js (contain js file )
css and js file add to the page by layout xml
Step -1 First we create css file which we want to add in our page named grid.css in
app/code/Webiators/Grid/view/frontend/web/css folder
|
1 2 3 4 |
#my-orders-table{border:2px solid #FF0000;color:#FF0000;} /** Here i add style on table id for understand **/ /** here we add normal css file in magento2 **/ |
Step -2 Now, we will create js file which we want to add in our page named grid.js in
app/code/Webiators/Grid/view/frontend/web/js
|
1 2 3 4 5 6 7 8 |
define('js/theme', [ 'jquery', 'domReady!' ], function ($) { 'use strict'; /* for check in this file we only add jquery code that display(in console) class of element which selector used */ console.log($('#my-orders-table').attr('class')); }); |
Step -3 First, we will open the frontend page layout file in which we want to add css and js. In our ‘Webiators_Grid’ module, we want to add css and js in gird list page so we open this page layout file named grid_index_index.xml in
app/code/Webiators/Grid/view/frontend/layout
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- for add css and js file on page --><!-- for css file --><!-- for js file --> <script src="Webiators_Grid::js/grid.js"/> <!-- src="Webiators_Grid::js/grid.js" that mean from here get file --><!-- Webiators_Grid is module name, js/grid.js and css/grid.css are location of files in web folder of module --> |
That’s it.
Any questions on the subject? Don’t hesitate to specify them in the Comments section below. I’d be glad to support them.
