3

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

please refer the screen shot enter image description here

Improve this question
0

3 Answers 3

Reset to default
4

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" />
Improve this answer
2
  • I will check and update you in few mins @aasim
    – Divya Sekar
    Jan 30, 2019 at 5:56
  • Please don't forget to clear cache after change in layout xml files
    – Aasim Goriya
    Jan 30, 2019 at 6:02
2

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.

Improve this answer
0
1

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" />
Improve this answer
1
  • its simple and works
    – Divya Sekar
    Jan 30, 2019 at 6:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.