Frontastic component name

Cart

Suggested page placement

Dynamic checkout cart page

Example image

Cart

Empty cart

Empty cart exampleEmpty cart example

Code samples

{
  "tasticType": "frontastic/ui/cart",
  "name": "Frontastic UI cart",
  "icon": "shopping_cart",
  "category": "Cart",
  "schema": []
}
import React from 'react';
import CartPage from 'components/frontastic-ui/cart';
import { useCart } from 'frontastic/provider';

const CartTastic = () => {
  const { data, removeItem, updateItem, shippingMethods } = useCart();
  const editItemQuantity = (lineItemId: string, newQuantity: number) => updateItem(lineItemId, newQuantity);

  return (
    <CartPage
      cart={data}
      removeItem={removeItem}
      editItemQuantity={editItemQuantity}
      shippingMethods={shippingMethods?.data}
    />
  );
};

export default CartTastic;

Did this page help you?