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



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

Lists the offers (discounts, free items) that were applied to one line in the cart, with the name and discount amount of each.
Use it inside a cart item template. The first 3 offers are shown and the rest are behind a "show more" button.
It renders nothing when the item has no offers, and it refreshes its quantity, price and offers itself when the cart
is fetched or an item, or coupon, changes (matched by `item-id`).

## Use it [#use-it]

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

```tsx
import { SallaCartItemOffers } from '@salla.sa/twilight-components-react/cart-item-offers';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaCartItemOffers } from '@salla.sa/twilight-components-react/cart-item-offers';

export function Example() {
  return (
    <SallaCartItemOffers
      itemId="123456"
      quantity={3}
      productPrice={50}
      offers='[{"offer_name":"Buy 2 get 1 free","free_quantity":1,"discount_amount":50,"discount_icon":"GiftIcon"}]' />
  );
}
```

```html
<salla-cart-item-offers
  item-id="123456"
  quantity="3"
  product-price="50"
  offers='[{"offer_name":"Buy 2 get 1 free","free_quantity":1,"discount_amount":50,"discount_icon":"GiftIcon"}]'>
</salla-cart-item-offers>
```

## Properties [#properties]

| Property                  | Attribute       | Description                                                                                                                                                                                                                                                                                                                                                        | Type     | Default |
| ------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ------- |
| `itemId` (required)       | `item-id`       | The unique identifier of the cart item. Also used to find this item in cart updates, so it must match the cart item id.                                                                                                                                                                                                                                            | `string` |         |
| `offers` (required)       | `offers`        | JSON string of an array of offers for the cart item. Each offer is an object with: `offer_name` (string), `discount_amount` (number, in store currency), `free_quantity` (number of free units), and `discount_icon` (one of `"DiscountCouponIcon"`, `"GiftIcon"`, `"FireIcon"`, `"SpecialDiscountIcon"`, `"TagMoneyIcon"`). Invalid JSON is treated as no offers. | `string` |         |
| `productPrice` (required) | `product-price` | The unit price of the product in the cart, as a number in the store currency. Shown next to the free units.                                                                                                                                                                                                                                                        | `number` |         |
| `quantity` (required)     | `quantity`      | The quantity of the cart item (a count). Used to work out how many units were paid and how many were free.                                                                                                                                                                                                                                                         | `number` |         |