Customize
When you install the Product Recommendations module, Adobe Commerce creates the ProductRecommendationsLayout
directory. This directory contains template files that you can customize to change how the recommendations appear on your storefront. Specifically, you can modify or override the following template:
<your theme>/Magento_ProductRecommendationsLayout/web/template/recommendations.html
For more information about modifying template files, refer to Template customization in the Frontend Developer Guide.
If you modify the recommendations.html
file, you must preserve the following tags in the file to ensure that Adobe Commerce can collect recommendation metrics from your storefront:
<div data-bind="attr : {'data-unit-id' : unitId }"...</div>
<a data-bind="attr : {'data-sku' : sku, 'data-unit-id'}"...</a>
Note: If you add any anchor tags, you must include these attributes.
In addition to the recommendations.html
file, the ProductRecommendationsLayout
directory contains the following subdirectories:
layout
*.xml
files for each page typetemplates
web/js
web/template
magento/product-recommendations
moduleRecommendation unit positioning
When you create a recommendation, you specify the location where it appears on the page. A recommendation unit can be placed at either the top or the bottom of the main content container. However, you can customize this placement. If you create a Page Builder recommendation content type, use the Page Builder tools to position the recommendation unit on the page. For all other page types, edit the *.xml
files that are generated when the recommendation is created.
-
Change to the
layout
directory:code language-bash cd `<your theme>/Magento_ProductRecommendationsLayout/layout`
The following table lists the XML files present in this directory:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 Filename Page catalog_category_view.xml
Category catalog_product_view.xml
Product detail checkout_cart_index.xml
Cart checkout_onepage_success.xml
Checkout cms_index_index.xml
Home note note NOTE The filenames in the layout
directory might be different if your store uses third-party extensions. -
Modify the
catalog_product_view.xml
file so that the recommendation unit appears after the product image on the product detail page. Before you customize this XML file, take a look at the file and understand the sections you will need to modify:code language-xml <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <referenceBlock name="page.wrapper"> <block class="Magento\Framework\View\Element\Template" before="-" name="product_recommendations_fetcher" template="Magento_ProductRecommendationsStorefront::fetcher.phtml" /> </referenceBlock> <body> <referenceBlock name="main.content"> <block class="Magento\ProductRecommendationsStorefront\Block\Renderer" after="-" name="product_recommendations_product_below_content" template="Magento_ProductRecommendationsStorefront::renderer.phtml"> <arguments> <argument name="pagePlacement" xsi:type="string">below-main-content</argument> </arguments> </block> </referenceBlock> </body> </page>
In the above snippet, the
main.content
reference block indicates the recommendation unit will be placed somewhere relative to that element. Itsblock
element contains theafter="-"
attribute, which specifies that the recommendation unit will be displayed on the page after the main content block. -
Let’s modify this file by specifying a different content block.
Change the reference block
name
frommain.content
toproduct.info.media
.code language-xml <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <referenceBlock name="page.wrapper"> <block class="Magento\Framework\View\Element\Template" before="-" name="product_recommendations_fetcher" template="Magento_ProductRecommendationsStorefront::fetcher.phtml" /> </referenceBlock> <body> <referenceBlock name="product.info.media"> <block class="Magento\ProductRecommendationsStorefront\Block\Renderer" after="-" name="product_recommendations_product_below_content" template="Magento_ProductRecommendationsStorefront::renderer.phtml"> <arguments> <argument name="pagePlacement" xsi:type="string">below-main-content</argument> </arguments> </block> </referenceBlock> </body> </page>
This change results in your recommendation unit appearing after the product image on the product detail page. If you want the recommendation unit to appear before the
product.info.media
, change theafter="-"
attribute tobefore="-"
. ThepagePlacement
argument is an internal argument that should not be modified.
Refer to layout overview for more information about the types of blocks on the page.
Custom Product attributes
Developers often need access to custom product attribute values in recommendations units on storefronts so that they can add visual treatments to products based on those attributes.
For example, if your store sells some organic products, you might have a custom attribute on those products designating them as Organic = Yes
. You may need access to this attribute value on the storefront so that you can give these products special visual treatment when they appear in Recommendations. Similarly, access to these custom product attribute values allows you to badge products or drive custom logic in the presentation layer of your site.
To make sure a custom product attribute is available when you render the recommendation unit on the page, set the Used in Product Listing
property to Yes
in the Product Attributes page in the Admin.
When this property is set, the JSON payload includes an attributes
object that contains an array of attribute codes and values. You can then apply custom storefront styling based on these attribute values, such as adding special visual treatments or badges as mentioned previously.