Magento 2 | Create a custom module for add custom js & Css
For a customer request we need to fixing some .js bugs on a Magento 2 Theme that wasn’t developed by me.
Because i don’t know how the theme was developed, and for a debug purpose, i want to add my custom css and js files.
The simplest way is develop a custom module the add our custom files in the right position:
let’s start by create the necessary folders and files:
Create the module folder:
Under “app/code” create your custom vendor folder ( in my case is : ) “/Beprime/customJs/”.
Inside the module folder just created add a new folder “/etc”, then create a new file “module.xml” and put the following code into it:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
<module name="Beprime_customJs" setup_version="0.0.1">
</module>
</config>
Basically This file contains the following information:
Module name
Module version
Dependencies
Replace ” ‘Beprime_customJs’ ” with your ” ‘vendorfolder_pluginfolder’ “.
The module.xml file will have a special declaration that defines a list of modules that the current module depends on.
Note that in the XML file we specified:
Module name: Learning_FirstUnit (based on the folders we created)
Version: 0.0.1 (initial version of our module)
Dependency: Magento_Catalog. We could have multiple dependencies. In this case, we would put
Create the registration.php file
Each module must have this file, which tells Magento how to locate the module.
Create the “registration.php” file under the module root, and add this code :
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Beprime_customJs', __DIR__ );
The registration.php is a standardized file that follows the same pattern for all modules.
Replace ” ‘Beprime_customJs’ ” with your ” ‘vendorfolder_pluginfolder’ “.
Now we need to add the custom js ( or css ) file.
Create under module root the folders “view/frontend/web/js” ( or if is a css “view/frontend/web/css” ), and add a your custom js file ( in my case is “customjs.js” ).
and paste this code :
require([
"jquery"
], function($){
$(document).ready(function() {
console.log('All right Sparky!!');
});
});
we made dipendent from jquery and on document.ready print a consol.log.
Last things we have to do is create a “layout” folder under “view/frontend/” in module root, and add a “default.xml” file, paste in it
for a custom js :
<?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>
<script src="Beprime_customJs::js/customjs.js"/>
</head>
</page>
for a custom css
<?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="Beprime_customJs::css/customcss.css" />
</head>
</page>
for both
<?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>
<script src="Beprime_customJs::js/customjs.js"/>
<css src="Beprime_customJs::css/customcss.css" />
</head>
</page>
Now let’s connect to Magento with CLI, “php bin/magento setup:upgrade”, “php bin/magento clear:cache”, “php bin/magento flush:cache”, reload the store page, and, if all it’s right, in console you’ll see a ” All right Sparky!! ” message.
That’s all