Magento Solutions
Open Source Development
Digital Marketing
CMS Development
E-Commerce Solution
Mobile App Development
Hire Developers
Quality Engineering
January 1, 2021
| 5 Minutes Read
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.
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:
Any Magento 2 Development Company will help in the Page configuration file in the <head> 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 <head> section in the Magento store. To add the CSS and JavaScript that are recommended to extend the file in the custom theme:
<page xmlns:xsi = ”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocaion = ”urn:magento:framework:View/layout/etc/page_cofiguration.xsd”>
<head>
<!—Add local resources–>
<css src=”css/my-stylesc.css”/>
<!–The Following two ways toad local JavaScript files are equal –>
<script src=”Magento_Catalog::jssample1.js”/>
<link src=”js/samplejs”/>
<!—Add External Resources–>
<css src =”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css” src_type=”url”/>
<script src = “https://maxcdn.bostrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js” src_type=”url”/>
<link rel = “stylesheet” type = ”text/css” src”http://fonts.googleapis.com/css?family=Montserrat” src_type=”url” />
</head>
</page>
To add the external resources you will have to specify the argument value:
src_type=”url”
The command <link src = ”js/sample.js”/> or <script src = “js/sample.js”/> can be used to add the locally stored JavaScript file in the theme. The following locations specify the path to assets:
The static assets that are linked in the page <head> to be removed, one can make changes in the theme extending:
App/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml
Like the following coding:
<page xmlns:xsi = “http://www.w#.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation = “urn:magento:framework:Viewayout/etc/page_configuration.xsd”>
<head>
<!—Remove local resources–>
<remove src = “css/style-m.css” />
<remove src = “my-js.js” />
<remove src = “Magento_Catalog::js/compa.js” />
<!–Remove External Resources –>
<remove src = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css”/>
<remove src = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js”/>
<remove src = “http://fonts.googleapis.com/css?family=Montserrat”/>
</head>
</page>
The module path needs to be specified when you add or remove static assets like:
Magento_Catalog::js/sample.js.
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:
.block-search {display: none;}
The project sometimes requires adding specific .js customization. Installing a sample module can be done by:
Add the custom .js code into the:
App/code/Custom/Js/view/frontend/web/js/customjs.js
You will need experienced Magento developers that can help in upgrading or Magento 2 Migration effortlessly.
We take pride in receiving recognition and accolades by offering unmatched IT and digital marketing solutions
About us
