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?
Best Answer
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:
If you want to change the html classes of these containers, do this in
catalog_category_view.xml
: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"/>