6

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?

Improve this question

5 Answers 5

Reset to default
7
+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"/>

Improve this answer
2
  • 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>? Commented Jan 7, 2018 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. Commented Jan 7, 2018 at 15:41
1

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>
Improve this answer
4
  • Thanks for the help. I have edited my question. Please have a look at the current content of catalog_category_view.xml. Commented Jan 3, 2018 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. Commented Jan 3, 2018 at 15:32
  • I do have it. I just did not mention it because I thought it was... implicit. Commented Jan 3, 2018 at 15:42
  • I am trying to change the layout of the category page/template as described. Commented Jan 5, 2018 at 14:12
0

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

Improve this answer
1
  • 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? Commented Jan 5, 2018 at 10:27
0

add in catalog_category_view.xml :

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

Improve this answer
0 
 <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>
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.