Are you facing a problem related to the performance of your Magento store? The store owners have many challenges on a daily basis to maintain higher rankings on search engines. They create a store by adding custom JavaScript and CSS in the Magento 2 to make the layouts attractive. 
The basic components of the Magento store include containers, blocks, and layouts.
<ul>
<li style="font-weight: 400;" aria-level="1">The structure of a web page is known as the layout </li>
<li style="font-weight: 400;" aria-level="1">The container represents the placeholder inside the web page structure</li>
<li style="font-weight: 400;" aria-level="1">Blocks represent the UI components or controls inside the container placeholders</li>
</ul>
Magento developers are familiar with the basic view of Magento storefront pages and the process involved in the Magento 2 Migration. To get secure and stable <a href="https://www.elsner.com/magento-2-migration-services/">customization during Magento 2 Migration</a> do not change the theme layout.  The Magento application processes in the layout files like:
<ul>
<li style="font-weight: 400;" aria-level="1">Module base files are loaded </li>
<li style="font-weight: 400;" aria-level="1">Module area files are loaded</li>
<li style="font-weight: 400;" aria-level="1"> Collect the layout files from the modules. The orders are determined based on the  orders of modules from the app/etc/config.php file </li>
<li style="font-weight: 400;" aria-level="1">Determining the sequence of the inherited themes like [&lt;pare_theme&gt;,…,&lt;parent1_theme&gt;] &lt;current_theme&gt;</li>
<li style="font-weight: 400;" aria-level="1">Iterates the sequence of the theme from the last to the latest: 
&#8211; Add the extending theme layout files into the list 
&#8211; Replace the overridden layout files on the list</li>
</ul>
<ul>
<li style="font-weight: 400;" aria-level="1">Merges the layout files from the lists</li>
</ul>
<h2 id="1-adding-static-files">Adding Static Files</h2>
Any <a href="https://www.elsner.com/services/magento-development/">Magento 2 Development Company</a> will help in the Page configuration file in the &lt;head&gt; section that has static resources such as CSS and JavaScript. The file: 
App/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml
This defines the look of &lt;head&gt; section in the Magento store. To add the CSS and JavaScript that are recommended to extend the file in the custom theme:
&lt;page xmlns:xsi = ”http://www.w3.org/2001/XMLSchema-instance”   xsi:noNamespaceSchemaLocaion = ”urn:magento:framework:View/layout/etc/page_cofiguration.xsd”&gt;
 &lt;head&gt;
