Search Results for:

Our Blog

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

727

Dipak Patil

January 01, 2021

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:

<head>

<!—Add local resources–>

<!–The Following two ways toad local JavaScript files are equal –>

<!—Add External Resources–>

</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:

<head>

<!—Remove local resources–>

<!–Remove External Resources –>

</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: