CartSummaryGrid container
The CartSummaryGrid
container manages and displays the contents of the shopping cart in a grid layout. Its state is managed by the CartModel
interface, which contains the cart’s initial data and is passed down to any child components.
CartSummaryGrid container
Configurations
The CartSummaryGrid
container provides the following configuration options:
The CartModel
object has the following shape:
export interface CartModel { id: string; totalQuantity: number; errors?: ItemError[]; items: Item[]; miniCartMaxItems: Item[]; total: { includingTax: Price; excludingTax: Price; }; discount?: Price; subtotal: { excludingTax: Price; includingTax: Price; includingDiscountOnly: Price; }; appliedTaxes: TotalPriceModifier[]; totalTax?: Price; appliedDiscounts: TotalPriceModifier[]; shipping?: Price; isVirtual?: boolean; addresses: { shipping?: { countryCode: string; zipCode?: string; regionCode?: string; }[]; }; isGuestCart?: boolean; hasOutOfStockItems?: boolean; hasFullyOutOfStockItems?: boolean; appliedCoupons?: Coupon[];}
interface TotalPriceModifier { amount: Price; label: string; coupon?: Coupon;}
interface FixedProductTax { amount: Price; label: string;}
export interface Item { taxedPrice: Price; rowTotal: Price; rowTotalIncludingTax: Price; itemType: string; uid: string; url: ItemURL; quantity: number; sku: string; name: string; image: ItemImage; links?: ItemLinks; price: Price; total: Price; discountedTotal?: Price; discount?: Price; regularPrice: Price; discounted: boolean; bundleOptions?: { [key: string]: any }; selectedOptions?: { [key: string]: any }; customizableOptions?: { [key: string]: any }; message?: string; recipient?: string; recipientEmail?: string; sender?: string; senderEmail?: string; lowInventory?: boolean; insufficientQuantity?: boolean; onlyXLeftInStock?: number | null; outOfStock?: boolean; notAvailableMessage?: string; stockLevel?: String; discountPercentage?: number; savingsAmount?: Price; productAttributes?: Attribute[]; fixedProductTaxes?: FixedProductTax[];}
interface ItemError { id: string; text: string;}
interface ItemImage { src: string; alt: string;}
export interface Price { value: number; currency: string;}
interface ItemURL { urlKey: string; categories: string[];}
interface ItemLinks { count: number; result: string;}
interface AttributeOption { value: string; label: string;}
interface Attribute { code: string; value?: string; selected_options?: AttributeOption[];}
interface Coupon { code: string;}
Example configuration
The following example demonstrates how to render the CartSummaryGrid
container with the routeProduct
and routeEmptyCartCTA
callbacks:
provider.render(CartSummaryGrid, { routeProduct: (item) => { return `${item.url.categories.join('/')}/${item.url.urlKey}`; }, routeEmptyCartCTA: () => '#empty-cart', })(document.getElementById('@dropins/CartSummaryGrid'));