salla-conditional-offer

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

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

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.

ExampleCopy Anchor Link

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

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

RelatedCopy Anchor Link

Renders: <salla-tooltip>, <salla-skeleton>.