> For the complete documentation index, see [llms.txt](https://docs.chord.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chord.co/chord-oms/shopify/developer-tools/next-js/sdk-reference/usecart.md).

# useCart

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

## Example

{% code title="useCart" %}

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

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

{% endcode %}

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

{% code title="addPromoCode" %}

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

const { addPromoCode } = useCart()

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

{% endcode %}

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

{% code title="addToCart" %}

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

const { addToCart } = useCart()

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

{% endcode %}

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

{% code title="applyGiftCard" %}

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

const { applyGiftCard } = useCart()

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

{% endcode %}

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

{% code title="checkout" %}

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

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

{% endcode %}

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

{% code title="loadCart" %}

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

const { loadCart } = useCart()

await loadCart()
```

{% endcode %}

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

{% code title="modifyQuantity" %}

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

const { modifyQuantity } = useCart()

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

{% endcode %}

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

{% code title="removeFromCart" %}

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

const { removeFromCart } = useCart()

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

{% endcode %}

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

{% code title="removeGiftCard" %}

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

const { removeGiftCard } = useCart()

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

{% endcode %}

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

{% code title="removePromoCode" %}

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

const { removePromoCode } = useCart()

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

{% endcode %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.chord.co/chord-oms/shopify/developer-tools/next-js/sdk-reference/usecart.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.