Changing the layout of the product category page by editing an XML file
-
16-04-2021 - |
题
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?
解决方案
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"/>
其他提示
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>