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



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

Shows the store's special offers (special price, buy X get Y, discounts table, bank, percentage and fixed
discounts) as a carousel of cards, with a "show more" card and modals when there are more than 5 offers.
Use it on the product page (offers for the current product), on the cart page (offers for the current cart),
or elsewhere (all offers). It takes no id prop: the page is detected from the store page config. Nothing is
rendered when there are no offers, or on the product page when the merchant disabled special offers there.
It emits the `salla::offer.promotion.viewed` and `salla::offer.promotion.clicked` events for analytics.

## Use it [#use-it]

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

```tsx
import { SallaOffer } from '@salla.sa/twilight-components-react/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 { SallaOffer } from '@salla.sa/twilight-components-react/offer';

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

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

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

export function Example() {
  return (
    <SallaOffer productCardComponent="my-product-card" />
  );
}
```

```html
<salla-offer product-card-component="my-product-card"></salla-offer>
```

## Properties [#properties]

| Property               | Attribute                | Description                                                                                                                                                                                                  | Type     | Default                |
| ---------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ---------------------- |
| `productCardComponent` | `product-card-component` | Tag name of the custom element used to render each product card in the offer's product lists. It is passed to the inner `salla-products-list` as `product-card-component`. Defaults to `salla-product-card`. | `string` | `'salla-product-card'` |

### `productCardComponent` example [#productcardcomponent-example]

```html
<salla-products-list product-card-component="my-custom-card-style1" ...
<salla-products-list product-card-component="my-custom-card-style2" ...
```

## Related [#related]

Renders: [`<salla-slider>`](https://docs.salla.dev/twilight/react/web-components/salla-slider), [`<salla-drawer>`](https://docs.salla.dev/twilight/react/web-components/salla-drawer), [`<salla-loading>`](https://docs.salla.dev/twilight/react/web-components/salla-loading), [`<salla-products-list>`](https://docs.salla.dev/twilight/react/web-components/salla-products-list), [`<salla-accordion>`](https://docs.salla.dev/twilight/react/web-components/salla-accordion), [`<salla-accordion-head>`](https://docs.salla.dev/twilight/react/web-components/salla-accordion-head), [`<salla-accordion-body>`](https://docs.salla.dev/twilight/react/web-components/salla-accordion-body).