# salla-search-product-card (https://docs.salla.dev/twilight/react/web-components/salla-search-product-card)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

<Callout title="Used inside salla-search">
  [`<salla-search>`](https://docs.salla.dev/twilight/react/web-components/salla-search) renders this component for you. You rarely use it directly.
</Callout>

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 [#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).

```tsx
import { SallaSearchProductCard } from '@salla.sa/twilight-components-react/search-product-card';
```

## Example [#example]

```tsx
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"}}' />
  );
}
```

```html
<salla-search-product-card product='{"id":1,"name":"T-shirt","price":120,"url":"/p1","image":{"url":"/t.jpg"}}'></salla-search-product-card>
```

## Properties [#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 [#slots]

| Slot                | Description                                                   |
| ------------------- | ------------------------------------------------------------- |
| `add-to-cart-label` | Replaces the default cart icon inside the add to cart button. |

## Related [#related]

Renders: [`<salla-progress-bar>`](https://docs.salla.dev/twilight/react/web-components/salla-progress-bar), [`<salla-add-product-button>`](https://docs.salla.dev/twilight/react/web-components/salla-add-product-button).

Used inside: [`<salla-search>`](https://docs.salla.dev/twilight/react/web-components/salla-search).