# Events

# What are the available events?

### Products

<table border="1" id="bkmrk-event-description-pr" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 50.0596%;"></col><col style="width: 50.0596%;"></col></colgroup><tbody><tr><td>**Event**  
</td><td>**Description**

</td></tr><tr><td data-col-size="sm" data-end="77" data-start="58">`product.loaded`</td><td data-col-size="lg" data-end="160" data-start="77">Fired when the product component has finished mounting and is marked as loaded.</td></tr><tr><td data-col-size="sm" data-end="189" data-start="161">`product.images-updating`</td><td data-col-size="lg" data-end="277" data-start="189">Fired when the product images are about to be updated because the image set changed.</td></tr><tr><td data-col-size="sm" data-end="305" data-start="278">`product.images-updated`</td><td data-col-size="lg" data-end="389" data-start="305">Fired after the product images have been updated. Provides the updated `images`.</td></tr><tr><td data-col-size="sm" data-end="419" data-start="390">`product.variant-selected`</td><td data-col-size="lg" data-end="532" data-start="419">Fired when the selected product variant changes. Provides the variant, quantity, price, and total sale price.</td></tr><tr><td data-col-size="sm" data-end="564" data-start="533">`product.attribute-selected`</td><td data-col-size="lg" data-end="668" data-start="564">Fired when one or more product attributes are selected or changed. Provides the selected attributes.</td></tr><tr><td data-col-size="sm" data-end="698" data-start="669">`product.quantity-updated`</td><td data-col-size="lg" data-end="769" data-start="698">Fired when the product quantity changes. Provides the new quantity.</td></tr><tr><td data-col-size="sm" data-end="811" data-start="770">`product.subscription-plan-deselected`</td><td data-col-size="lg" data-end="889" data-start="811">Fired when the currently selected subscription plan is removed/deselected.</td></tr><tr><td data-col-size="sm" data-end="929" data-start="890">`product.subscription-plan-selected`</td><td data-col-size="lg" data-end="1016" data-start="929">Fired when a subscription plan is selected. Provides the plan ID and selected plan.</td></tr><tr><td data-col-size="sm" data-end="1041" data-start="1017">`product.add-to-cart`</td><td data-col-size="lg" data-end="1186" data-start="1041">Fired before the product is sent to the cart API. This event can modify the cart payload or return `false`/`null` to prevent adding the item.</td></tr><tr><td data-col-size="sm" data-end="1213" data-start="1187">`product.added-to-cart`</td><td data-col-size="lg" data-end="1317" data-start="1213">Fired after the cart API successfully adds the product. Provides the returned cart/add-to-cart data.</td></tr><tr><td data-col-size="sm" data-end="1352" data-start="1318">`product.failed-adding-to-cart`</td><td data-col-size="lg" data-end="1434" data-start="1352">Fired when adding the product to the cart fails. Provides the returned errors.</td></tr></tbody></table>

### Listings

<table border="1" id="bkmrk-event-description-li" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 50.0596%;"></col><col style="width: 50.0596%;"></col></colgroup><tbody><tr><td>**Event**  
</td><td>**Description**  
</td></tr><tr><td>`listings.loaded`</td><td>Fired after the listings component has mounted and its initial data has been loaded.</td></tr><tr><td>`listings.update`</td><td>Listener event that triggers a listings update/navigation to the supplied URL.</td></tr><tr><td>`listings.updating`</td><td>Fired after a listings request returns but before the response data is applied to the Vue component. Can modify the returned listings data.</td></tr><tr><td>`listings.updated`</td><td>Fired after the returned listings data has been applied to the component and Vue has completed the next tick.</td></tr><tr><td>`listings.navigated`</td><td>Fired when listings data is updated through a navigation that does not involve the component's normal history push/replace handling.</td></tr></tbody></table>

# How do I run a custom event?

You can run your own custom event using the `runEvent()` method:

```javascript
window.Aero.runEvent('acme', { foo: 'bar' });
```

And listen for it wherever needed:

```javascript
window.AeroEvents.on('acme', (data) => {
    console.log(data);
});
```