# salla-bought-together (https://docs.salla.dev/twilight/react/web-components/salla-bought-together)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

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 it [#use-it]

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

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

## Example [#example]

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

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

```html
<salla-bought-together limit="3"></salla-bought-together>
```

## Properties [#properties]

| Property | Attribute | Description                                                                                                                            | Type     | Default |
| -------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| `limit`  | `limit`   | Maximum number of recommended products to show next to the current product. Max is 4. Only the first `limit` recommended ids are used. | `number` | `3`     |

## Related [#related]

Renders: [`<salla-skeleton>`](https://docs.salla.dev/twilight/react/web-components/salla-skeleton), [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button).