# salla-conditional-offer (https://docs.salla.dev/twilight/react/web-components/salla-conditional-offer)



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

Shows a progress bar for the store's conditional offer (a "spend more, get a discount" offer) with a checkpoint for each reward.
Use it on the cart page or in a cart summary. It has no attributes: it loads the offer from the store by itself and renders nothing when the store has no conditional offer, the `conditional-offer` store feature is off, or the cart is empty.

Progress is measured either by the number of items in the cart or by the cart subtotal, depending on how the offer is set up. Each checkpoint shows its reward as a percentage, a fixed amount, or the picture of a free product (with a tooltip showing the product name and price on hover). The bar updates when the cart changes (`cart::updated`).

## Use it [#use-it]

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

```tsx
import { SallaConditionalOffer } from '@salla.sa/twilight-components-react/conditional-offer';
```

**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 { SallaConditionalOffer } from '@salla.sa/twilight-components-react/conditional-offer';

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

```html
<salla-conditional-offer></salla-conditional-offer>
```

## Related [#related]

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