2

For the product listing page I want to give id to to "column main" class div like shown in following picture.

enter image description here

So to do so in in my custom theme catalog_category_view.xml

I've given code like following

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>

        <referenceContainer name="columns" htmlClass="columns container">
            <container name="main" label="Main Content Container" htmlTag="div" htmlClass="column main" htmlId="hello" />
        </referenceContainer>
    </body>
</page>

But that makes whole div empty without setting up id in it, Can anyone tell what mistake I'm making?? Or please explain me what process I should follow to do so ...

5

You are adding a new container that is replacing the old one.

Use "referenceContainer" instead of "container" to modify an existing container.

<referenceContainer name="main" label="Main Content Container" htmlTag="div" htmlClass="column main" htmlId="hello" />
  • It's works @WilliamOakley, Thanks very much. – Kaushal Suthar Sep 6 '16 at 9:33
  • Why did you add label="Main Content Container", htmlTag="div" and htmlId="hello" ? It also works fine with the name and the htmlClass only. – maxagaz Nov 10 '17 at 7:21
0

Preferred way is to edit in theme's default.xml file. You may create or edit the default.xml file at path app/design/frontend/Vendor/theme/Magento_Theme/layout/default.xml

If one wants to add container div under column div, should try this.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
           <referenceContainer name="columns">
                <container name="container" label="" htmlTag="div" htmlClass="container" />
            </referenceContainer>        
           <move element="main" destination="container" before="-"/>
        </body>
</page>

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.