diff --git a/framework/commerce/README.md b/framework/commerce/README.md index 620d3bb39..050ec3b29 100644 --- a/framework/commerce/README.md +++ b/framework/commerce/README.md @@ -192,27 +192,28 @@ const SearchPage = ({ searchString, category, brand, sortStr }) => { ### useCart -Returns the current cart data for use +Fetches and returns the data of the current cart: ```jsx -... -import useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart' +import useCart from '@framework/cart/use-cart' -const countItem = (count: number, item: LineItem) => count + item.quantity +const CartTotal = () => { + const { data, isLoading, isEmpty, error } = useCart() -const CartNumber = () => { - const { data } = useCart() - const itemsCount = data?.lineItems.reduce(countItem, 0) ?? 0 + if (isLoading) return

Loading...

+ if (error) return

{error.message}

+ if (isEmpty) return

The cart is empty

- return itemsCount > 0 ? {itemsCount} : null + return

The cart total is {data.totalPrice}

} ``` ### useAddItem +Returns a function that adds a new item to the cart when called, if this is the first item it will create the cart: + ```jsx -... -import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item' +import { useAddItem } from '@framework/cart' const AddToCartButton = ({ productId, variantId }) => { const addItem = useAddItem() @@ -226,21 +227,23 @@ const AddToCartButton = ({ productId, variantId }) => { return } -... ``` ### useUpdateItem -```jsx -... -import useUpdateItem from '@bigcommerce/storefront-data-hooks/cart/use-update-item' +Returns a function that updates a current item in the cart when called, usually the quantity. -const CartItem = ({ item }) => { +```jsx +import { useUpdateItem } from '@framework/cart' + +const CartItemQuantity = ({ item }) => { const [quantity, setQuantity] = useState(item.quantity) - const updateItem = useUpdateItem(item) + const updateItem = useUpdateItem({ item }) const updateQuantity = async (e) => { const val = e.target.value + + setQuantity(val) await updateItem({ quantity: val }) } @@ -254,27 +257,25 @@ const CartItem = ({ item }) => { /> ) } -... ``` +If the `quantity` is lower than 1 the item will be removed from the cart. + ### useRemoveItem -Provided with a cartItemId, will remove an item from the cart: +Returns a function that removes an item in the cart when called: ```jsx -... -import useRemoveItem from '@bigcommerce/storefront-data-hooks/cart/use-remove-item' +import { useRemoveItem } from '@framework/cart' const RemoveButton = ({ item }) => { const removeItem = useRemoveItem() - const handleRemove = async () => { - await removeItem({ id: item.id }) + await removeItem(item) } return } -... ``` ## Wishlist Hooks