# salla-cart-summary (https://docs.salla.dev/twilight/react/web-components/salla-cart-summary)



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

Cart link showing the item count and total, usually placed in the theme header. It updates itself whenever the cart changes and starts from the values saved in local storage.
The link goes to the cart page. If a store scope is set, `scope` (and `allocation_type` / `allocation_id` when present) are added to the cart URL.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-cart-summary>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaCartSummary } from '@salla.sa/twilight-components-react/cart-summary';
```

**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 [#example]

```tsx
import { SallaCartSummary } from '@salla.sa/twilight-components-react/cart-summary';

export function Example() {
  return (
    <SallaCartSummary showCartLabel />
  );
}
```

```html
<salla-cart-summary show-cart-label="true"></salla-cart-summary>
```

## Properties [#properties]

| Property        | Attribute         | Description                                                                                | Type      | Default |
| --------------- | ----------------- | ------------------------------------------------------------------------------------------ | --------- | ------- |
| `showCartLabel` | `show-cart-label` | Shows a text label ("Cart", or "السلة" when the user language is Arabic) before the total. | `boolean` |         |

## Methods [#methods]

Call these on the element or a React ref.

### `animateToCart(image: any) => Promise<void>` [#animatetocartimage-any--promisevoid]

Animates a copy of a product image flying to the cart icon, then plays a bounce on the icon. Does nothing (only logs) if the element has no `src`.

| Parameter | Type  | Description                                                                         |
| --------- | ----- | ----------------------------------------------------------------------------------- |
| `image`   | `any` | The product `<img>` element to animate from; its position, size and `src` are used. |

## Slots [#slots]

| Slot   | Description                     |
| ------ | ------------------------------- |
| `icon` | Replaces the default cart icon. |