Magento – Magento 2 Difference between default.xml and default_head_blocks.xml

default.xmlmagento2

In Magento 2 Theme , default.xml and default_head_blocks.xml files are located in app\design\frontend\{package}\{theme}\Magento_Theme\layout

can anyone tell me what is the difference between these two files ?

Best Answer

default.xml: defines the page layout.

default_head_blocks.xml: defines the scripts, images, and meta data included in pages’ section.

You can read more about this here: from magento doc

Example of default_head_blocks.xml

app/design/frontend/Vendor/theme/Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local resources -->
        <css src="css/my-styles.css"/>
    
        <!-- The following two ways to add local JavaScript files are equal -->
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>
        
        <!-- 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.bootstrapcdn.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>

Example of default.xml

app/code/Magento/Catalog/view/frontend/layout/default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
...
        <referenceContainer name="sidebar.additional">
            <block class="Magento\Catalog\Block\Product\Compare\Sidebar" name="catalog.compare.sidebar" template="product/compare/sidebar.phtml"/>
        </referenceContainer>
...
    </body>
</page>

Related Solutions

Magento2 – Difference Between referenceContainer and referenceBlock

basically containers are the equivalent of the core/text_list blocks in magento 1.
"philosophically" they work the same, the only difference is that containers are predefined blocks that only support other child blocks.
Some examples are content, after.body.start, header-wrapper.
You can see all defined containers for example in the Magento/Theme/view/base/page_layout/*.

Here is an example from empty.xml.

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_layout.xsd">
    <container name="root">
        <container name="after.body.start" as="after.body.start" before="-" label="Page Top"/>
        <container name="page.wrapper" as="page_wrapper" htmlTag="div" htmlClass="page-wrapper">
            <container name="global.notices" as="global_notices" before="-"/>
            <container name="main.content" htmlTag="main" htmlId="maincontent" htmlClass="page-main">
                <container name="columns.top" label="Before Main Columns"/>
                <container name="columns" htmlTag="div" htmlClass="columns">
                    <container name="main" label="Main Content Container" htmlTag="div" htmlClass="column main"/>
                </container>
            </container>
            <container name="page.bottom" as="page_bottom" label="Before Page Footer Container" after="main.content" htmlTag="div" htmlClass="page-bottom"/>
            <container name="before.body.end" as="before_body_end" after="-" label="Page Bottom"/>
        </container>
    </container>
</layout>

basically what's defined as <container name="..." /> can be accessed by referenceContainer. what's declared as <block .... /> can be referenced by referenceBlock

Magento2 Layout Overrides – Difference Between Extend a Layout and Override Layout

Extending Means create a layout file and just add your changes, Overriding need whole code to be present in the layout

Extending a layout:

Rather than copy extensive page layout or page configuration code and then modify what you want to change, in the Magento system, you only need to create an extending layout file that contains the changes you want.

<theme_dir>
     |__/<Namespace>_<Module>
     |__/layout
        |--<layout1>.xml
        |--<layout2>.xml

Override a layout

Not all layout customizations can be performed by extending existing layouts. If the amount of customizations is large, you can use the overriding function for the needed layout file.

<theme_dir>
  |__/<Namespace_Module>
    |__/layout
      |__/override
         |__/base
           |--<layout1>.xml
           |--<layout2>.xml

You can find a detailed tutorial at Magento Official site at below link

Extend Layout Source

Override Layout Source

Best Answer

Related Solutions

Magento2 – Difference Between referenceContainer and referenceBlock

Magento2 Layout Overrides – Difference Between Extend a Layout and Override Layout

Related Topic