---
url: /events.md
---
# Events

When using jQuery, you can bind custom actions to various events. For example, after adding an item to the cart you can update the order total on the page, etc.

## Add to cart (order:itemadded)

```javascript
$(document).on('order:itemadded', function(event, data) {
    // custom action
});
```

The event passes an object with the following content:

```javascript
{
    item: {
        id: 1, // internal product id
        name: 'abc' // product name
    }
}
```

## Successful newsletter subscription (newsletter:success)

```javascript
$(document).on('newsletter:success', function(event, data) {
    // custom action
});
```

The event passes an object with the following content:

```javascript
{
    email: 'info@example.org' // registered email
}
```

## Failed newsletter subscription (newsletter:error)

```javascript
$(document).on('newsletter:error', function(event, data) {
    // custom action
});
```

The event passes an object with the following content:

```javascript
{
    email: 'info@example.org'
}
```

## Page change (listing:changed)

Fires when the page changes during dynamic loading.

```javascript
$('div.list').on('listing:changed', function(event, data) {
    // custom action
});
```

## Dynamic content loaded (reload)

Fires after an [`i:dynamic`](/components#i-dynamic) block is (re)rendered — both when `reload()` is called explicitly and when a `lazy="auto"` block loads on its own near the viewport. The event bubbles from the freshly inserted element, which is `event.target`.

```javascript
$(document).on('reload', 'div.list', function(event) {
    // custom action
});
```

### Re-initializing JavaScript on the new content

The block is *replaced*, not filled in: every element inside it is brand new, so anything the template initialised on page load — a slider, a tooltip, a lightbox — knows nothing about it. Sliders are the usual casualty: the markup looks right, the strip just does not swipe.

Re-run the initialiser from the event, scoped to `event.target` so already-initialised instances elsewhere on the page are left alone:

```javascript
function initProductSliders(root) {
    $(root).find('.product-slider:not(.swiper-container-initialized)').each(function () {
        new Swiper(this, { /* … */ });
    });
}

initProductSliders(document);
$(document).on('reload', function (event) {
    initProductSliders(event.target);
});
```

Two details matter. Scope to `event.target` — calling a page-wide initialiser again would construct a second instance over every slider that already works. And keep the `:not(.swiper-container-initialized)` guard (or your library's equivalent), because a block can be reloaded more than once.

Delegated event handlers (`$(document).on('click', '.selector', …)`) need nothing — they keep working across reloads by design. Only code that touches elements directly has to be re-run.

## Lazy menu loaded

Fires after menu content is loaded in `<i:menu-container>`.

```javascript
$(document).on('menu:loaded', function(event) {
    // custom action
});
```