Aiminaabee

Retrieve Cart in the Storefront

Retrieve the customer's current cart.

On this page

In this guide, you'll learn how to retrieve a cart's details in your storefront.

On Next.js, read the cart ID from the _aiminaabee_cart_id cookie, not localStorage. See Create Cart and Build a Next.js Storefront.

Retrieve a cart with the Get a Cart API route.

Tip: Learn how to install and configure the JS SDK in the Getting started guide.

Next.js (recommended)

ts

tsCopy
"use server"


export async function retrieveCart(
  storeCode: string,
  cartId?: string
): Promise<HttpTypes.StoreCart | null> {
  const id = cartId || (await getCartId())


  if (!id) {
    return null
  }


  const headers = { ...(await getAuthHeaders()) }


  return sdk.store.cart
    .retrieve(
      storeCode,
      id,
      {
        fields:
          "*items, *region, *items.product, *items.variant, *items.thumbnail, *items.metadata, +items.total, *promotions, +shipping_methods.name",
      },
      headers
    )
    .then(({ cart }) => cart)
    .catch(() => null)
}

Call this from a server component (cart page, header cart count) or from other server actions.

JS SDK

ts

tsCopy
sdk.store.cart.retrieve(storeCode, cartId)
.then(({ cart }) => {
  console.log(cart)
})

The response has a cart field, which is a cart object.

Format Prices

When displaying cart totals or line-item prices, format with the cart's currency:

ts

tsCopy
const formatPrice = (amount: number, currencyCode: string): string => {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: currencyCode,
  }).format(amount)
}

This is the same approach used to format product variant prices. Define it once and reuse it.