# salla-cart-coupons (https://docs.salla.dev/twilight/react/web-components/salla-cart-coupons)



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

A coupon section for the cart page: a text input to enter a coupon code, plus a slider of the store's available coupon cards that can be applied with one click.
It takes no props. It loads the available coupons from the store API, reads the cart total, and stays in sync with other coupon changes through the `cart::updated`, `cart::coupon.added`, `cart::coupon.addition.failed` and `cart::coupon.deleted` events.
Cards whose minimum cart amount is not met are not eligible. If the store has multiple coupons enabled (`store.settings.cart.multi_coupon`), several codes can be applied and applied coupons are shown in the card list marked as applied;
otherwise the input is disabled while one coupon is applied and the button turns into a remove button.
Pressing Enter in the input applies the code, the input and buttons have `aria-label`s, and the remove control on applied cards is labelled with the coupon code.
Fires the DOM event `salla::cart-coupons.coupon.selected` (bubbling, `event.detail` is the coupon object) after `selectCoupon()` applies a coupon successfully.

## Use it [#use-it]

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

```tsx
import { SallaCartCoupons } from '@salla.sa/twilight-components-react/cart-coupons';
```

## Example [#example]

```tsx
import { SallaCartCoupons } from '@salla.sa/twilight-components-react/cart-coupons';

export function Example() {
  return (
    <SallaCartCoupons />
  );
}
```

```html
<salla-cart-coupons></salla-cart-coupons>
```

## Methods [#methods]

Call these on the element or a React ref.

### `selectCoupon(couponCode: string) => Promise<Coupon>` [#selectcouponcouponcode-string--promisecoupon]

Applies one of the available coupons to the cart by its code, as if its card was clicked.
Throws an error if the coupon is not eligible (minimum cart amount not met) or if applying it fails.
Dispatches `salla::cart-coupons.coupon.selected` on success.

| Parameter    | Type     | Description                                                  |
| ------------ | -------- | ------------------------------------------------------------ |
| `couponCode` | `string` | The code of a coupon from the loaded available coupons list. |

Returns `Promise<Coupon>`: A Promise that resolves to the matching coupon object, or `undefined` if no available coupon has that code (nothing is applied in that case).

## Related [#related]

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