useCart Hook

The useCart hook provides access to the cart object and its associated functions.

Prerequisites

The useCart hook must be a descendant of a CartProvider component.

import { CartProvider } from "@airsoko/react";
export function App() {
  <CartProvider>
    <Component />
  </CartProvider>;
}

Returns Summary

import React from "react";
import { useCart, CartProvider } from "@airsoko/react"; // Import the useCart hook and CartProvider component
 
const App = () => {
  // Use the useCart hook to access cart functionality
  const {
    CartWithActionsDocs,
    cartCreate,
    linesAdd,
    linesRemove,
    linesUpdate,
    noteUpdate,
    buyerIdentityUpdate,
    cartAttributesUpdate,
    discountCodesUpdate,
    cartFragment,
    id,
    checkoutUrl,
    note,
    buyerIdentity,
    discountCodes,
    cost,
    totalQuantity,
    error,
  } = useCart();
 
  // Example usage of cart functionality
  const handleCreateCart = () => {
    cartCreate({}); // Create a new cart
  };
 
  const handleAddItem = () => {
    linesAdd([{ variantId: "variant_id", quantity: 1 }]); // Add an item to the cart
  };
 
  const handleRemoveItem = () => {
    linesRemove(["line_id"]); // Remove an item from the cart
  };
 
  const handleUpdateItem = () => {
    linesUpdate([{ lineId: "line_id", quantity: 2 }]); // Update the quantity of an item in the cart
  };
 
  const handleUpdateNote = () => {
    noteUpdate("New note"); // Update the note in the cart
  };
 
  const handleUpdateBuyerIdentity = () => {
    buyerIdentityUpdate({ email: "[email protected]" }); // Update the buyer identity in the cart
  };
 
  const handleUpdateAttributes = () => {
    cartAttributesUpdate([{ key: "attribute_key", value: "attribute_value" }]); // Update the cart attributes
  };
 
  const handleUpdateDiscountCodes = () => {
    discountCodesUpdate(["DISCOUNT_CODE"]); // Update the discount codes applied to the cart
  };
 
  return (
    <div>
      <button onClick={handleCreateCart}>Create Cart</button>
      <button onClick={handleAddItem}>Add Item</button>
      <button onClick={handleRemoveItem}>Remove Item</button>
      <button onClick={handleUpdateItem}>Update Item</button>
      <button onClick={handleUpdateNote}>Update Note</button>
      <button onClick={handleUpdateBuyerIdentity}>Update Buyer Identity</button>
      <button onClick={handleUpdateAttributes}>Update Attributes</button>
      <button onClick={handleUpdateDiscountCodes}>Update Discount Codes</button>
 
      <div>
        <h2>Cart Details:</h2>
        <p>Cart ID: {id}</p>
        <p>Checkout URL: {checkoutUrl}</p>
        <p>Note: {note}</p>
        <p>Buyer Identity: {JSON.stringify(buyerIdentity)}</p>
        <p>Discount Codes: {JSON.stringify(discountCodes)}</p>
        <p>Cost: {JSON.stringify(cost)}</p>
        <p>Total Quantity: {totalQuantity}</p>
        <p>Error: {JSON.stringify(error)}</p>
      </div>
    </div>
  );
};
 
const Root = () => {
  return (
    <CartProvider>
      <App />
    </CartProvider>
  );
};
 
export default Root;

Returns

CartWithActionsDocs

Lines

• Type: Array<CartLine | ComponentizableCartLine>
• Description: The cart lines.

Attributes

• Type: Attribute[]
• Description: The cart's attributes.

Status

• Type: CartStatus
• Description: The status of the cart. Possible values are:
  • uninitialized: When the cart is not yet created.
  • creating: When the cart is being created.
  • fetching: When an existing cart is being fetched.
  • updating: When the cart is updating.
  • idle: When the cart isn't being created or updated.

cartCreate

• Type: (cart: CartInput) => void
• Description: A callback that creates a cart. Expects the same input you would provide to the Storefront API's cartCreate mutation.

linesAdd

• Type: (lines: CartLineInput[]) => void
• Description: A callback that adds lines to the cart. Expects the same lines input that you would provide to the Storefront API's cartLinesAdd mutation. If a cart doesn't already exist, then it will create the cart for you.

linesRemove

• Type: (lines: string[]) => void
• Description: A callback that removes lines from the cart. Expects the same lines input that you would provide to the Storefront API's cartLinesRemove mutation. Only lines that are included in the lines parameter will be in the cart afterwards.

linesUpdate

• Type: (lines: CartLineUpdateInput[]) => void
• Description: A callback that updates lines in the cart. Expects the same lines input that you would provide to the Storefront API's cartLinesUpdate mutation. If a line item is not included in the lines parameter, it will still exist in the cart and will not be changed.

noteUpdate

• Type: (note: string) => void
• Description: A callback that updates the note in the cart. Expects the same note input that you would provide to the Storefront API's cartNoteUpdate mutation.

buyerIdentityUpdate

• Type: (buyerIdenity: CartBuyerIdentityInput) => void
• Description: A callback that updates the buyer identity in the cart. Expects the same buyerIdentity input that you would provide to the Storefront API's cartBuyerIdentityUpdate mutation.

cartAttributesUpdate

• Type: (attributes: AttributeInput[]) => void
• Description: A callback that updates the cart attributes. Expects the same attributes input that you would provide to the Storefront API's cartAttributesUpdate mutation.

discountCodesUpdate

• Type: (discountCodes: string[]) => void
• Description: A callback that updates the cart's discount codes. Expects the same codes input that you would provide to the Storefront API's cartDiscountCodesUpdate mutation.

cartFragment

• Type: string
• Description: The fragment used to query the cart object for all queries and mutations.

id

• Type: string
• Description: The cart's ID if it has been created through the Storefront API.

checkoutUrl

• Type: string
• Description: The checkout URL for the cart, if the cart has been created in the Storefront API.

note

• Type: string
• Description: The cart's note.

buyerIdentity

• Type: CartBuyerIdentity
• Description: The cart's buyer identity.

discountCodes

• Type: CartDiscountCode[]
• Description: The discount codes applied to the cart.

cost

• Type: CartCost
• Description: The cost for the cart, including the subtotal, total, taxes, and duties.

totalQuantity

• Type: number
• Description: The total number of items in the cart, across all lines. If there are no lines, then the value is 0.

error

• Type: unknown
• Description: If an error occurred on the previous cart action, then error will exist and cart will be put back into the last valid status it was in.

useCart Hook

The useCart hook provides access to the cart object and its associated functions.

Prerequisites

The useCart hook must be a descendant of a CartProvider component.