Magento 2.2.0 – Display Recently Viewed Products Block on Product Detail Page

blocksmagento2product

Approach One

  • Login to Admin panel
  • Click on Content -> Blocks
  • Create new product-detail block and edit then toggle show/hide
    editor which will show insert widget option
  • Click on insert widget select "Recently Viewed Products" from
    dropdown, add number of product to display (ex – 5)
  • Select template from dropdown then click on insert widget
  • Click on save Block

Although <p>{{widget type="Magento\Catalog\Block\Widget\RecentlyViewed" uiComponent="widget_recently_viewed" page_size="5" show_attributes="name,image,price" show_buttons="add_to_cart" template="product/widget/viewed/grid.phtml"}}</p> works in home-page block

Approach Two

For testing purpose added below code in vendor/magento/theme-frontend-luma/Magento_Catalog/layout/catalog_product_view

<block class="Magento\Reports\Block\Product\Widget\Viewed" after="-" name="recently_viewed" cacheable="false" template="Magento_Reports::widget/viewed/content/viewed_grid.phtml">
<action method="setPageSize">
    <argument name="page_size" xsi:type="number">5</argument>
</action>

Final code for catalog_product_view

<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="page.main.title" destination="product.info.main" before="-"/>
        <move element="product.info.stock.sku" destination="product.info.price" after="product.price.final"/>
        <move element="product.info.review" destination="product.info.main" before="product.info.price"/>

         <block class="Magento\Reports\Block\Product\Widget\Viewed" after="-" name="recently_viewed" cacheable="false" template="Magento_Reports::widget/viewed/content/viewed_grid.phtml">
            <action method="setPageSize">
                <argument name="page_size" xsi:type="number">5</argument>
            </action>
        </block>
    </body>
</page>

Did reindexing and cleared cache too but both the above approaches are not working.

  • How could I make this work and show recently viewed products block on
    product detail page ?
  • Does Magento 2 supports local.xml just like earlier mage versions ?

Best Answer

Unfortunately the accepted answer didn't work for me and I wasn't able to use widget instance layout updates in my use case

If for whatever reason you need to add a 'Recently Viewed' products block specifically via layout xml, here's my solution (tested in version 2.2.2):

I decided to use the same class Magento\Catalog\Block\Widget\RecentlyViewed which the 'Recently Viewed' Product widget uses in my block declaration.

<!-- Basic recently viewed products block -->
<block class="Magento\Catalog\Block\Widget\RecentlyViewed" name="recently_viewed" template="Magento_Catalog::product/widget/viewed/grid.phtml" after="-">
    <arguments>
        <argument name="uiComponent" xsi:type="string">widget_recently_viewed</argument>
        <argument name="page_size" xsi:type="number">4</argument>
    </arguments>
</block>

This will render a simple grid with the last 4 products view by the user.

You can configure the block further, just as you would the widget instance:

<!-- Configured recently viewed products block -->
<block class="Magento\Catalog\Block\Widget\RecentlyViewed" name="recently_viewed" template="Magento_Catalog::product/widget/viewed/grid.phtml" after="-">
    <arguments>
        <argument name="uiComponent" xsi:type="string">widget_recently_viewed</argument>
        <argument name="page_size" xsi:type="number">4</argument>
        <!-- 'Product attributes to show' configuration -->
        <argument name="show_attributes" xsi:type="string">name,image,price,learn_more</argument>
        <!-- 'Buttons to show' configuration -->
        <argument name="show_buttons" xsi:type="string">add_to_cart,add_to_compare,add_to_wishlist</argument>
    </arguments>
</block>

One thing to note is that the argument values for show_attributes and show_buttons need to be declared as comma delimited strings (no spaces).

Declaring them as arrays or including spaces next to your comma's won't work due to the way the UI Component parse the content before Knockout renders it.

And since I said Knockout... it should play nicely with FPC, should.

Finally this solution doesn't use the 'action' instruction which appears to have been deprecated

Related Topic