# JavaScript events for developers

Minimog theme uses JavaScript to enhance loading times and ensure that features work fast.

If you want to connect with events after they occur to integrate custom scripts or link with third-party apps, we offer some post-event options.

All objects returned are vanilla JS objects and can be edited however you see fit.

## 1. **Page loaded** <a href="#id-1.-page-loaded" id="id-1.-page-loaded"></a>

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 <a href="#id-2.-product-successfully-added-to-the-ajax-cart" id="id-2.-product-successfully-added-to-the-ajax-cart"></a>

[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 <a href="#id-3.-product-could-not-be-added-to-the-ajax-cart" id="id-3.-product-could-not-be-added-to-the-ajax-cart"></a>

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 <a href="#id-4.-cart-updated" id="id-4.-cart-updated"></a>

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 loaded** <a href="#id-6.-quick-view-modal-has-been-loaded" id="id-6.-quick-view-modal-has-been-loaded"></a>

Only fires the first time the modal is opened.

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

## **6. Variant selection changed** <a href="#id-7.-variant-selection-changed" id="id-7.-variant-selection-changed"></a>

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

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

## **7. Collection page is refreshed** <a href="#id-8.-collection-page-is-refreshed" id="id-8.-collection-page-is-refreshed"></a>

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

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

## **8.** Trigger cart drawer to refresh <a href="#id-9.-trigger-cart-drawer-to-refresh" id="id-9.-trigger-cart-drawer-to-refresh"></a>

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 }
}));
```

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FHZm2we23gBU4ASSHW68D%2FFoxify%20-%20Inblog%20banner%201.jpg?alt=media&#x26;token=ff4efa41-3c5c-49ea-849a-343cd1dfc255" alt=""><figcaption><p><a href="https://foxecom.com/products/foxify-shopify-app?utm_source=HelpCenter&#x26;utm_medium=banner&#x26;utm_campaign=customer+success">Try Foxify free now</a></p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/minimog-theme/faqs/generic/javascript-events-for-developers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
