Get started HTML (get a free account here )
1 import { RelatedProducts } from "@algolia/recommend-react";
2 import { HorizontalSlider } from '@algolia/ui-components-horizontal-slider-react';
CSS
1 body { font-family: sans-serif; padding: 1em; }
2 .items-wrapper { display: flex; justify-content: space-evenly; gap: 1rem; }
3 .recommend-demo { margin: 1rem auto; }
Recommendation
1 class 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
23 function 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 }