How to implement the Recommend UI on my Magento front-end?

The recommend-js package lets you create a JavaScript-based recommend experience. You can learn more about this in the following documentation: https://www.algolia.com/doc/ui-libraries/recommend/api-reference/recommend-js/

To implement these libraries on your Magento store you can follow these steps:

1 - Import Recommend js libraries

- Download  recommend-js minified file https://cdn.jsdelivr.net/npm/@algolia/recommend-js

curl https://cdn.jsdelivr.net/npm/@algolia/recommend-js -o recommend-js.min.js

 
- Download recommend minified file: https://cdn.jsdelivr.net/npm/@algolia/recommend

curl https://cdn.jsdelivr.net/npm/@algolia/recommend -o recommend.min.js

2 - Include recommend.js in the Algolia search Magento module

- Include  recommend-js.min.js and recommend.min.js in our module at path  https://github.com/algolia/algoliasearch-magento-2/tree/develop/view/frontend/web/internals

 
- Update both files in requirejs-config.js https://github.com/algolia/algoliasearch-magento-2/blob/develop/view/frontend/requirejs-config.js

3 - Implement Recommend listing on your PDP page

• Add Layout in catalog_product_view.xml layout
• Render Recommend item phtml on PDP page
• Create an HTML template for a recommended item listing

Finally, We also recommend that you follow Magento best practices and extend our extension in your code base.

Last reviewed 20-05-22.