PART 1.2.4 – Layout

  • Extending Layouts vs. Overriding Layouts
    • Extending layouts
    • Overriding layouts
  • Layout file processing
  • Page Layouts Declaration
  • Customisation
    • Managing Containers
    • Managing Blocks

Extending Layouts vs. Overriding Layouts

Extending layouts

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.

To add an extending page configuration or generic layout file, put the layout file in the following location:

To add an extending page layout file, put the file in the following location:

Create an extending layout file that contains the changes you want, instead of creating and modifying many files.

For example, to customize the layout defined in /app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml, add a layout file with the same name in your custom theme, such as: app/design/frontend/<Vendor>/<theme>/Magento_Catalog/layout/catalog_product_view.xml

Overriding layouts

If the amount of customization is large, you can use the overriding function for the needed layout file. This means that the new file that you place in the theme will be used instead of the parent theme layout file of the base layout file.

To add an overriding base layout file (to override a base layout provided by the module), put the layout file in the following location:

To add an overriding theme file (to override a parent theme layout), put the layout file in the following location:

 

Examples of customizations that involve overriding layouts:

  • Suppressing method invocation. Overriding is not necessary if a block has a method that cancels the effect of the originally invoked method. In this case, you can customize the layout by adding a layout file where the canceling method is invoked.
  • Modifying method arguments.
  • Canceling block/container removal using the remove directive.
  • Setting XML attributes of blocks and containers. Certain attributes, such as htmlClass and htmlId label attributes, can be changed in extending layouts.
  • Removing block arguments.
  • Modifying and suppressing handles inclusion.
  • Removing all handle instructions by declaring an overriding layout file with an empty handle.

Layout file processing

The Magento application processes layout files in the following order:

  1. Collects all layout files from modules. The order is determined by the modules order in the module list from app/etc/config.php.
  2. Determines the sequence of inherited themes [<parent_theme>, …, <parent1_theme>] <current_theme>
  3. Iterates the sequence of themes from the last ancestor to the current theme:
    1. Adds all extending theme layout files to the list.
    2. Replaces overridden layout files in the list.
    3. Merges all layout files from the list.

 

Module

Parent Theme

Theme

Result

1.xml

1.xml

1.xml

MODULE + PARENT + THEME

2.xml

override/base/2.xml

2.xml

MODULE → PARENT + THEME

3.xml

3.xml

override/parent/3.xml

MODULE + PARENT → THEME

Page Layouts Declaration

Module layout declarations: app/code/<Vendor>/<Module>/view/frontend/layouts.xml

Theme layout declaration: app/design/frontend/<Vendor>/<theme>/<Vendor_Module>/layouts.xml

layouts.xml

<page_layouts xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/PageLayout/etc/layouts.xsd”>

    <layout id=”1column”>

        <label translate=”true”>1 column</label>

    </layout>

    <layout id=”2columns-left”>

        <label translate=”true”>2 columns with left bar</label>

    </layout>

    <layout id=”2columns-right”>

        <label translate=”true”>2 columns with right bar</label>

    </layout>

    <layout id=”3columns”>

        <label translate=”true”>3 columns</label>

    </layout>

</page_layouts>

1column.xml

<layout xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:View/Layout/etc/page_layout.xsd”>

    <update handle=”empty”/>

    <referenceContainer name=”page.wrapper”>

        <container name=”header.container” as=”header_container” label=”Page Header Container” htmlTag=”header” htmlClass=”page-header” before=”main.content”/>

        <container name=”page.top” as=”page_top” label=”After Page Header” after=”header.container”/>

        <container name=”footer-container” as=”footer” before=”before.body.end” label=”Page Footer Container” htmlTag=”footer” htmlClass=”page-footer”/>

    </referenceContainer>

</layout>

 

Customisation

Managing Containers

To create a container, use the <container> instruction:

<container>

<container name=”some.container” as=”someContainer” label=”Some Container” htmlTag=”div” htmlClass=”some-container” />

To update a container, use the <referenceContainer> instruction:

<referenceContainer>

<referenceContainer name=”some.container”>

    

</referenceContainer>

To remove a container, use the remove=“true|false” attribute

remove=“true|false”

<referenceContainer name=“container.name” remove=“true” />

remove

 In the current mainline the <remove> instruction is replaced by the “ remove”  attribute.

Managing Blocks

To create (declare) a block, use the <block> instruction:

<block>

<block class=“Magento\Module\Block\Class” name=“block.name” template=“template.phtml” after=“-”>

    <arguments>

        

    </arguments>

</block>

To update a block, use the <referenceBlock> instruction:

<referenceBlock>

<referenceBlock name=“some.block”>

    <arguments>

        

    </arguments>

</referenceBlock>

To remove a block, use the remove=“true|false” attribute:

remove=“true|false”

<referenceBlock name=“block.name” remove=”true” />

remove

 In the current mainline the <remove> instruction is replaced by the “ remove”  attribute.

To set up a template used by a block:

<referenceBlock>

<referenceBlock name=“block.name” template=“template.phtml”/>

To modify block arguments:

<referenceBlock>

<referenceBlock name=”block.example”>

    <arguments>

        <!– Modified block argument ->

        <argument name=”label” xsi:type=”string”>New Block Label</argument>

        <!- Newly added block argument ->

        <argument name=”custom_label” xsi:type=”string”>Custom Block Label</argument>

    </arguments>

</referenceBlock>

In layout files you can change the order of elements on a page:

• <move> instruction: Allows changing the order and parent for page elements.

• before and after attributes of <block>: Allows changing elements’ order within one parent.

<move>

<move element=“block1.name” destination=“container1.name” after=“-”/>

<move element=“block2.name” destination=“container1.name” before=“block1.name”/>

action method

Action methods are not used anymore (sometimes they work, but support may be dropped so be careful).

Exercise 7.0

7.1. Choose any element and move it to different place.

7.2. Choose another element and remove it from the site.

7.3. Change title of one of the tabs on product page.

Like

Be the first to like this

  • No labels
  • Edit Labels

1 COMMENT


    • Mark Simonovskiy


      Some addition from my side. That’s was useful for me
      There is a way to find which layout file u suppose to override.
      First you have to find a needed block which you want to modify, in example i want to play change 
  • product.info.review

  • just search whole project for that name, and find xml which defines this  as a .phtml like so

  • <block class=“Magento\Catalog\Block\Product\View” name=“product.info.review” template=“product/view/review.phtml” after=“product.info.stock.sku” />


    • in my case that the file 
  • vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml

  • this is a .xml fine that you have override in your theme