Product Card

1
2
3
4
5
6
7
8
9
<ProductCardHit
  // Required parameters
  hit={object} // Object containing the hit data.

  // Optional parameters
  viewMode={string="grid" | "list"} // Displays the results as a grid or list view.
  highlighting={boolean} // Whether to use highlighting for the label and title props of the ProductCard component.
  insightsEventName={string} // Event name used to send an event to the Algolia Insights API.
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<ProductCard
  // Optional parameters
  url={string} // URL to open when the product card gets clicked.
  image={string} // Product image link.
  tags={object[]} // List of tag objects.
  // A tag object is defined as below:
  // {
  //   label: string,
  //   theme: 'default' | 'eco' | 'out-of-stock' | 'popular' | 'price'
  // }
  label={string} // Product label (text above the title).
  labelHighlighting={function} // Product label using the highlighting feature.
  title={string} // Product title.
  titleHighlighting={function} // Product title using the highlighting feature.
  description={string} // Product description (displayed only when view is set to list).
  ​​descriptionSnippeting={function} // Product description using the snippeting feature.
  colors={string[]} // List of hexadecimal color codes (for color variants).
  price={number} // Product price.
  originalPrice={number} // Original product price (without discount).
  currency={string} // Product price currency.
  rating={number} // Product rating (on a scale of 5 stars by default).
  reviews={number} // Product reviews number.
  available={boolean} // Whether the product is available. The product card will be greyed out if not available.
  view={string="grid" | "list"} // Product view mode.
  onLinkClick={function} // This function is called when the product card is clicked.
/>