useCart

13min
The useCart hook returns a series of methods for interacting with the Shopify shopping cart.
JS
import { useCart } from '@chordcommerce/gatsby-theme-performance'

const {
  cart,
  addPromoCode,
  addToCart,
  applyGiftCard,
  checkout,
  loadCart,
  modifyQuantity,
  removeFromCart,
  removeGiftCard,
  removePromoCode
} = useCart()
import { useCart } from '@chordcommerce/gatsby-theme-performance'

const {
  cart,
  addPromoCode,
  addToCart,
  applyGiftCard,
  checkout,
  loadCart,
  modifyQuantity,
  removeFromCart,
  removeGiftCard,
  removePromoCode
} = useCart()
﻿
cart
Represents the current shopping cart.
Example:
JS
const { cart } = useCart()
const { cart } = useCart()
﻿
addPromoCode()
Applies a promo code to the current order.
Example:
JS
const promoCode = '50off'
await addPromoCode(promoCode)
const promoCode = '50off'
await addPromoCode(promoCode)
﻿
addToCart()
Adds an item to the current order.
Example:
JS
const variantId = '123'
const quantity = 1
await addToCart(variantId, quantity)
const variantId = '123'
const quantity = 1
await addToCart(variantId, quantity)
﻿
applyGiftCard()
Applies a gift card to the current order.
Example:
JS
const giftCardCode = 'xxxyyyzzz'
await applyGiftCard(giftCardCode)
const giftCardCode = 'xxxyyyzzz'
await applyGiftCard(giftCardCode)
﻿
checkout()
Redirects the browser to Shopify checkout.
Example:
JS
await checkout()
await checkout()
﻿
loadCart()
Reloads the current shopping cart. This is automatically called on every page load and with every other useCart method.
Example:
JS
await loadCart()
await loadCart()
﻿
modifyQuantity()
Updates the quantity of a line item in the current order.
Example:
JS
const lineItemId = '123'
const quantity = 2
await modifyQuantity(lineItemId, quantity)
const lineItemId = '123'
const quantity = 2
await modifyQuantity(lineItemId, quantity)
﻿
modifyLineItem()
Updates a line item in the current order.
Example:
JS
const lineItemId = '123'

// update line item quantity
await modifyQuantity(lineItemId, {
  quantity: 2,
})

// update line item customAttributes
await modifyQuantity(lineItemId, {
  customAttributes: [
    {
      key: 'Est. Shipping Date',
      value: 'March 24, 2022',
    }
  ],
})
const lineItemId = '123'

// update line item quantity
await modifyQuantity(lineItemId, {
  quantity: 2,
})

// update line item customAttributes
await modifyQuantity(lineItemId, {
  customAttributes: [
    {
      key: 'Est. Shipping Date',
      value: 'March 24, 2022',
    }
  ],
})
﻿
removeFromCart()
Removes a line item from the current order.
Example:
JS
const lineItemId = '123'
await removeFromCart(lineItemId)
const lineItemId = '123'
await removeFromCart(lineItemId)
﻿
removeGiftCard()
Removes a gift card from the current order.
Example:
JS
const giftCardCode = 'xxxyyyzzz'
await removeGiftCard(giftCardCode)
const giftCardCode = 'xxxyyyzzz'
await removeGiftCard(giftCardCode)
﻿
removePromoCode()
Removes a promo code from the current order.
Example:
JS
const promoCode = '50off'
await removePromoCode(promoCode)
const promoCode = '50off'
await removePromoCode(promoCode)
﻿
﻿
﻿
Updated 03 Mar 2023
Did this page help you?
useAuth
useUser
useCart

cart

addPromoCode()

addToCart()

applyGiftCard()

checkout()

loadCart()

modifyQuantity()

modifyLineItem()

removeFromCart()

removeGiftCard()

removePromoCode()

﻿
