salla-advertisement

Shows the store's active announcement bars (text, optional icon and link, with the merchant's background and text colors) for the current page. Place it once near the top of the theme layout. It has no props and renders nothing when there are no ads, and never in the native mobile app. When the customer clicks the close button the ad is hidden with an animation and remembered in storage (key statusAd-<id>) so it does not return. In preview or debug mode all active ads are shown regardless of dismissal. The close button has aria-label="close-alert".

Use itCopy Anchor Link

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

import { SallaAdvertisement } from '@salla.sa/twilight-components-react/advertisement';

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 { SallaAdvertisement } from '@salla.sa/twilight-components-react/advertisement';

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

import { SallaAdvertisement } from '@salla.sa/twilight-components-react/advertisement';

export function Example() {
  return (
    <SallaAdvertisement>
      <div slot="adv" className="my-ad">
        <a href="{url}" target="{target}">{'{'}description{'}'}</a>
      </div>
    </SallaAdvertisement>
  );
}

SlotsCopy Anchor Link