salla-offer-modal

A popup (built on salla-modal) that shows the special offer attached to a product: the offer name and message, the products, categories, brands or tags the customer gets the discount on (or a quantity discount table), and the offer conditions. Put one instance on pages where offers can appear (usually once in the theme layout); it opens itself when the product API reports an existing offer (unless the customer ticked "remember my choice" for that offer), or when you call open(productId) or emit the offer-modal::open event with a product id. Nothing opens if the product has no offers. It emits the global promotion::viewed and promotion::clicked events for analytics.

Use itCopy Anchor Link

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

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

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

export function Example() {
  useEffect(() => {
    document.querySelector('salla-offer-modal').open(123456);
  }, []);

  return (
    <SallaOfferModal />
  );
}

MethodsCopy Anchor Link

Call these on the element or a React ref.

open(product_id: number) => Promise<any>Copy Anchor Link

Fetches the offers for a product and opens the modal showing the first one. If the product has no offers the modal is not opened; if the request fails, the modal opens with the error message.

Returns Promise<any>: Promise that resolves when the request has finished (it has no meaningful value).

showOffer(offer: any) => Promise<void>Copy Anchor Link

Renders the given offer inside the modal and emits promotion::viewed. It does not open the modal itself, so use open() unless the modal is already open.

SlotsCopy Anchor Link

RelatedCopy Anchor Link

Renders: <salla-button>, <salla-products-slider>, <salla-slider>, <salla-modal>, <salla-skeleton>, <salla-placeholder>.