salla-basket-gap

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 itCopy Anchor Link

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

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

ExampleCopy Anchor Link

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

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

PropertiesCopy Anchor Link

RelatedCopy Anchor Link

Renders: <salla-skeleton>, <salla-count-down>, <salla-add-product-button>.