Cart

{
  "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;