Cart

The Cart component can be used on a dynamic checkout cart page.

Example images

Cart

cdcf08c shopping cart

Empty cart

Empty cart example

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 (
<Cart
cart={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;