salla-search-product-card
Standalone clone of salla-product-card scoped to salla-search's results grid, which always renders it horizontal + compact with the out-of-stock label beside the price and an icon-only add-to-cart but
Used inside salla-search
<salla-search> renders this component for you. You rarely use it directly.
Standalone clone of salla-product-card scoped to salla-search's results
grid, which always renders it horizontal + compact with the out-of-stock
label beside the price and an icon-only add-to-cart button. Those layout
choices - and everything they make unreachable (the vertical layout, the
wishlist toggle button, full-image, minimal, special, shadow-on-hover, the
add-to-cart text label) - are baked in rather than exposed as props. Not
intended for use outside salla-search.
When the product has a url, an overlay link with an aria-label of the product name makes the whole card a link.
Use it
In HTML or JSX, use the tag <salla-search-product-card> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaSearchProductCard } from '@salla.sa/twilight-components-react/search-product-card';Example
import { SallaSearchProductCard } from '@salla.sa/twilight-components-react/search-product-card';
export function Example() {
return (
<SallaSearchProductCard product='{"id":1,"name":"T-shirt","price":120,"url":"/p1","image":{"url":"/t.jpg"}}' />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
hideAddBtn | hide-add-btn | Hides the add to cart button. | boolean | false |
product | product | The product to show. Accepts a product object or a JSON string of one. Used fields include id, name, url, image, price, sale_price, regular_price, is_on_sale, starting_price, is_out_of_stock, quantity, promotion_title, subtitle, rating.stars, donation, status and type. Invalid JSON is logged and the card renders without data. | object | string | |
showDonationAmount | show-donation-amount | Shows a donation progress bar and, when the product's donation.can_donate is true, an amount input. Only applies to products that have a donation object. | boolean | false |
Slots
| Slot | Description |
|---|---|
add-to-cart-label | Replaces the default cart icon inside the add to cart button. |
Related
Renders: <salla-progress-bar>, <salla-add-product-button>.
Used inside: <salla-search>.