In the previous article, we went through 3 common layout file types in Magento 2 and get some knowledge about Containers as well as ReferenceContainer.
Today, we will take a deeper look at how to reference a container because it is necessary for you to change page structure when working with design.
- To update a container, you can use <referenceContainer>.
For example: Add links to the page header panel.
<referenceContainer name="header.panel">
<block class="Magento\Framework\View\Element\Html\Links" name="header.links">
<arguments>
<argument name="css_class" xsi:type="string">header links</argument>
</arguments>
</block>
</referenceContainer>
- To create wrap div or block, you can use containers.
For example: Add a container into the footer container and show it on the frontend.
<referenceContainer name="footer">
<container name="some.container" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-container">
<block class="Magento\Cms\Block\Block" name="footer_top">
<arguments>
<argument name="block_id" xsi:type="string">footer_top</argument>
</arguments>
</block>
</container>
</referenceContainer>
- To add class into the existing container:
<referenceContainer name="page.wrapper" htmlClass="my-new-page-wrapper-class second-class"/>
*Note: The referenceContainer part will override the class of the referenced container.
To add id for the existing container, you can use htmlID tag as below:
<referenceContainer name="page.wrapper" htmlId="MyWrapper"/>
