salla-offer

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 itCopy Anchor Link

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

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.

ExampleCopy Anchor Link

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

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

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

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

PropertiesCopy Anchor Link

productCardComponent exampleCopy Anchor Link

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

RelatedCopy Anchor Link

Renders: <salla-slider>, <salla-drawer>, <salla-loading>, <salla-products-list>, <salla-accordion>, <salla-accordion-head>, <salla-accordion-body>.