useCart

15 min

The useCart hook returns information about the current shopping cart, and functions for creating and updating the shopping cart.

Example

useCart

import { useCart } from '~/hooks/actions'

const {
  cart,
  addPromoCode,
  addToCart,
  applyGiftCard,
  checkout,
  loadCart,
  modifyQuantity,
  removeFromCart,
  removeGiftCard,
  removePromoCode
} = useCart()

Returns

The useCart hook returns an object with these properties:

Property	Description
cart	An object representing the current order.
addPromoCode	A function that applies a promo code to the current order.
addToCart	A function that adds a product variant to the current order.
applyGiftCard	A function that applies a gift card to the current order.
checkout	A function that redirects the browser to Shopify checkout.
loadCart	A function that loads the current cart based on the current browser session.
modifyQuantity	A function that modifies the quantity of a line item in the cart.
removeFromCart	A function that removes a line item from the cart.
removeGiftCard	A function that removes a gift card from the current order.
removePromoCode	A function that removes an applied promo code from the cart.

Functions

addPromoCode

The addPromoCode function applies a promo code to the current order.

Arguments:

addPromoCode(promoCode)

Argument	Type	Description
promoCode	String	The promo code to apply to the current order.

Returns:

Promise<void>: A Promise that resolves when the promo code has been applied to the order and the cart object has been updated to reflect the promo code.

Example:

addPromoCode

import { useCart } from '~/hooks/actions'

const { addPromoCode } = useCart()

const promoCode = '50off'
await addPromoCode(promoCode)

addToCart

The addToCart function adds a product variant to the current order.

Arguments:

addToCart(variantId, quantity, placement, position, customAttributes)

Argument	Type	Description
variantId	String	The product variant Shopify ID to add to the cart.
quantity	Number	The quantity of the variant to add to the cart.
placement?	String	(Optional) A string representing the placement of the product.
position?	Number	(Optional) A number representing the position of the product in the shopping cart.
customAttributes?	Array	(Optional) An array of custom attributes ({ key: '', value: '' })

Returns:

Promise<void>: A Promise that resolves when the new line item has been added to the cart.

Example:

addToCart

import { useCart } from '~/hooks/actions'

const { addToCart } = useCart()

const variantId = '123'
const quantity = 1
await addToCart(variantId, quantity)

applyGiftCard

The applyGiftCard function applies a gift card to the current order.

Arguments:

applyGiftCard(giftCardCode)

Argument	Type	Description
giftCardCode	String	The gift card code to apply to the current order.

Returns:

Promise<void>: A Promise that resolves when the gift card has been applied to the order and the cart object has been updated to reflect the gift card.

Example:

applyGiftCard

import { useCart } from '~/hooks/actions'

const { applyGiftCard } = useCart()

const giftCardCode = 'xxxyyyzzz'
await applyGiftCard(giftCardCode)

checkout

The checkout function redirects the browser to Shopify checkout.

Arguments:

None.

Returns:

Promise<void>: A Promise that resolves when the browser has been redirected to Shopify checkout.

Example:

checkout

import { useCart } from '~/hooks/actions'

const { checkout } = useCart()
await checkout()

loadCart

The loadCart function loads the current cart based on the current browser session. This is automatically called on every page load and with every other useCart method.

Arguments:

None.

Returns:

Promise<void>: A Promise that resolves when the cart object has been added to Redux.

Example:

loadCart

import { useCart } from '~/hooks/actions'

const { loadCart } = useCart()

await loadCart()

modifyQuantity

The modifyQuantity function modifies the quantity of a line item in the cart.

Arguments:

modifyQuantity(lineItemId, quantity)

Argument	Type	Description
lineItemId	String	The id of the line item to update.
quantity	Number	The desired quantity of the line item.

Returns:

Promise<void>: A Promise that resolves when the cart object has been updated in Redux.

Example:

modifyQuantity

import { useCart } from '~/hooks/actions'

const { modifyQuantity } = useCart()

const lineItemId = '123'
const quantity = 2
await modifyQuantity(lineItemId, quantity)

removeFromCart

The removeFromCart function removes a line item from the cart.

Arguments:

removeFromCart(lineItemId)

Argument	Type	Description
lineItemId	String	The id of the line item to update.

Returns:

Promise<void>: A Promise that resolves when the cart object has been updated in Redux.

Example:

removeFromCart

import { useCart } from '~/hooks/actions'

const { removeFromCart } = useCart()

const lineItemId = '123'
await removeFromCart(lineItemId)

removeGiftCard

The removeGiftCard function removes a gift card from the current order.

Arguments:

removeGiftCart(appliedGiftCardId)

Argument	Type	Description
appliedGiftCardId	String	The id of the gift card to remove.

Returns:

Promise<void>: A Promise that resolves when the cart object has been updated in Redux.

Example:

removeGiftCard

import { useCart } from '~/hooks/actions'

const { removeGiftCard } = useCart()

const giftCardId = 'xxxyyyzzz'
await removeGiftCard(giftCardId)

removePromoCode

The removePromoCode function removes an applied promo code from the order.

Arguments:

removePromoCode(promoCode)

Argument	Type	Description
promoCode	String	The promo code to apply to the current order.

Returns:

Promise<void>: A Promise that resolves when the promo code has been removed from the order and the cart object has been updated to reflect the promo code.

Example:

removePromoCode

import { useCart } from '~/hooks/actions'

const { removePromoCode } = useCart()

const promoCode = '50off'
await removePromoCode(promoCode)