Warning
This app is deprecated, please do not use it. If you have any questions, please contact our Support.
The Product Recommendation app shows a selection of products using recommendation strategies. For example, you can use the Product Recommendation to suggest often bought-together products to the one that the user is looking for.
Prerequisites
The Product Recommendation app does not fetch user data for itself. However, most recommendation strategies require user navigation data to provide relevant suggestions to users. Hence, before proceeding any further, make sure you have an app capable of tracking user navigation installed on your VTEX account.
Make sure you have the Biggy pixel app installed on your VTEX account or install it by the following steps:
- Open a Support ticket about your interest in installing the Recommendations Shelf and Biggy Pixel apps. You should expect an App Key as a response. Save it for the 6th step of this tutorial.
- Using your terminal, install the
biggy.pixel
app by running the following command:
_10vtex install biggy.pixel
- Access your VTEX account by the Admin.
- Using the Admin's sidebar, access the Apps section and select the Biggy Pixel app.
- Click on Settings.
- In the
apiKey
field, enter the App Key provided by the VTEX team. - Save your changes.
Configuration
- Using your terminal, install the
recommendation-resolver
app on your account. This app will solve the recommendation queries of your store shelves.
_10vtex install vtex.recommendation-resolver
-
Add the
recommendation-shelf
app to your theme's dependencies on themanifest.json
:
_10 "dependencies": {_10+ "vtex.recommendation-shelf": "1.x"_10 }
Now, you can use all blocks exported by the recommendation-shelf
app. Check out the complete list below:
Block name | Description |
---|---|
recommendation-shelf | Displays a list of recommended products on any store page. |
recommendation-buy-together | Displays a list of recommended products to buy together on the product details page. |
recommendation-refresh | Displays a list of recommended products based on the user history on your store pages. |
recommendation-shelf
An error occurred while trying to load the image. https://raw.githubusercontent.com/vtex-apps/recommendation-shelf/master/docs/image%20(31).png
recommendation-buy-together
An error occurred while trying to load the image. https://raw.githubusercontent.com/vtex-apps/recommendation-shelf/master/docs/image%20(32).png
recommendation-refresh
An error occurred while trying to load the image. https://raw.githubusercontent.com/vtex-apps/recommendation-shelf/master/docs/Screenshot_3.png
- Add the
recommendation-shelf
app to your store template. See the example below to know how to add it to a template:
_10 "store.home": {_10 "blocks": [_10 "flex-layout.row#recommendation-shelf",_10 ]_10 },_10 "flex-layout.row#recommendation-shelf": {_10 "children": ["recommendation-shelf"]_10 }
You can add the
recommendation-shelf
in any store template desired, such as thestore.home
orstore.product
. You can also add therecommendation-buy-together
andrecommendation-refresh
blocks if desired. For example:
_10 "store.product": {_10 "blocks": [_10 "flex-layout.row#buy-together",_10 ]_10 },_10 "flex-layout.row#buy-together": {_10 "children": ["recommendation-buy-together"]_10 }
_10 "store.home": {_10 "blocks": [_10 "flex-layout.row#recommendation-refresh",_10 ]_10 },_10 "flex-layout.row#recommendation-refresh": {_10 "children": ["recommendation-refresh"]_10 }
Setting up the recommendation-shelf
To configure the recommendation-shelf
you will need to add props to it. Check the following tables to know what props that the app includes and how to configure them.
recommendation-shelf
props
Prop name | Type | Description | Default value |
---|---|---|---|
strategy | enum | Strategy used to fetch and display the recommended products. Check all possible values in the table below. | BEST_SELLERS |
secondaryStrategy | enum | Secondary strategy used to fetch and display the recommended products if the initial strategy does not return results. This prop is optional. Check all possible values in the table below. | BEST_SELLERS |
recommendation | object | Settings for the recommendation shelf component. Here you can define the total and the minimum number of recommendations that should be fetched | Check the recommendation props |
strategy
and secondaryStrategy
props
Strategy | Description |
---|---|
BEST_SELLERS | Fetches and displays the best seller products. |
MOST_POPULAR | Fetches and displays the most popular products. |
PRICE_REDUCTION | Fetches and displays products with reduced prices. |
NEW_RELEASES | Fetches and displays the latest released products. |
NAVIGATION_HISTORY | Fetches and displays products based on the user's navigation history. |
SIMILAR_PRODUCTS | Fetches and displays recommendations based on the similarity of products on the currently displayed product. This prop only works in the theme template store.product and store.search . |
BEST_CHOICE | Fetches and displays the most visited and ordered products based on the similarity of products on the currently displayed product page. This prop only works in the theme template store.product and store.search . |
BOUGHT_TOGETHER | Fetches and displays recommendations for products often bought together based on the similarity of products on the currently displayed product page. This prop only works in the theme template store.product and store.search . |
RECOMMENDATION_HISTORY | Fetches and displays the most relevant products based on a specific customer history. |
CART_HISTORY | Fetches and displays products based on the user's cart history. |
ORDER_HISTORY | Fetches and displays products based on the user's order history. |
See the example below to know how to add it to your template:
_15{_15 "store.home": {_15 "blocks": ["flex-layout.row#recommendation-shelf"]_15 },_15 "flex-layout.row#recommendation-shelf": {_15 "children": ["recommendation-shelf"]_15 },_15 "recommendation-shelf": {_15 "props": {_15 "strategy": "MOST_POPULAR",_15 "secondaryStrategy": "NEW_RELEASES",_15 "recommendation": {}_15 }_15 }_15}
For each strategy
and secondaryStrategy
, you can apply props to specific pages. The possible page types are in the table below:
Page type | Description | Available to the strategy and secondaryStrategy |
---|---|---|
HOME | Recommendations are displayed on the Home page. This context selects the recommended products based on the last categories viewed by the user. If there is no past data from the user, it returns the store data. | BEST_SELLERS , MOST_POPULAR , PRICE_REDUCTION , NEW_RELEASES , NAVIGATION_HISTORY , RECOMMENDATION_HISTORY , ORDER_HISTORY |
PLP | Recommendations are displayed on the Product List Page. This context uses the category of the first products on the list to select the recommended products. | BEST_SELLERS , MOST_POPULAR , PRICE_REDUCTION , NEW_RELEASES , NAVIGATION_HISTORY , RECOMMENDATION_HISTORY , ORDER_HISTORY , SIMILAR_PRODUCTS , BEST_CHOICE , RECOMMENDATION_HISTORY |
PDP | Recommendations are displayed on the Product Description Page. This context uses the product information as a param to select the recommended products. | BEST_SELLERS , MOST_POPULAR , PRICE_REDUCTION , NEW_RELEASES , NAVIGATION_HISTORY , RECOMMENDATION_HISTORY , ORDER_HISTORY , SIMILAR_PRODUCTS , BEST_CHOICE , BOUGHT_TOGETHER , RECOMMENDATION_HISTORY |
CART | Recommendations are displayed on the Cart page. This context uses the product category in the cart as a param to select the recommended products. | CART_HISTORY , SIMILAR_PRODUCTS |
OTHERS | Recommendations are displayed on the other store pages, such as My Account. This context will return the store data or user’s navigation history. | BEST_SELLERS , MOST_POPULAR , PRICE_REDUCTION , NEW_RELEASES , NAVIGATION_HISTORY , RECOMMENDATION_HISTORY , ORDER_HISTORY |
recommendation
props
Prop name | Type | Description | Default value |
---|---|---|---|
count | object | Defines the total and the minimum number of recommendations that should be fetched. | {"minimum": 5, "recommendations": 20} |
count
object
Prop name | Type | Description | Default value |
---|---|---|---|
minimum | number | Defines the minimum recommendations that should be fetched. | 5 |
recommendations | number | Defines the total number of recommendations that should be fetched. | 20 |
See the example below to know how to add it to your template:
_20{_20 "store.home": {_20 "blocks": ["flex-layout.row#recommendation-shelf"]_20 },_20 "flex-layout.row#recommendation-shelf": {_20 "children": ["recommendation-shelf"]_20 },_20 "recommendation-shelf": {_20 "props": {_20 "strategy": "MOST_POPULAR",_20 "secondaryStrategy": "NEW_RELEASES",_20 "recommendation": {_20 "count": {_20 "minimum": 5,_20 "recommendations": 20_20 }_20 }_20 }_20 }_20}
Setting up the recommendation-buy-together
To configure the recommendation-buy-together
you will need to add props to it. Check the following tables to know what props that the app allows and how to configure them.
recommendation-buy-together
props
The only possible value for
strategy
isBOUGHT_TOGETHER
.
Prop name | Type | Description | Default value |
---|---|---|---|
recommendation | object | Settings for the recommendation shelf. | undefined |
recommendation
object
Prop name | Type | Description | Default value |
---|---|---|---|
count | object | Defines the total and the minimum number of recommendations that should be fetched. | {minimum: 5, recommendations: 20} |
count
object
Prop name | Type | Description | Default value |
---|---|---|---|
minimum | number | Defines the minimum recommendations that should be fetched. | 5 |
recommendations | number | Defines the total number of recommendations that should be fetched. | 20 |
Setting up the recommendation-refresh
To configure the recommendation-refresh
you will need to add props to it. Check the following tables to know what props that the app allows and how to configure them.
recommendation-refresh
props
Prop name | Type | Description | Default value |
---|---|---|---|
strategy | enum | Strategy used to fetch and display the recommended products. Possible values can be found in the table below. | RECOMMENDATION_HISTORY |
secondaryStrategy | enum | Secondary strategy used to fetch and display the recommended products if the initial strategy does not return results. Possible values can be found in the table below. | RECOMMENDATION_HISTORY |
recommendation | object | Settings for the recommendation shelf. | undefined |
strategy
and secondaryStrategy
props for recommendation-refresh
Strategy | Description |
---|---|
RECOMMENDATION_HISTORY | Fetches and displays products based on the user's navigation history. |
CART_HISTORY | Fetches and displays products based on the user's cart history. |
ORDER_HISTORY | Fetches and displays products based on the user's order history. |
recommendation
object
Prop name | Type | Description | Default value |
---|---|---|---|
count | object | Defines the total and the minimum number of recommendations that should be fetched. | {minimum: 5, recommendations: 20} |
count
object:
Prop name | Type | Description | Default value |
---|---|---|---|
minimum | number | Defines the minimum recommendations that should be fetched. | 5 |
recommendations | number | Defines the total number of recommendations that should be fetched. | 20 |
Advanced configuration
You can customize the blocks recommendation-shelf
, recommendation-refresh
, and recommendation-buy-together
by adding the shelf-components
app to your theme's dependencies on the manifest.json
file:
_10 "dependencies": {_10+ "vtex.shelf-components": "0.x"_10 }
Now it is possible to customize these blocks, building their components by using its children blocks default-shelf
, refresh-shelf
, and buy-together
, respectively.
Below, you can find an implementation example for each one of them. If needed, use these blocks in your store theme code and make the desired changes according to your needs:
_43 "store.home": {_43 "blocks": [_43 "flex-layout.row#recommendation-shelf",_43 ]_43 },_43 "flex-layout.row#recommendation-shelf": {_43 "children": ["recommendation-shelf"]_43 },_43 "recommendation-shelf": {_43 "blocks": ["default-shelf"]_43 },_43 "default-shelf": {_43 "blocks": ["list-context.product-list", "list-context.product-list-static"]_43 },_43 "list-context.product-list": {_43 "blocks": ["product-summary.shelf#demo1"],_43 "children": ["slider-layout#demo-products"]_43 },_43 "list-context.product-list-static": {_43 "blocks": ["product-summary.shelf#demo1"],_43 "children": ["slider-layout#demo-products"]_43 },_43 "product-summary.shelf#demo1": {_43 "children": [_43 "stack-layout#prodsum",_43 "product-summary-name",_43 "product-rating-inline",_43 "product-summary-space",_43 "product-summary-price",_43 "product-summary-buy-button"_43 ]_43 },_43 "slider-layout#demo-products": {_43 "props": {_43 "itemsPerPage": {_43 "desktop": 5,_43 "tablet": 3,_43 "phone": 1_43 },_43 "infinite": true,_43 "fullWidth": false_43 }_43 }
_24 "store.home": {_24 "blocks": [_24 "flex-layout.row#recommendation-refresh",_24 ]_24 },_24 "flex-layout.row#recommendation-refresh": {_24 "children": ["recommendation-refresh"]_24 },_24 "recommendation-refresh": {_24 "blocks": ["refresh-shelf"]_24 },_24 "refresh-shelf": {_24 "blocks": ["product-summary.shelf"]_24 },_24 "product-summary.shelf": {_24 "children": [_24 "stack-layout#prodsum",_24 "product-summary-name",_24 "product-rating-inline",_24 "product-summary-space",_24 "product-summary-price",_24 "add-to-cart-button"_24 ]_24 }
_67 "store.product": {_67 "blocks": [_67 "flex-layout.row#buy-together",_67 ]_67 },_67 "flex-layout.row#buy-together": {_67 "children": ["recommendation-buy-together"]_67 },_67 "recommendation-buy-together": {_67 "blocks": ["buy-together"]_67 },_67 "buy-together": {_67 "blocks": ["product-summary.shelf#buy-together"],_67 "props": {_67 "BuyButton": "add-to-cart-button"_67 }_67 },_67 "product-summary.shelf#buy-together": {_67 "children": [_67 "responsive-layout.desktop#product-summary",_67 "responsive-layout.tablet#product-summary",_67 "responsive-layout.phone#product-summary"_67 ]_67 },_67 "responsive-layout.desktop#product-summary": {_67 "children": ["flex-layout.row#product-summary-desktop"]_67 },_67 "responsive-layout.tablet#product-summary": {_67 "children": ["flex-layout.row#product-summary-mobile"]_67 },_67 "responsive-layout.phone#product-summary": {_67 "children": ["flex-layout.row#product-summary-mobile"]_67 },_67 "flex-layout.row#product-summary-desktop": {_67 "children": ["flex-layout.col#product-summary-desktop"]_67 },_67 "flex-layout.col#product-summary-desktop": {_67 "children": [_67 "product-summary-image#shelf",_67 "product-summary-name",_67 "product-summary-space",_67 "product-list-price#summary",_67 "product-installments#summary",_67 "product-summary-sku-selector"_67 ]_67 },_67 "flex-layout.row#product-summary-mobile": {_67 "children": [_67 "flex-layout.col#product-image",_67 "flex-layout.col#product-summary-details"_67 ]_67 },_67 "flex-layout.col#product-image": {_67 "children": ["product-summary-image#shelf"]_67 },_67 "flex-layout.col#product-summary-details": {_67 "props": {_67 "marginLeft": 4_67 },_67 "children": [_67 "product-summary-name",_67 "product-summary-space",_67 "product-list-price#summary",_67 "product-installments#summary",_67 "product-summary-sku-selector"_67 ]_67 }
Customization
No CSS Handles are available yet for the app customization.