1 / 9

How to Add/Remove JS, CSS, Fonts in Magento 2 Using Layout XML

This blog will help you on How to Add or Remove JS, CSS, Fonts in Magento 2 Using Layout XML. you will get an idea about how to remove or add thes important files.<br>

elsnermagentodeveloper
Download Presentation

How to Add/Remove JS, CSS, Fonts in Magento 2 Using Layout XML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. How To Add/Remove JS, CSS, Fonts in Magento 2 Using Layout XML

  2. 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 includes containers, blocks and layouts attractive. The structure of a web page is known as the layout The container represents the placeholder inside the web page structure Blocks represents the UI components or controls inside the containers placeholder.

  3. 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 file 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

  4. 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–> • <csssrc=”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–> • <csssrc =”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-

  5. 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.

  6. 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.

  7. 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:enableCustom_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

  8. Conclusion • You will need experienced Magento developers that can help in upgrading or Magento 2 Migration effortlessly.

More Related