Cart
The Cart component can be used on a dynamic checkout cart page.
Example images
Cart
Empty cart
Code samples
{"tasticType": "commercetools/ui/cart","name": "commercetools UI cart","icon": "shopping_cart","category": "Cart","schema": [{"name": "Empty State Data","fields": [{"label": "Page Title","field": "pageTitle","translatable": true,"type": "string"},{"label": "Empty State Image","field": "emptyStateImage","type": "media","required": true},{"label": "Empty State Title","field": "emptyStateTitle","translatable": true,"type": "string"},{"label": "Empty State Subtitle","field": "emptyStateSubtitle","translatable": true,"type": "string"},{"label": "Call to Action Label","field": "emptyStateCTALabel","translatable": true,"type": "string"},{"label": "Call to Action Link","field": "emptyStateCTALink","type": "reference","required": true}]}]}
import React from 'react';import Cart from 'components/commercetools-ui/cart';import { useCart } from 'frontastic/provider';const CartTastic = ({ data }) => {const { data: cartList, removeItem, updateItem, shippingMethods } = useCart();const editItemQuantity = (lineItemId: string, newQuantity: number) =>updateItem(lineItemId, newQuantity);return (<Cartcart={cartList}removeItem={removeItem}editItemQuantity={editItemQuantity}shippingMethods={shippingMethods?.data}pageTitle={data.pageTitle}emptyStateImage={data.emptyStateImage}emptyStateTitle={data.emptyStateTitle}emptyStateSubtitle={data.emptyStateSubtitle}emptyStateCTALabel={data.emptyStateCTALabel}emptyStateCTALink={data.emptyStateCTALink}/>);};export default CartTastic;