Magento 2: Add child div containing all items in columns
-
29-01-2021 - |
سؤال
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>
المحلول
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.