
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)
1import { RelatedProducts } from "@algolia/recommend-react"; 2import { HorizontalSlider } from '@algolia/ui-components-horizontal-slider-react';
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
1class App extends Component { 2 render() { 3 return ( 4 <div className="recommend-demo"> 5 <section className="items-wrapper"> 6 <RelatedProducts 7 recommendClient={recommendClient} 8 indexName="demo_recommend" 9 objectIDs={['object1', 'object2']} 10 itemComponent={RelatedItem} 11 view={HorizontalSlider} 12 maxRecommendations={5} 13 translations={{ 14 title: "Complete your look", 15 }} 16 /> 17 </section> 18 </div> 19 ) 20 } 21} 22 23function RelatedItem (props) { 24 return ( 25 <div> 26 <img align="center" src={props.item.image} alt={"product"} /> 27 <div className="item-content"> 28 <div className="item-name">{props.item.name}</div> 29 <div className="item-description">{props.item.description}</div> 30 <div className="item-price">${props.item.price}</div> 31 </div> 32 </div> 33 ) 34}
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.