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.

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

Anchor to propertiesProperties

Anchor to context context 'page' | 'dialog' required: Whether the buyer opened the cart page or a cart drawer.
Anchor to cart cart | null required: The cart as it appears to the buyer. This is null when no cart has been created yet.
Anchor to detail 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.
```
string
```
totalQuantity
The total number of items in the cart.
```
number
```
cost
The total cost of the cart.
```
StandardEventCartCost
```
lines
The lines in the cart.
```
StandardEventCartLine[]
```
discountCodes
The discount codes on the cart.
```
StandardEventCartDiscountCode[]
```

StandardEventCartCost

The cost of a cart or a cart line.

totalAmount
The total amount.
```
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`.
```
string
```
currencyCode
The three-letter currency code, such as `USD`.
```
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.
```
string
```
quantity
The quantity of merchandise on the line.
```
number
```
cost
The cost of the line.
```
StandardEventCartCost
```

StandardEventCartDiscountCode

A discount code on the cart.

code
The discount code the buyer entered.
```
string
```
applicable
Whether the discount code applies to the cart.
```
boolean
```

Examples

Wrap the cart in Liquid

<s-view-event view-event-payload='{{ cart | standard_event_data: "view", context: "dialog" | escape }}'>

</s-view-event>

Examples

Wrap the cart in 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

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

Was this page helpful?