Question

Below is my html struture of 2-column layout,

<div class="columns">
    <div class="column main">
        ------
    </div>
    <div class="sidebar sidebar-main">
        ------
    </div>
</div>

i want to add add child div to colum that contains all items in it , my new struture to be like

<div class="columns">
    <div class="newcolumns">
        <div class="column main">
            ------
        </div>
        <div class="sidebar sidebar-main">
            ------
        </div>
    </div>
</div>

I tried below code but it does not work

<referenceContainer name="columns">
    <container name="newcontinaer" htmlTag="div" htmlClass="newcolumns" before="-" />
</referenceContainer>

Based on one answer in stackexchange i tried below, but is is not as expected

<referenceContainer name="columns">
    <container name="columns.main" htmlTag="div" htmlClass="column main" before="-" />
</referenceContainer>
<referenceContainer name="main" htmlClass="newcolumns" />
<move element="main" destination="columns" />

how to fix it


AFter suggestion from Sukumar Gorai i created 2columns-left.xml and it works fine , but instead i want to create new layout teamplate and assign same to my category i tried as below but it does not works

my html structure after this was like

<div class="columns">
    <div class="newcolumns">
        <div class="column main">
            <div class="block filter">
            </div>
        </div>
        <div class="sidebar sidebar-main">
            Blank sidebar filter moved to column main
        </div>
    </div>
</div>

Layout.xml

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">

    <layout id="2columns-left-product">
        <label translate="true">MY Product</label>
    </layout>

</page_layouts>

2columns-left-product.xml

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="1column"/>
    <referenceContainer name="columns">
        <container name="newcontainer" htmlTag="div" htmlClass="newcolumns">
            <container name="div.sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main" after="main">
                <container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/>
            </container>
            <container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main">
                <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
            </container>
        </container>
    </referenceContainer>
    <move element="main" destination="newcontainer" before="-" />
</layout>
Était-ce utile?

La solution

Create a file named 2columns-left.xml in your theme under below path:

app/design/frontend/Vendor/theme/Magento_Theme/page_layout/2columns-left.xml

and use the below content for 2columns-left.xml:

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="1column"/>
    <referenceContainer name="columns">
        <container name="newcontainer" htmlTag="div" htmlClass="newcolumns">
            <container name="div.sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main" after="main">
                <container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/>
            </container>
            <container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main">
                <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
            </container>
        </container>
    </referenceContainer>
    <move element="main" destination="newcontainer" before="-" />
</layout>

Flush the cache and test.

Licencié sous: CC-BY-SA avec attribution
Non affilié à magento.stackexchange
scroll top