salla-loyalty-banner

A banner for a product page that offers to exchange loyalty points for that product as a free item. It renders nothing unless the store has the loyalty system enabled and the product has a loyalty prize. Clicking the button opens the login dialog for guests, otherwise a modal with the exchange form. The product is taken from the data-product-id attribute, or from the current page id when it is missing.

Use itCopy Anchor Link

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

import { SallaLoyaltyBanner } from '@salla.sa/twilight-components-react/loyalty-banner';

ExampleCopy Anchor Link

import { SallaLoyaltyBanner } from '@salla.sa/twilight-components-react/loyalty-banner';

export function Example() {
  return (
    <SallaLoyaltyBanner dataProductId="123456" />
  );
}

RelatedCopy Anchor Link

Renders: <salla-modal>, <salla-reward-exchange>.