---
title: useCart
slug: oms/usecart
docTags: 
createdAt: 2022-11-08T14:20:24.000Z
---

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

## Example 

::::CodeDrawer{title="useCart" isResponseExpanded="false" autoGeneratedAnchorSlug="usecart" legacyHash="6RjDsjxnH3C6c2fnXtXRs"}
:::CodeblockTabsExamples
```javascript
import { useCart } from '~/hooks/actions'

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

:::CodeblockTabsResponses
```javascript
```
:::
::::

## 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:**

::::CodeDrawer{title="addPromoCode" isResponseExpanded="false" autoGeneratedAnchorSlug="addpromocode-1" legacyHash="NbzA99dYM6yofSW_8vjZA"}
:::CodeblockTabsExamples
```javascript
import { useCart } from '~/hooks/actions'

const { addPromoCode } = useCart()

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

:::CodeblockTabsResponses
```javascript
```
:::
::::

### addToCart&#x20;

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:**

::::CodeDrawer{title="addToCart" isResponseExpanded="false" autoGeneratedAnchorSlug="addtocart-1" legacyHash="yjTIQVetQqp12br7vGz3f"}
:::CodeblockTabsExamples
```javascript
import { useCart } from '~/hooks/actions'

const { addToCart } = useCart()

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

:::CodeblockTabsResponses
```javascript
```
:::
::::

### applyGiftCard&#x20;

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:**

::::CodeDrawer{title="applyGiftCard" isResponseExpanded="false" autoGeneratedAnchorSlug="applygiftcard-1" legacyHash="Rdtot8yKFfWwX3QabQDRT"}
:::CodeblockTabsExamples
```javascript
import { useCart } from '~/hooks/actions'

const { applyGiftCard } = useCart()

const giftCardCode = 'xxxyyyzzz'
await applyGiftCard(giftCardCode)
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

### checkout&#x20;

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:**

::::CodeDrawer{title="checkout" isResponseExpanded="false" autoGeneratedAnchorSlug="checkout-1" legacyHash="JqJ2TqUHeubw6PZLb8PbO"}
:::CodeblockTabsExamples
```javascript
import { useCart } from '~/hooks/actions'

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

:::CodeblockTabsResponses
```javascript
```
:::
::::

### loadCart&#x20;

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:**

::::CodeDrawer{title="loadCart" isResponseExpanded="false" autoGeneratedAnchorSlug="loadcart-1" legacyHash="MhkJab9J3aUFsFDuTt1nQ"}
:::CodeblockTabsExamples
```javascript
import { useCart } from '~/hooks/actions'

const { loadCart } = useCart()

await loadCart()
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

### modifyQuantity&#x20;

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:&#x20;**

::::CodeDrawer{title="modifyQuantity" isResponseExpanded="false" autoGeneratedAnchorSlug="modifyquantity-1" legacyHash="fuoHKeh0tBgrTkB2e-KWr"}
:::CodeblockTabsExamples
```javascript
import { useCart } from '~/hooks/actions'

const { modifyQuantity } = useCart()

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

:::CodeblockTabsResponses
```javascript
```
:::
::::

### removeFromCart&#x20;

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:&#x20;**

::::CodeDrawer{title="removeFromCart" isResponseExpanded="false" autoGeneratedAnchorSlug="removefromcart-1" legacyHash="S0SU7REnfGktN4Y8J0-Zq"}
:::CodeblockTabsExamples
```javascript
import { useCart } from '~/hooks/actions'

const { removeFromCart } = useCart()

const lineItemId = '123'
await removeFromCart(lineItemId)
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

### removeGiftCard&#x20;

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:&#x20;**

::::CodeDrawer{title="removeGiftCard" isResponseExpanded="false" autoGeneratedAnchorSlug="removegiftcard-1" legacyHash="gSKqeJmLf1Zxyddj5mWoN"}
:::CodeblockTabsExamples
```javascript
import { useCart } from '~/hooks/actions'

const { removeGiftCard } = useCart()

const giftCardId = 'xxxyyyzzz'
await removeGiftCard(giftCardId)
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

### removePromoCode&#x20;

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.&#x20;

**Example:&#x20;**

::::CodeDrawer{title="removePromoCode" isResponseExpanded="false" autoGeneratedAnchorSlug="removepromocode-1" legacyHash="5nPw7lWWzUcjTs1Ts-wG6"}
:::CodeblockTabsExamples
```javascript
import { useCart } from '~/hooks/actions'

const { removePromoCode } = useCart()

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

:::CodeblockTabsResponses
```javascript
```
:::
::::