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 [<pare_theme>,…,<parent1_theme>] <current_theme>
- 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 <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:
- <theme_dir>/web-
- <theme_dir>/<Namespace>_<Module>/web-
Removing Static Files
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.
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.
