Here we’ll learn how to add css and js file in magento2 module .
Magento2: How to add css and js file in module
In blog post Magento2: Create list with pager in frontend we learned that how to create controller, page layout file, templates file, block files etc.
so we have already module named “Webkul_Grid”, in this module we add css and js file and for this we need to create following directory structure
in this module
app/code/Webkul/Grid/view/frontend/web/css (contain css file )
app/code/Webkul/Grid/view/frontend/web/js (contain js file )
css and js file add to page by layout xml
1.First we create css file which we want to add in our page named grid.css in app/code/Webkul/Grid/view/frontend/web/css folder
#my-orders-table{border:2px solid #FF0000;color:#FF0000;} /** Here i add style on table id for understand **/ /** Magento2 support 'less' in next post i'll explain how to use less in magento2 module **/ /** here we add normal css file in magento2 **/
2. Now, we will create js file which we want to add in our page named named grid.js in app/code/Webkul/Grid/view/frontend/web/js
require([ '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')); });
3.First, we will open frontend page layout file in which we want to add css and js. In our ‘Webkul_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/Webkul/Grid/view/frontend/layout
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd"> <!-- for add css and js file on page --> <head> <!-- for css file --> <css src="Webkul_Grid::css/grid.css"/> <!-- for js file --> <script src="Webkul_Grid::js/grid.js"/> <!-- src="Webkul_Grid::js/grid.js" that mean from here get file --> <!-- Webkul_Grid is module name, js/grid.js and css/grid.css are location of files in web folder of module --> </head> <body> <referenceContainer name="content"> <block class="Webkul\Grid\Block\Index" name="Grid" template="Webkul_Grid::grid/success.phtml"> </block> </referenceContainer> </body> </page>
Note: in next post i will explain how to use ‘less’ for style in magento2
3 comments