# Cart viewed
Learn how to track when a user views a shopping cart.
This event tracks when a user views their shopping cart on an online store.
Cart viewed also automatically records a [Cart abandoned](/reference/event/types/ecommerce/cart-abandoned) event when the session is closed, and a [Product abandoned](/reference/event/types/ecommerce/product-abandoned) event for each product in the cart.
> **When should I track this event?**
>
> Track this event whenever a user views the shopping cart page or summary.
## Implementation
Here is an example of how to track this event:
**JavaScript**
```javascript
import croct from '@croct/plug';
croct.track('cartViewed', {
cart: {
currency: 'USD',
total: 899.99,
items: [
{
index: 0,
product: {
productId: '12345',
name: 'Black iPhone 12',
displayPrice: 899.99
},
quantity: 1,
total: 899.99
}
]
}
});
```
**HTML**
```html
My awesome application
```
**React — JavaScript**
```jsx
import {useCroct} from '@croct/plug-react';
export function Example() {
const croct = useCroct();
const track = () => croct.track('cartViewed', {
cart: {
currency: 'USD',
total: 899.99,
items: [
{
index: 0,
product: {
productId: '12345',
name: 'Black iPhone 12',
displayPrice: 899.99
},
quantity: 1,
total: 899.99
}
]
}
});
return ();
}
```
**React — TypeScript**
```typescript
import {useCroct} from '@croct/plug-react';
import type {ReactElement} from 'react';
export function Example(): ReactElement {
const croct = useCroct();
const track = () => croct.track('cartViewed', {
cart: {
currency: 'USD',
total: 899.99,
items: [
{
index: 0,
product: {
productId: '12345',
name: 'Black iPhone 12',
displayPrice: 899.99
},
quantity: 1,
total: 899.99
}
]
}
});
return ();
}
```
**Next — JavaScript**
```jsx
import {useCroct} from '@croct/plug-next';
export function Example() {
const croct = useCroct();
const track = () => croct.track('cartViewed', {
cart: {
currency: 'USD',
total: 899.99,
items: [
{
index: 0,
product: {
productId: '12345',
name: 'Black iPhone 12',
displayPrice: 899.99
},
quantity: 1,
total: 899.99
}
]
}
});
return ();
}
```
**Next — TypeScript**
```tsx
import {useCroct} from '@croct/plug-next';
import type {ReactElement} from 'react';
export function Example(): ReactElement {
const croct = useCroct();
const track = () => croct.track('cartViewed', {
cart: {
currency: 'USD',
total: 899.99,
items: [
{
index: 0,
product: {
productId: '12345',
name: 'Black iPhone 12',
displayPrice: 899.99
},
quantity: 1,
total: 899.99
}
]
}
});
return ();
}
```
**Vue — JavaScript**
```vue
```
**Vue — TypeScript**
```vue
```
**Nuxt — JavaScript**
```vue
```
**Nuxt — TypeScript**
```vue
```
## Input properties
These are the supported properties:
- `cart`: `object`
The shopping cart being viewed.
- `currency`: `string`
The currency in which the monetary values are expressed in the shopping cart, such as "USD" or "EUR".
We recommend using the 3-letter currency codes defined by the [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) standard. For currencies having no official recognition in the standard, consider using ISO-like codes adopted locally or commercially, such as "XBT" for BitCoin.
- `items`: `Array