salla-cart-summary

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 itCopy Anchor Link

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

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.

ExampleCopy Anchor Link

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

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

PropertiesCopy Anchor Link

MethodsCopy Anchor Link

Call these on the element or a React ref.

animateToCart(image: any) => Promise<void>Copy Anchor Link

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.

SlotsCopy Anchor Link