>Reference a Container in Magento 2: Examples Included

Reference a Container in Magento 2: Examples Included

1 min read

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>
Add a container into the footer container
  • 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"/>
< Previous Post
Next Post >