salla-bought-together

A "frequently bought together" block for the product page. It takes the current product (the id in page.id) plus recommended products, shows each with a checkbox, a total price for the checked ones, and one button that adds all checked products to the cart. Place it once on the product page. It renders nothing when the store setting store.settings.product.bought_together is off, there is no page.id, or no recommendations are returned. A skeleton is shown while loading. Items are checked by default and the main product is listed first.

It emits these events through salla.event:

• salla-bought-together::list.viewed once, when the block is at least 10% visible. Payload: { products, source, request_id }, where products are the recommended products without the main one.
• salla-bought-together::product.clicked when a recommended product link is clicked. Payload: [{ product, position, source, request_id }].
• salla-bought-together::product.added after each product is added to the cart. Payload: [{ product, position, cartItem, cartId, request_id }].

Use itCopy Anchor Link

In HTML or JSX, use the tag <salla-bought-together> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaBoughtTogether } from '@salla.sa/twilight-components-react/bought-together';

ExampleCopy Anchor Link

import { SallaBoughtTogether } from '@salla.sa/twilight-components-react/bought-together';

export function Example() {
  return (
    <SallaBoughtTogether limit={3} />
  );
}

PropertiesCopy Anchor Link

RelatedCopy Anchor Link

Renders: <salla-skeleton>, <salla-button>.