# salla-basket-gap (https://docs.salla.dev/twilight/react/web-components/salla-basket-gap)



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

A "bought together" recommendations section for the cart page. It looks at the products in the cart
and lists other products, with an add-to-cart button each. Use it on the cart page, normally at the
theme's `cart:items.end` hook.

It renders nothing unless the store setting `store.settings.cart.basket_gap` is on, the cart has items
and the recommendations are not empty. Products already in the cart are removed from the list.
It refreshes when `cart::item.added` or `cart::item.deleted` fires. If the cart page uses
`form[id^="item-"]` rows for cart items, the component moves itself directly below the last one.

It emits these events on `salla.event` (not DOM events): `salla-basket-gap::list.viewed` (the list scrolled into view),
`salla-basket-gap::product.clicked` and `salla-basket-gap::product.added`.

## Use it [#use-it]

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

```tsx
import { SallaBasketGap } from '@salla.sa/twilight-components-react/basket-gap';
```

## Example [#example]

```tsx
import { SallaBasketGap } from '@salla.sa/twilight-components-react/basket-gap';

export function Example() {
  return (
    <SallaBasketGap limit={6} />
  );
}
```

```html
<salla-basket-gap limit="6"></salla-basket-gap>
```

## Properties [#properties]

| Property | Attribute | Description                                                           | Type     | Default |
| -------- | --------- | --------------------------------------------------------------------- | -------- | ------- |
| `limit`  | `limit`   | Maximum number of recommended products to show (a count of products). | `number` | `10`    |

## Related [#related]

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