4

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?

6
+50

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"/>

  • I need the navigation - ` <nav class="navigation navbar navbar-default" data-action="navigation">` - inside the sidebar. Also, why not <div class="columns"> <div class="sidebar sidebar-main"> // sidebar content </div> <div class="column main"> // main content </div> </div>? – Razvan Zamfir Jan 7 '18 at 15:18
  • Check my edit on how to move the navigation inside the sidebar. It doesn't matter which container comes first in html, you can use CSS to show the sidebar left or right. So your example is also correct. It's just a matter of how you will style the containers. – Lez Jan 7 '18 at 15:41
0

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

  • I am using it. The code that it contains is below the line "The catalog_category_view.xml file in my theme has this code". But editing it does not have the desired effect. What shall I add to it to make it display the sidebar? – Razvan Zamfir Jan 5 '18 at 10:27
0

add in catalog_category_view.xml :

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

0

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>
  • Thanks for the help. I have edited my question. Please have a look at the current content of catalog_category_view.xml. – Razvan Zamfir Jan 3 '18 at 15:08
  • Look at my example. You need the page tag with the layout parameter. Also, it looks like you have a bunch of code that's the same as the default. You probably dont need all of that. Just need the page layout override as in my example. Let me know. – sharmstr Jan 3 '18 at 15:32
  • I do have it. I just did not mention it because I thought it was... implicit. – Razvan Zamfir Jan 3 '18 at 15:42
  • I am trying to change the layout of the category page/template as described. – Razvan Zamfir Jan 5 '18 at 14:12

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.