salla-product-card
A product card with image, name, price, rating, a wishlist heart and an add to cart button.
A product card with image, name, price, rating, a wishlist heart and an add to cart button.
Use it in product lists and grids; salla-products-list and sliders render it for each product.
Pass the product data through product. The layout switches with horizontal, full-image, minimal and compact.
The card links to product.url, shows an out of stock, remaining quantity or promotion badge on the image,
and a sale price (is_on_sale) or a starting price (starting_price) when the product has one.
Donation products get a progress bar and an amount input.
The wishlist button has an aria-label, and the image falls back to the theme placeholder until it is lazy loaded.
The product is read once when the component is created, so changing product later does not update the card.
Use it
In HTML or JSX, use the tag <salla-product-card> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaProductCard } from '@salla.sa/twilight-components-react/product-card';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.
Example
import { SallaProductCard } from '@salla.sa/twilight-components-react/product-card';
export function Example() {
return (
<SallaProductCard
product='{"id":1,"name":"T-Shirt","url":"/p1","price":100,"image":{"url":"/img/1.jpg","alt":"T-Shirt"},"add_to_cart_label":"Add to cart"}'
shadowOnHover />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
compact | compact | Use the compact layout for drawers and lists. Titles longer than 60 characters are cut with an ellipsis, and the add to cart button is placed outside the content area. | boolean | |
compactAddToCart | compact-add-to-cart | Show only a cart icon instead of the text label on the add to cart button. Defaults to false. Has no effect when the add-to-cart-label slot is filled. | boolean | false |
forceShowWishlistButton | force-show-wishlist-button | Show the wishlist button next to the add to cart button in the compact layout. Defaults to false. Only has an effect together with compact, and only while the add to cart button is not hidden. | boolean | false |
fullImage | full-image | Make the image fill the whole card, with the name and price over it. Hides the image badge, subtitle and donation progress. Takes priority over horizontal. | boolean | |
hideAddBtn | hide-add-btn | Hide the add to cart button (and the wishlist button that sits next to it in the horizontal layout). | boolean | |
horizontal | horizontal | Show the image beside the content instead of above it. The wishlist button then moves next to the add to cart button. Ignored when full-image or minimal is set. | boolean | |
isSpecial | is-special | Show the special offer layout: a circle with the remaining quantity (when the product has quantity) and a boxed count-down to discount_ends (when the product has it). | boolean | |
minimal | minimal | Show a reduced card: no image badge, subtitle, rating or donation progress. Takes priority over horizontal. | boolean | |
product | product | The product to show: an object, or a JSON string of it. Fields used: id, name, subtitle, url, image ({ url, alt }), thumbnail, price, sale_price, regular_price, is_on_sale, starting_price, is_out_of_stock, quantity, promotion_title, rating ({ stars }), donation, discount_ends, status, type and add_to_cart_label. Invalid JSON is logged and the card stays empty. Read once when the component is created. | object | string | |
shadowOnHover | shadow-on-hover | Add a shadow to the card when the pointer hovers over it. | boolean | |
showOutOfStockBesidePrice | show-out-of-stock-beside-price | Show the out of stock label beside the price instead of as a badge on the image. Defaults to false. | boolean | false |
showQuantity | show-quantity | Show the remaining quantity (product.quantity) as a badge on the image, when the product is in stock. | boolean |
Slots
| Slot | Description |
|---|---|
add-to-cart-label | Replaces the text (or icon) inside the add to cart button. |
Related
Renders: <salla-button>, <salla-progress-bar>, <salla-count-down>, <salla-add-product-button>.
Used inside: <salla-loyalty-exchange-product-card>, <salla-products-slider>.