In magento 2 How to customize a sidebar additional in product details page?

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

Domanda

In custom theme how to customize a sidebar by our requirement in product detail page.

please refer the screen shot enter image description here

È stato utile?

Soluzione

Use this code in your /app/design/frontend/[Vendor]/[Themename]/Magento_Catalog/layout/catalog_product_view.xml to add additional sidebar in your product details page

<referenceContainer name="sidebar.additional">
    <block class="Magento\Catalog\Block\Product\View" name="product_view_custom_block" before="-" template="Magento_Catalog::product/view/custom_block.phtml"/>
</referenceContainer>

And customized it using following way

<move element="catalog.product.related" destination="sidebar.additional" after="product_view_custom_block"/>
<referenceBlock name="catalog.compare.sidebar" remove="true" />
<referenceBlock name="wishlist_sidebar" remove="true" />

Altri suggerimenti

There are different solution of customising sider of product page.

First you need to create a module or check catalog catalog_product_view.xml in your module or theme frontend layout folder.

Exact location layout files:

For Module: app\code\Vendor\Module\view\frontend\layout\catalog_product_view.xml For theme: app\design\frontend\Vendor\theme\Magento_Catalog\layout\catalog_product_view.xml

Now if you want to remove existing block from sidebar:

<?xml version="1.0"?>
<page layout="2columns-right" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="catalog.compare.sidebar" remove="true" />
        <referenceBlock name="wishlist_sidebar" remove="true" />
    </body>
</page>

Now if you want remove block and add new phtml file for customization it will look like this.

<?xml version="1.0"?>
<page layout="2columns-right" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="catalog.compare.sidebar" remove="true" />
        <referenceBlock name="wishlist_sidebar" remove="true" />
        <referenceContainer name="sidebar.additional">
            <block class="Magento\Framework\View\Element\Template" name="product_view_custom_block" before="-" template="Magento_Catalog::product/view/custom_block.phtml"/>
        </referenceContainer>
    </body>
</page>

You are also able to add static block to so that you are able to manage this block from admin for this you xml look like this.

<?xml version="1.0"?>
<page layout="2columns-right" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="catalog.compare.sidebar" remove="true" />
        <referenceBlock name="wishlist_sidebar" remove="true" />
        <referenceContainer name="sidebar.additional">
            <block class="Magento\Cms\Block\Block" name="custom_block">
                <arguments>
                    <argument name="block_id" xsi:type="string">custom_block</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

Note: custom_block is block identifier (Admin->Content->Block) you need to create new block with this identifier.

if file exist then open below file otherwise create

/app/design/frontend/{Vendor}/{Themename}/Magento_Catalog/layout/catalog_product_view.xml

and just add 

<referenceBlock name="catalog.compare.sidebar" remove="true" />
<referenceBlock name="wishlist_sidebar" remove="true" />
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a magento.stackexchange
scroll top