Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Product Recommendation
Official extension
Version: 1.8.0
Latest version: 1.8.0

Warning

This app is deprecated, please do not use it. If you have any questions, please contact our Support.

{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGPg4+Mz1Nfjl5T7f2c+AAzxA3lptuDWAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square","width":110,"height":20,"type":"svg"}}

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.

{"base64":"  ","img":{"width":1490,"height":681,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":228812,"url":"https://user-images.githubusercontent.com/52087100/96002543-9c07fe80-0e0f-11eb-94c3-cac778eaf21c.png"}}

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:

  1. 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.
  2. Using your terminal, install the biggy.pixel app by running the following command:

_10
vtex install biggy.pixel

  1. Access your VTEX account by the Admin.
  2. Using the Admin's sidebar, access the Apps section and select the Biggy Pixel app.
  3. Click on Settings.
  4. In the apiKey field, enter the App Key provided by the VTEX team.
  5. Save your changes.

Configuration

  1. Using your terminal, install the recommendation-resolver app on your account. This app will solve the recommendation queries of your store shelves.

_10
vtex install vtex.recommendation-resolver

  1. Add the recommendation-shelf app to your theme's dependencies on the manifest.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 nameDescription
recommendation-shelfDisplays a list of recommended products on any store page.
recommendation-buy-togetherDisplays a list of recommended products to buy together on the product details page.
recommendation-refreshDisplays 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

  1. 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 the store.home or store.product. You can also add the recommendation-buy-together and recommendation-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 nameTypeDescriptionDefault value
strategyenumStrategy used to fetch and display the recommended products. Check all possible values in the table below.BEST_SELLERS
secondaryStrategyenumSecondary 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
recommendationobjectSettings for the recommendation shelf component. Here you can define the total and the minimum number of recommendations that should be fetchedCheck the recommendation props


strategy and secondaryStrategy props


StrategyDescription
BEST_SELLERSFetches and displays the best seller products.
MOST_POPULARFetches and displays the most popular products.
PRICE_REDUCTIONFetches and displays products with reduced prices.
NEW_RELEASESFetches and displays the latest released products.
NAVIGATION_HISTORYFetches and displays products based on the user's navigation history.
SIMILAR_PRODUCTSFetches 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_CHOICEFetches 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_TOGETHERFetches 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_HISTORYFetches and displays the most relevant products based on a specific customer history.
CART_HISTORYFetches and displays products based on the user's cart history.
ORDER_HISTORYFetches 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 typeDescriptionAvailable to the strategy and secondaryStrategy
HOMERecommendations 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
PLPRecommendations 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
PDPRecommendations 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
CARTRecommendations 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
OTHERSRecommendations 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 nameTypeDescriptionDefault value
countobjectDefines the total and the minimum number of recommendations that should be fetched.{"minimum": 5, "recommendations": 20}


count object


Prop nameTypeDescriptionDefault value
minimumnumberDefines the minimum recommendations that should be fetched.5
recommendationsnumberDefines 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 is BOUGHT_TOGETHER.

Prop nameTypeDescriptionDefault value
recommendationobjectSettings for the recommendation shelf.undefined


recommendation object


Prop nameTypeDescriptionDefault value
countobjectDefines the total and the minimum number of recommendations that should be fetched.{minimum: 5, recommendations: 20}


count object


Prop nameTypeDescriptionDefault value
minimumnumberDefines the minimum recommendations that should be fetched.5
recommendationsnumberDefines 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 nameTypeDescriptionDefault value
strategyenumStrategy used to fetch and display the recommended products. Possible values can be found in the table below.RECOMMENDATION_HISTORY
secondaryStrategyenumSecondary 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
recommendationobjectSettings for the recommendation shelf.undefined

strategy and secondaryStrategy props for recommendation-refresh


StrategyDescription
RECOMMENDATION_HISTORYFetches and displays products based on the user's navigation history.
CART_HISTORYFetches and displays products based on the user's cart history.
ORDER_HISTORYFetches and displays products based on the user's order history.


recommendation object


Prop nameTypeDescriptionDefault value
countobjectDefines the total and the minimum number of recommendations that should be fetched.{minimum: 5, recommendations: 20}


count object:


Prop nameTypeDescriptionDefault value
minimumnumberDefines the minimum recommendations that should be fetched.5
recommendationsnumberDefines the total number of recommendations that should be fetched.20


Advanced configuration

You can customize the blocks recommendation-shelf, recommendation-refresh, and recommendation-buy-togetherby 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.

See also
VTEX App Store
VTEX IO Apps