2

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

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.

|improve this answer|||||
  • it tried it add div beore side bar not like what i want can u please help – user1799722 Oct 2 '18 at 5:19
  • thanks it is working , one issue can i change order i means first sidebar then column main <div class="newcolumns"> <div class="sidebar sidebar-main"> ------ </div> <div class="column main"> ------ </div> </div> – user1799722 Oct 2 '18 at 5:31
  • If it's working fine for you then accept the answer so that it will help others in future. – Sukumar Gorai Oct 2 '18 at 5:46
  • Yes ofcourse you can change the order. – Sukumar Gorai Oct 2 '18 at 5:47
  • Hi it works when i create "2columns-left.xml" i tried creating new layout and assigning my catlog category that layout in that case sidebar thing is blank and is rendered inside column main how to fix that – user1799722 Oct 2 '18 at 6:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.