How to add CSS and JS in Magento 2 – Custom Module
In this post we will show you How to add CSS and JS in Magento 2 with Custom Module, hear for How to add CSS and JS in Magento 2 with Custom Module we will give you demo and example for implement.
Till now you have how to make Magento 2 module. Presently you may need to legitimately add CSS and JS records to your Magento 2 module. Like Magento 1 Magento 2 gives design xmls that are utilized to include your module css and js records. we will reveal to both of you approaches to add css and js documents to your custom module.
Give us a chance to accept that our module namespace in onlinecode and our module name is Test.
Method 1: Using Simple Layouts
In this technique you can include the CSS/JS documents in frontend utilizing format records as it were.
1. Open the format record show at: onlinecode/Test/see/frontend/design/default.xml
Including format in default.xml will be accessible on all pages of your agento 2 site. You can likewise add this code to any particluar page utilizing the accompanying design record:
onlinecode/Test/view/frontend/layout/
Now change the code of layout file as follows:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="onlinecode_Fancyfeedback/css/my_css.css"/>
<link src="onlinecode_Fancyfeedback/js/my_js.js"/>
</head>
</page>
2. Now create the css and js files at following locations:
onlinecode/Test/view/frontend/web/js/my_js.js onlinecode/Test/view/frontend/web/css/my_css.css
Now clear the cache using following command:
php bin/magento cache:clear
If you refresh the page you can see the module files in your page source code.
Method 2: Using Blocks
In some cases you may want to add CSS/JS file based on certain conditions in your module. For this you can CSS/JS files by adding a block in the head block of Magento 2.
1. In your layout file add following code:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<referenceBlock name="head.additional">
<block template="head.phtml"
class="onlinecode\Fancyfeedback\Block\Head"
name="onlinecode_fancyfeedback_block_head" />
</referenceBlock>
</page>
2. Now create the Head.php block class in your module: onlinecode/Test/Block/Head.php
3. Add following code to this file:
<?php
namespace onlinecode\Fancyfeedback\Block;
class Head extends \Magento\Framework\View\Element\Template
{
//
public $assetRepository;
// construct
public function __construct(
\Magento\Framework\View\Element\Template\Context $context,
array $data = [],
\Magento\Framework\View\Asset\Repository $assetRepository
)
{
// Hear we Get the asset repository
// to get URL of our assets
$this->assetRepository = $assetRepository;
return parent::__construct($context, $data);
}
}
4. You can see in step 1 we have specified the template file for our block. Now we will create the template file at: onlinecode/Test/view/frontend/templates/head.phtml
5. In this template file add following code:
<?php
$get_asset_repository = $this->assetRepository;
$get_js_asset = $get_asset_repository->createAsset('onlinecode_Fancyfeedback/js/ws_ff.js');
$get_css_asset = $get_asset_repository->createAsset('onlinecode_Fancyfeedback/css/ws_ff.css');
?>
<link href="<?php echo $get_css_asset->getUrl(); ?>" rel="stylesheet" type="text/css" />
<script src="<?php echo $get_js_asset->getUrl(); ?>"></script>
Again clear the cache and you are done.
Adding jQuery code:
In case your module report uses jQuery, you ought to use require.js dialect structure to incorporate the code in this record for the most part your code wont have the ability to get to the overall jQuery dissent.
In onlinecode/Test/view/frontend/web/js/my_js.js, add your jQuery code as follows:
require([
"jquery"
], function($){
//<![CDATA[
$(document).ready(function() {
console.log('hear jquery loaded from onlinecode test');
});
//]]>
});
Hope this code and post will helped you for implement How to add CSS and JS in Magento 2 – Custom Module. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org