InstantSearch specs

✏️ edit page

FrequentlyBoughtTogether

Widget example

Frequently bought together

  1. Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
  2. Hit 4397400: Google - Chromecast - Black
  3. Hit 4397400: Google - Chromecast - Black
  4. Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
  5. Hit 4397400: Google - Chromecast - Black
  6. Hit 4397400: Google - Chromecast - Black
  7. Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
  8. Hit 4397400: Google - Chromecast - Black

HTML output

<div class="ais-FrequentlyBoughtTogether">
  <h3 class="ais-FrequentlyBoughtTogether-title">Frequently bought together</h3>
  <div class="ais-FrequentlyBoughtTogether-container">
    <ol class="ais-FrequentlyBoughtTogether-list">
      <li class="ais-FrequentlyBoughtTogether-item">
        Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
      </li>
      <li class="ais-FrequentlyBoughtTogether-item">
        Hit 4397400: Google - Chromecast - Black
      </li>
      <li class="ais-FrequentlyBoughtTogether-item">
        Hit 4397400: Google - Chromecast - Black
      </li>
      <li class="ais-FrequentlyBoughtTogether-item">
        Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
      </li>
      <li class="ais-FrequentlyBoughtTogether-item">
        Hit 4397400: Google - Chromecast - Black
      </li>
      <li class="ais-FrequentlyBoughtTogether-item">
        Hit 4397400: Google - Chromecast - Black
      </li>
      <li class="ais-FrequentlyBoughtTogether-item">
        Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
      </li>
      <li class="ais-FrequentlyBoughtTogether-item">
        Hit 4397400: Google - Chromecast - Black
      </li>
    </ol>
  </div>
</div>

CSS classes

Hint: hover classes below to see their position.

name description
.ais-FrequentlyBoughtTogether the root div of the widget
.ais-FrequentlyBoughtTogether-title the title heading of the widget
.ais-FrequentlyBoughtTogether-container the container for the list of results
.ais-FrequentlyBoughtTogether-list the list of results
.ais-FrequentlyBoughtTogether-item the hit list item

Options

Note: this is a guideline for new InstantSearch flavours, not a rule.

name default value description
objectIDs objectIDs of the items to get the Frequently Bought Together items from
limit Number of recommendations to retrieve
queryParameters List of search parameters to send
threshold Threshold for the recommendations confidence score (between 0 and 100)
transformItems Function which receives the items, which will be called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, remove or reorder them

Translations

Note: this is a guideline for new InstantSearch flavours, not a rule.

name default value description
title Frequently bought together The text for the header element
sliderLabel Frequently bought together products The label for the horizontal slider