salla-product-card-embed
Embeds a single product card by product id, for example inside article or blog content.
Embeds a single product card by product id, for example inside article or blog content.
It fetches the product when it loads and renders custom-salla-product-card if the theme registers it,
otherwise salla-product-card. Nothing is shown if the product cannot be loaded.
With align="left" or "right" it floats so text wraps around it, and its parent is made a flow-root so the float stays contained.
Use it
In HTML or JSX, use the tag <salla-product-card-embed> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaProductCardEmbed } from '@salla.sa/twilight-components-react/product-card-embed';Example
import { SallaProductCardEmbed } from '@salla.sa/twilight-components-react/product-card-embed';
export function Example() {
return (
<SallaProductCardEmbed productId="123" align="right" />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
align | align | Alignment of the card in the surrounding content: left floats it to the inline start side and right to the inline end side (so they swap in RTL), center centers it as a block. Not set means inline flow. | "center" | "left" | "right" | |
productId | product-id | Id of the product to show. It is fetched once when the component loads; nothing renders if it is empty. | number | string | |
source | source | Tracking source for the embedded card. It is set as the card's source attribute and added as the _svs query parameter of the product link. Defaults to embed-card. | string |
salla-product-card
A product card with image, name, price, rating, a wishlist heart and an add to cart button.
salla-product-options
Renders the selectable options of a product (single and multiple choice, color, thumbnail, text, number, date and time, image and file upload, map, donation amount, digital card values and more) as fo