Magento – Magento2: Wrap all contents under .page-wrapper in new container

containerslayoutmagento2

Im trying to add a secondary div wrapper if you like underneath the .page-wrapper, for example:

<div class="page-wrapper">
  <div class="my-new-wrapper-div">
    <!-- ALL OTHER CONTAINERS, header, main.content etc -->
  </div>
</div>

Is there a supported way of doing this by just creating a new container? Im able to get a new container to show on the page but it doesn't wrap the rest of the contents.

Best Answer

This is how i do this for some of the projects i work on.

<!--   Move all nessecery elements   -->
<move element="header.container" destination="my.new.wrapper.div" as="header_container"/>
<move element="main.content" destination="my.new.wrapper.div" as="main_content"/>

<referenceContainer name="page.wrapper">
    <!--    ofcourse make this html file in the right directory  -->
    <block class="Magento\Framework\View\Element\Template" name="my.new.wrapper.div" before="-" template="Magento_Theme::html/my-new-wrapper-div.phtml" />
</referenceContainer>

You might need to echo these blocks inside you html files

<?php echo $block->getChildHtml('header_container'); ?>
<?php echo $block->getChildHtml('main_content'); ?>

You also need to move your footer the same way as main.content and header.container

Hope this helps!

Related Solutions

Magento – Magento 2: Creating a custom layout

The problem here is that you're misunderstanding containers and blocks.

In M2, there is a new concept of containers which are containers for blocks but not real block, they are used to define the structure of a page in the XML and then blocks are assigned to containers.

A container exists for the sole purpose of assigning content structure to a page. A container has no additional content except the content of included elements. Examples of containers include the header, left column, main column, and footer.

A block represents each feature on a page and employs templates to generate the HTML to insert into its parent structural block. Examples of blocks include a category list, a mini cart, product tags, and product listing.

Definition of a container from the official doc:

A structure without content that holds other layout elements such as blocks and containers.

Details: A container renders child elements during view output generation. It can be empty or it can contain an arbitrary set of <container> and <block> elements.

Only blocks are being rendered even if the framework generates the container based on the attributes you specified.

You can find more informations at the following links:

To implement your new layout you need to create a container instead of your div:

<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="content" label="Main Content Container" htmlTag="div" htmlClass="column 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>

Then in the layout XML related to your new page you can use the following code to add a block to your container:

<referenceContainer name="content">
    <block class="Magento\Framework\View\Element\Template" name="test" template="Package_Module::test.phtml"/>
</referenceContainer>

Finally you can write the following code in your test.phtml template:

<div id="test123"><p>This is a test</p></div>

On the other hand, if you need the div to be a container you can simply do:

<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="test" label="Main Content Container" htmlTag="div" htmlClass="column content" htmlId="test123" />

        <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>

That will give you the following container which then you can use (as explained above) to add blocks into it.

<div id="test123" class="content column"></div>

Magento2 – Fix New Container Not Showing

David's answer is correct, but his example doesn't work (for me anyway).

If you swap the text block in his example with a template block you'll see the container then displays.

My full example to get it working:

app/design/frontend/PACKAGE/THEME/Magento_Cms/layout/default.xml

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="footer">
            <container name="mike.container" as="mikeContainer" label="Mike Container" htmlTag="div" htmlClass="mike-container">
                <block class="Magento\Framework\View\Element\Template" name="testing" template="Magento_Cms::test.phtml" />
            </container>
        </referenceContainer>
    </body>
</page>

app/design/frontend/PACKAGE/THEME/Magento_Cms/templates/test.phtml

<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem suscipit, adipisci, cum quos, alias similique ad eum at deserunt eligendi enim dignissimos, unde vero ipsam voluptatibus cumque accusantium! Obcaecati, quasi.</h2>

Result

If I remove the template block, the container is no longer rendered.

Best Answer

Related Solutions

Magento – Magento 2: Creating a custom layout

Magento2 – Fix New Container Not Showing

Related Topic