React JS + Algolia Recommend

Get started

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}