&lt;!—Add local resources&#8211;&gt;
&lt;css src=”css/my-stylesc.css”/&gt;
&lt;!&#8211;The Following two ways toad local JavaScript files are equal &#8211;&gt;
&lt;script src=”Magento_Catalog::jssample1.js”/&gt;
&lt;link src=”js/samplejs”/&gt;
&lt;!—Add External Resources&#8211;&gt;
&lt;css src =”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css” src_type=”url”/&gt;
&lt;script src = “https://maxcdn.bostrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js” src_type=”url”/&gt;
&lt;link rel = “stylesheet” type = ”text/css”  src”http://fonts.googleapis.com/css?family=Montserrat” src_type=”url” /&gt;
&lt;/head&gt;
&lt;/page&gt;
To add the external resources you will have to specify the argument value:
src_type=”url”
The command &lt;link src = ”js/sample.js”/&gt; or &lt;script src = “js/sample.js”/&gt; can be used to add the locally stored JavaScript file in the theme. The following locations specify the path to assets:
<ul>
<li style="font-weight: 400;" aria-level="1">&lt;theme_dir&gt;/web-</li>
<li style="font-weight: 400;" aria-level="1">&lt;theme_dir&gt;/&lt;Namespace&gt;_&lt;Module&gt;/web-</li>
</ul>
<h2 id="2-removing-static-files">Removing Static Files </h2>
The static assets that are linked in the page &lt;head&gt; to be removed, one can make changes in the theme extending:
App/design/frontend/&lt;Vendor&gt;/&lt;theme&gt;/Magento_Theme/layout/default_head_blocks.xml 
Like the following coding:
&lt;page xmlns:xsi = “http://www.w#.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation = “urn:magento:framework:Viewayout/etc/page_configuration.xsd”&gt;
&lt;head&gt;
&lt;!—Remove local resources&#8211;&gt;
&lt;remove src = “css/style-m.css” /&gt;
&lt;remove src = “my-js.js” /&gt;
&lt;remove src = “Magento_Catalog::js/compa.js” /&gt;
&lt;!&#8211;Remove External Resources &#8211;&gt;
&lt;remove src = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css”/&gt;
&lt;remove src = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js”/&gt;
&lt;remove src = “http://fonts.googleapis.com/css?family=Montserrat”/&gt;
&lt;/head&gt;
&lt;/page&gt;
The module path needs to be specified when you add or remove static assets like:
Magento_Catalog::js/sample.js.
<h2 id="3-customizing-the-js-and-css-in-magento-2">Customizing the JS and CSS in Magento 2</h2>
<h3 id="4-magento-2-css-customization">Magento 2 .css Customization </h3>
Sometimes small changes are required to alter themes and modules to fit the business requirements. Let us look at an example to change the CSS for <a href="https://store.elsner.com/">theme and extensions</a>: 
<ul>
<li style="font-weight: 400;" aria-level="1">Add the below code into the wp_custom.less for example to hide the search box from the store header. Custom CSS can be easily added in the file:</li>
</ul>
          .block-search {display: none;}
<ul>
<li style="font-weight: 400;" aria-level="1">Regenerate The theme LESS/CSS and flush the Magento cache and changes will be reflected in the storefront.</li>
</ul>
<h3 id="5-magento-2-js-customization">Magento 2 .js Customization </h3>
The project sometimes requires adding specific .js customization. Installing a sample module can be done by:
<ul>
<li style="font-weight: 400;" aria-level="1">Copying the module under the app/code/</li>
<li style="font-weight: 400;" aria-level="1">php bin/Magento module:enable Custom_Js &#8211;clear –static-content</li>
<li style="font-weight: 400;" aria-level="1">php bin/Magento setup:upgrade</li>
<li style="font-weight: 400;" aria-level="1">php bin/Magento ca:cl</li>
</ul>
Add the custom .js code into the:
App/code/Custom/Js/view/frontend/web/js/customjs.js
<h2 id="6-conclusion">Conclusion</h2>
You will need <a href="https://www.elsner.com/hire-magento-developer/">experienced Magento developers</a> that can help in upgrading or Magento 2 Migration effortlessly.

Are you facing a problem related to the performance of your Magento store? The store owners have many challenges on a daily basis to maintain higher rankings on search engines. They create a store by adding custom JavaScript and CSS in the Magento 2 to make the layouts attractive. 

The basic components of the Magento store include containers, blocks, and layouts.

 	The structure of a web page is known as the layout 
 	The container represents the placeholder inside the web page structure
 	Blocks represent the UI components or controls inside the container placeholders

Magento developers are familiar with the basic view of Magento storefront pages and the process involved in the Magento 2 Migration. To get secure and stable customization during Magento 2 Migration do not change the theme layout.  The Magento application processes in the layout files like:

 	Module base files are loaded 
 	Module area files are loaded
 	 Collect the layout files from the modules. The orders are determined based on the  orders of modules from the app/etc/config.php file 
 	Determining the sequence of the inherited themes like [&lt;pare_theme&gt;,…,&lt;parent1_theme&gt;] &lt;current_theme&gt;
 	Iterates the sequence of the theme from the last to the latest:
- Add the extending theme layout files into the list
- Replace the overridden layout files on the list


 	Merges the layout files from the lists

Adding Static Files
Any Magento 2 Development Company will help in the Page configuration file in the &lt;head&gt; section that has static resources such as CSS and JavaScript. The file: 

