---
title: 'shopify:cart:view'
description: Fires when a buyer opens the cart page or cart drawer.
source_url:
  html: 'https://shopify.dev/docs/api/storefront-events-and-actions/events/cart-view'
  md: >-
    https://shopify.dev/docs/api/storefront-events-and-actions/events/cart-view.md
api_name: storefront-events-and-actions
---

# shopify:cart:view

Fires when a buyer opens the cart, either as a page or as a drawer. The `context` field tells you which.

You can use this to act when a buyer is reviewing what they're about to buy. The event carries the full cart, so you don't need a follow-up request to read it.

A view-event custom element dispatches it, so a storefront wires it up in Liquid rather than in JavaScript. A drawer inside a `<dialog>` fires on open without needing a trigger attribute. See [dispatching view events](https://shopify.dev/docs/api/storefront-events-and-actions/events/dispatch).

`cart` is `null` when no cart has been created yet, which is different from a cart that exists and is empty.

#### Properties

* **context**

  **'page' | 'dialog'**

  **required**

  Whether the buyer opened the cart page or a cart drawer.

* **cart**

  **StandardEventCart | null**

  **required**

  The cart as it appears to the buyer. This is `null` when no cart has been created yet.

* **detail**

  **Record\<string, unknown>**

  Optional custom data for the storefront's internal use. Listeners can read it.

### StandardEventCart

A subset of the \[Storefront API Cart object]\(/docs/api/storefront/latest/objects/Cart) that cart events carry.

* id

  The cart GID.

  ```ts
  string
  ```

* totalQuantity

  The total number of items in the cart.

  ```ts
  number
  ```

* cost

  The total cost of the cart.

  ```ts
  StandardEventCartCost
  ```

* lines

  The lines in the cart.

  ```ts
  StandardEventCartLine[]
  ```

* discountCodes

  The discount codes on the cart.

  ```ts
  StandardEventCartDiscountCode[]
  ```

### StandardEventCartCost

The cost of a cart or a cart line.

* totalAmount

  The total amount.

  ```ts
  MoneyV2
  ```

### MoneyV2

An amount with its currency, matching the Storefront API \[\`MoneyV2\`]\(/docs/api/storefront/latest/objects/MoneyV2) format.

* amount

  A decimal money amount, such as \`29.99\`.

  ```ts
  string
  ```

* currencyCode

  The three-letter currency code, such as \`USD\`.

  ```ts
  string
  ```

### StandardEventCartLine

A single line in the cart.

* id

  The cart line ID. A storefront on the AJAX cart API passes its own line keys through, so don't assume a GID.

  ```ts
  string
  ```

* quantity

  The quantity of merchandise on the line.

  ```ts
  number
  ```

* cost

  The cost of the line.

  ```ts
  StandardEventCartCost
  ```

### StandardEventCartDiscountCode

A discount code on the cart.

* code

  The discount code the buyer entered.

  ```ts
  string
  ```

* applicable

  Whether the discount code applies to the cart.

  ```ts
  boolean
  ```

Examples

### Examples

* ####

  ##### Wrap the cart in Liquid

  ```liquid
  <s-view-event view-event-payload='{{ cart | standard_event_data: "view", context: "dialog" | escape }}'>
    <!-- cart drawer contents -->
  </s-view-event>
  ```

* ####

  ##### Listen for the event

  ```javascript
  document.addEventListener('shopify:cart:view', (event) => {
    if (event.context === 'dialog' && event.cart?.totalQuantity > 0) {
      showFreeShippingProgress(event.cart.cost.totalAmount);
    }
  });
  ```

***