# JavaScript events for developers

<Hint type="info" title="Applies to:">
  All FoxEcom themes
</Hint>

**FoxEcom themes** use JavaScript extensively to optimize performance and power interactive features such as Quick View.

If you're building custom functionality or integrating third-party apps, you can listen for these JavaScript events to run your own code at the right time. All event objects are plain JavaScript objects, so you can access and modify them as needed.

## 1. Page loaded

The event is triggered when the HTML document has been fully parsed, and all deferred scripts have finished downloading and running.

```javascript
document.addEventListener('page:loaded', function() {
  // Page has loaded and theme assets are ready
})
```

## 2. Product successfully added to the Ajax cart

[Product object returned](https://shopify.dev/docs/api/liquid/objects/product).

```javascript
document.addEventListener('product-ajax:added', function(evt) {
  console.log(evt.detail.product);
});
```

## 3. Product could not be added to the Ajax cart

The error message will let you know the problem. Most of the time, it is quantity-related.

```javascript
document.addEventListener('product-ajax:error', function(evt) {
  console.log(evt.detail.errorMessage);
});
```

## 4. Cart updated

JavaScript updates the cart object once the quantity is modified. This event is triggered after the cart markup has been updated and is open to customization.

[Cart object returned](https://help.shopify.com/en/themes/liquid/objects/cart).

```javascript
document.addEventListener('cart:updated', function(evt) {
    console.log(evt.detail.cart);
});
```

## 5. Quick view modal has been opened

The first time the modal is opened, certain elements, like the add-to-cart form, are lazy-loaded. These elements are not immediately available.

```javascript
document.addEventListener('quick-view:open', function(evt) {
  console.log(evt.detail.productUrl);
});
```

## 6. Quick view modal has been loaded

Only fires the first time the modal is opened.

```javascript
document.addEventListener('quick-view:loaded', function(evt) {
  console.log(evt.detail.productUrl);
});
```

## 7. Variant selection changed

[Variant object returned](https://shopify.dev/docs/api/liquid/objects/variant).

```javascript
document.addEventListener('variant:changed', function(evt) {
    console.log(evt.detail.variant);
});
```

## 8. Collection page is refreshed

Fired when the collection page is re-rendered after filters are updated.

```javascript
document.addEventListener('collection:rerendered', function() {
    console.log('collection refreshed');
});
```

## 9. Trigger cart drawer to refresh

Set the `open` parameter to `false` if you don't want the cart drawer to be open after the update.

```javascript
document.dispatchEvent(new CustomEvent('cart:refresh', {
  bubbles: true, detail: { open: true }
}));
```

## 10. Product recommendations loaded

Fired when product recommendations or related products are loaded dynamically (e.g. via AJAX).

This event is useful for **third-party apps** that need to re-initialize UI elements such as badges.

```js
document.addEventListener('recommendations:loaded', (event) => {
  console.log(event, 'related products loaded complete');
  // Run your custom callback or re-init logic here
});
```