Reference a Container in Magento 2: Examples Included

177

Today, we will take a deeper look at how to reference container in Magento 2 because it is necessary for you to change page structure when working with design.

Reference Container in Magento 2: Setup Guide and Example

Update Container in Magento 2

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>

Create Magento 2 Block Using Container

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 Class to the Existing 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"/>

Conclusion

This blog is all about how to create reference container in Magento 2. This guide covers the key steps and examples to help you implement container references correctly, allowing for greater flexibility in design. Don’t hesitate to contact BSS Commerce if you still have questions about this topic. 

>>> Let’s check our following post for mastering in Magento layout: How to Create a Custom Layout in Magento 2