salla-cart-item-offers
Lists the offers (discounts, free items) that were applied to one line in the cart, with the name and discount amount of each.
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
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).
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
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"}]' />
);
}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 |