salla-cart-summary-card
Cart summary card for the cart page.
Used inside salla-cart-summary
<salla-cart-summary> renders this component for you. You rarely use it directly.
Cart summary card for the cart page. It loads the current cart and shows the items subtotal, options total, shipping, tax, discount and the final total, with a "complete order" button that validates the cart item forms and submits the cart. It stays up to date through the cart events of the SDK and shows a skeleton while loading.
On screens 1024px wide or more it renders inline where it is placed. On smaller screens the element is moved to the
end of body and becomes a sticky bottom bar with a collapsible details sheet; the chevron button has
aria-label and aria-expanded. It is moved back to its original place when the screen grows.
Use it
In HTML or JSX, use the tag <salla-cart-summary-card> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaCartSummaryCard } from '@salla.sa/twilight-components-react/cart-summary-card';Example
import { SallaCartSummaryCard } from '@salla.sa/twilight-components-react/cart-summary-card';
export function Example() {
return (
<SallaCartSummaryCard />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
validateForms | validate-forms | When true (default), clicking the "complete order" button first validates every cart item form (form[id^="item-"]), including their salla-product-options. If any is invalid, the submit is cancelled and an error notification is shown. Set it to false to skip this check. | boolean | true |
Related
Renders: <salla-skeleton>, <salla-button>.