salla-tiered-offer

Progress widget for a store's tiered discount offer: it shows the customer's current tier, a progress bar with a milestone for each tier, and a tab per tier with its discount. Use it in the cart page. It takes no props. It reads the offer of type tiered_offer from the cart offers API and refreshes on every cart::updated event. It renders nothing unless all of these hold: the store has the tiered-offer feature, the cart has items, a tiered offer exists, and the customer is logged in. It is also hidden when a coupon is applied and the offer does not allow coupons, and when the offer is set to hide until the first tier is reached and the customer has not reached it.

Use itCopy Anchor Link

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

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

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

RelatedCopy Anchor Link

Renders: <salla-skeleton>.