salla-loyalty-exchange-product-card
A product card with a "redeem reward" button, shown for each product that a loyalty reward includes.
Used inside salla-loyalty
<salla-loyalty> renders this component for you. You rarely use it directly.
A product card with a "redeem reward" button, shown for each product that a loyalty reward
includes. Used inside salla-reward-details; a theme rarely places it directly.
It renders custom-salla-product-card if that element is registered, otherwise salla-product-card,
with the add to cart button hidden.
Use it
In HTML or JSX, use the tag <salla-loyalty-exchange-product-card> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaLoyaltyExchangeProductCard } from '@salla.sa/twilight-components-react/loyalty-exchange-product-card';Example
import { useEffect } from 'react';
import { SallaLoyaltyExchangeProductCard } from '@salla.sa/twilight-components-react/loyalty-exchange-product-card';
export function Example() {
useEffect(() => {
const card = document.getElementById('card');
card.product = { id: 123, name: 'T-Shirt', url: '/p123', price: 100 };
card.addEventListener('loyaltyProductExchange', e => console.log(e.detail.productId));
}, []);
return (
<SallaLoyaltyExchangeProductCard id="card" />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
product | product | The product to show. Accepts a product object (the same shape salla-product-card takes, id is required) or a JSON string of it. | any |
Events
Listen with addEventListener, or the on prop of the React wrapper (for example onModalBack).
| Event | Description | Detail |
|---|---|---|
loyaltyProductExchange | Fires when the redeem button is clicked. event.detail is { productId }, the id of the product. | { productId: number; } |
Related
Renders: <salla-product-card>, <salla-button>.
Used inside: <salla-reward-details>.