
What is Algolia
Algolia empowers modern developers to build world class search and discovery experiences without any DevOps.
Libraries with every major language and framework make it easy to enrich your users' experiences.
Algolia empowers modern developers to build world class search and discovery experiences without any DevOps.
Libraries with every major language and framework make it easy to enrich your users' experiences.
A little more about Recommend Vanilla JS UI library -
HTML (get a free account here)
1<div class="recommend-demo"> 2 <div class="title">My product page</div> 3 <div class="items-wrapper"> 4 <div id="relatedProducts"></div> 5 </div> 6</div>
CSS
1body { font-family: sans-serif; padding: 1em; } 2.items-wrapper { display: flex; justify-content: space-evenly; gap: 1rem; } 3.recommend-demo { margin: 1rem auto; }
Recommendation
1relatedProducts<ProductHit>({ 2 container: '#relatedProducts', 3 recommendClient, 4 indexName: 'demo_recommend', 5 objectIDs: ['object1', 'object2'], 6 itemComponent({ item }) { 7 return ( 8 <div> 9 <img src={item.image} alt={'product'} /> 10 <div className="item-content"> 11 <div className="item-name">{item.name}</div> 12 <div className="item-description">{item.description}</div> 13 <div className="item-price">${item.price}</div> 14 </div> 15 </div> 16 ); 17 }, 18 view: horizontalSlider, 19 maxRecommendations: 10, 20 translations: { 21 title: 'Complete your look', 22 }, 23});
This app shows how to leverage Algolia Personalization to display product recommendations in emails
Apply different filters and fallback strategies to visualize and customize which recommendations to display on product description or checkout pages.