0

I'm using the 2columns-left as a layout for my category pages and I want to modify these divs, change their classes, without having to add javascript afterwards. I can already modify the templates that handle the content inside thoses divs, I just want to change these divs' classes.

<div class="columns> <!-- where is this generated ? -->
    <div class="column main"> <!-- where is this generated ? -->
     ...
    </div>
    <div class="sidebar sidebar-main"> <!-- where is this generated ? -->
     ...
    </div>
</div>

I can't seem to find a solution to this problem. I have looked around in the vendor module looking for some kind of meta-layout, but I'm not actually sure what I should be looking for. Can you help ?

0

These class are defined in the vendor/module-theme/view/frontend/page_layout/2columns-left.xml

<referenceContainer name="columns">
    <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>
</referenceContainer>

If you want to modify on the category pages only its better to make a new category layout.xml file and there reference this container and change its content.

For this create a file if doesn't exist in app/design/frontend/Theme_Vendor/Theme_Name/Magento_Catalog/layout/catalog_category_view.xml

Reference this columns container like this

<?xml version="1.0"?>
<page>
    <body>
        <referenceContainer name="columns">
        <---- Add your updated content here ----->
        </referenceContainer>
    </body>
</page>

And if you want to implement this using your custom module then create the same file mention above in app/code/Vendor/extension/view/frontend/layout/catalog_category_view.xml and follow the same.

  • What about the "column main" div ? Why is it not inside the layout ? Also, in the original 2columns-left file, there is handle=1column and this makes my layout act as a single column. When I remove that line, the layout crashed and returns a blank page – Badong Oct 1 at 14:28
  • As all the page layouts file extends the empty.xml, this class is defined in this xml file. you can find this xml in vendor/module-theme/view/base/page_layout/empty.xml – Muhammad Mannan Masood Oct 1 at 14:33
  • Also you can update this whole column container in your custom module by adding a catalog_category_view.xml and there reference this "columns" container like I gave you above and change the all the contents in this container. – Muhammad Mannan Masood Oct 1 at 14:36
  • Did it helped.? – Muhammad Mannan Masood Oct 2 at 7:05
  • 1
    No, sorry for not answering sooner. I did find a solution to my problem, I'll post it when I get access to my code, next week – Badong Oct 22 at 14:41

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.