App/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml

This defines the look of &lt;head&gt; section in the Magento store. To add the CSS and JavaScript that are recommended to extend the file in the custom theme:

&lt;page xmlns:xsi = ”http://www.w3.org/2001/XMLSchema-instance”   xsi:noNamespaceSchemaLocaion = ”urn:magento:framework:View/layout/etc/page_cofiguration.xsd”&gt;

 &lt;head&gt;

&lt;!—Add local resources--&gt;

&lt;css src=”css/my-stylesc.css”/&gt;

&lt;!--The Following two ways toad local JavaScript files are equal --&gt;

&lt;script src=”Magento_Catalog::jssample1.js”/&gt;

&lt;link src=”js/samplejs”/&gt;

&lt;!—Add External Resources--&gt;

&lt;css src =”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css” src_type=”url”/&gt;

&lt;script src = “https://maxcdn.bostrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js” src_type=”url”/&gt;

&lt;link rel = “stylesheet” type = ”text/css”  src”http://fonts.googleapis.com/css?family=Montserrat” src_type=”url” /&gt;

&lt;/head&gt;

&lt;/page&gt;

To add the external resources you will have to specify the argument value:

src_type=”url”

The command &lt;link src = ”js/sample.js”/&gt; or &lt;script src = “js/sample.js”/&gt; can be used to add the locally stored JavaScript file in the theme. The following locations specify the path to assets:

 	&lt;theme_dir&gt;/web-
 	&lt;theme_dir&gt;/&lt;Namespace&gt;_&lt;Module&gt;/web-

Removing Static Files 
The static assets that are linked in the page &lt;head&gt; to be removed, one can make changes in the theme extending:

App/design/frontend/&lt;Vendor&gt;/&lt;theme&gt;/Magento_Theme/layout/default_head_blocks.xml 

Like the following coding:

&lt;page xmlns:xsi = “http://www.w#.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation = “urn:magento:framework:Viewayout/etc/page_configuration.xsd”&gt;

&lt;head&gt;

&lt;!—Remove local resources--&gt;

&lt;remove src = “css/style-m.css” /&gt;

&lt;remove src = “my-js.js” /&gt;

&lt;remove src = “Magento_Catalog::js/compa.js” /&gt;

&lt;!--Remove External Resources --&gt;

&lt;remove src = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css”/&gt;

&lt;remove src = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js”/&gt;

&lt;remove src = “http://fonts.googleapis.com/css?family=Montserrat”/&gt;

&lt;/head&gt;

&lt;/page&gt;

The module path needs to be specified when you add or remove static assets like:

Magento_Catalog::js/sample.js.
Customizing the JS and CSS in Magento 2
Magento 2 .css Customization 
Sometimes small changes are required to alter themes and modules to fit the business requirements. Let us look at an example to change the CSS for theme and extensions: 

 	Add the below code into the wp_custom.less for example to hide the search box from the store header. Custom CSS can be easily added in the file:

          .block-search {display: none;}


 	Regenerate The theme LESS/CSS and flush the Magento cache and changes will be reflected in the storefront.

Magento 2 .js Customization 
The project sometimes requires adding specific .js customization. Installing a sample module can be done by:

 	Copying the module under the app/code/
 	php bin/Magento module:enable Custom_Js --clear –static-content
 	php bin/Magento setup:upgrade
 	php bin/Magento ca:cl

Add the custom .js code into the:

App/code/Custom/Js/view/frontend/web/js/customjs.js
Conclusion
You will need experienced Magento developers that can help in upgrading or Magento 2 Migration effortlessly.

Do you want more traffic?

Digital Transformation begins here!

You may also like

Technology Moves
Fast, So Do We

Share this topic on

Do you want more traffic?

Digital Transformation begins here!

You may also like

Technology Moves Fast, So Do We

Technology Moves
Fast, So Do We