Changing the layout of the product category page by editing an XML file

magento.stackexchange https://magento.stackexchange.com/questions/335009

Question

I am working on a Magento 2.1.7 shop. To achieve this, I have created a child-theme of Magento Blank.

On my homepage, I have enabled, from Content -> Pages -> Design, the 2 columns with right bar layout.

The 2columns-left.xml file (app/design/frontend/Company_Name/Theme_Name/Magento_Theme/page_layout/2columns-left.xml):

<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" htmlClass="row">
        <container name="div.sidebar.main" htmlTag="div" htmlClass="hidden-xs col-sm-3" before="main">
            <container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/>
            <container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional2">
                <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
            </container>
        </container>
        <referenceContainer name="main" htmlClass="col-xs-12 col-sm-9">
        </referenceContainer>
    </referenceContainer>
</layout>

The homepage source code, visible in the browser is:

<div class="hidden-xs col-sm-3">
 <nav class="navigation navbar navbar-default" data-action="navigation">
  <!-- Categories navigation here -->
 </nav> 
</div>
<div class="col-xs-12 col-sm-9">
 <!-- Content here -->
<div>

In order to the same layout for the Product category pages, I went to Products -> Categories -> Design and changed the layout to columns with right bar also. I then saved and cleared the cache.

Still, the left sidebar is missing from the categories page. The source code does not contain: 

<div class="hidden-xs col-sm-3">
   <nav class="navigation navbar navbar-default" data-action="navigation">
    <!-- Categories navigation here -->
   </nav> 
</div>

Where am I wrong? As an alternative to using the admin to make this change, what layout (.xml) file shall I edit my theme (app/design/frontend/Company_Name/Theme_Name/pathToFile)?

The catalog_category_view.xml file in my theme has this code:

<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.top">
            <referenceContainer name="category.view.container" htmlTag="div" htmlClass="category-view" remove="true">
                <block class="Magento\Catalog\Block\Category\View" name="category.image" template="Magento_Catalog::category/image.phtml"/>
                <block class="Magento\Catalog\Block\Category\View" name="category.description" template="Magento_Catalog::category/description.phtml"/>
                <block class="Magento\Catalog\Block\Category\View" name="category.cms" template="Magento_Catalog::category/cms.phtml"/>
            </referenceContainer>
        </referenceContainer>

        <referenceBlock name="page.main.title">
            <arguments>
                <argument name="id" xsi:type="string">page-title-heading</argument>
                <argument name="add_base_attribute_aria" xsi:type="string">page-title-heading toolbar-amount</argument>
            </arguments>
            <block class="Magento\Catalog\Block\Category\Rss\Link" name="rss.link" template="Magento_Catalog::category/rss.phtml"/>
        </referenceBlock>
    </body>
</page>

Copying the code from the homepage template to the category template does not work.

What shall I change to the code above to make it display the sidebar?

Was it helpful?

Solution

You want to display the left bar on category pages, but you are selecting 2 columns with right bar layout in Admin -> Categories -> Update Layout XML. You have to select 2 columns with left bar.

Although, if you want to show all category pages as 2 columns with left sidebar, it's better to do this with catalog_category_view.xml.

This is default for Magento 2, unless your theme overrides it in a custom catalog_category_view.xml.

So your left sidebar should show, but the html should be like this:

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

If you want to change the html classes of these containers, do this in catalog_category_view.xml:

<referenceContainer name="columns" htmlClass="row" />
<referenceContainer name="div.sidebar.main" htmlClass="hidden-xs col-sm-3" />
<referenceContainer name="main" htmlClass="col-xs-12 col-sm-9" />

EDIT

If you want to show the category navigation in the sidebar on all category pages, insert this into catalog_catalog_view.xml:

<move element="catalog.topnav" destination="sidebar.main"/>

OTHER TIPS

The xml file you want to override is /vendor/magento/module-catalog/view/frontend/layout/catalog_category_view.xml. So it should go in app/design/frontend/Vendor/Theme/Magento_Catalog/layout/catalog_category_view.xml.

Example override

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 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">

</page>

use catalog_category_view.xml under your extension or theme to customize view as per need.

add in catalog_category_view.xml :

< move element="div.sidebar.main" destination="columns" before="-"/> < referenceContainer name="sidebar.main">< /referenceContainer>

    <referenceContainer name="content">
         <block class="Magento\Catalog\Block\Category\View" name="category_banner" template="category/banner.phtml" ifconfig="porto_settings/category/category_description" before="-"/>
    </referenceContainer>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top