JavaScript SDK events

In order to listen to Snipcart events, you can use the on method:

Snipcart.events.on('{eventName}', callback);

To unbind from an event, you can call the function returned from the on method:

const unsubscribe = Snipcart.events.on('{eventName}', callback);
unsubscribe();

Public events

Many of these events are useful to display a particular notice to your customers or to integrate with third-party analytics tools.

item.adding

Before an item gets added to the cart, an item.adding event is triggered. The callback function receives the ParsedCartItem as an argument.

Snipcart.events.on('item.adding', (parsedCartItem) => {
    console.log(parsedCartItem);
});

item.added

After an item gets added to the cart, an item.added event is triggered. The callback function receives the added CartItem as an argument.

Snipcart.events.on('item.added', (cartItem) => {
    console.log(cartItem);
});

item.updated

When an item in the cart gets updated, an item.updated event is triggered. The callback function receives the updated CartItem as an argument.

Snipcart.events.on('item.updated', (cartItem) => {
    console.log(cartItem);
});

item.removed

When an item in the cart gets removed, an item.removed event is triggered. The callback function receives the removed CartItem as an argument.

Snipcart.events.on('item.removed', (cartItem) => {
    console.log(cartItem);
});

cart.created

When a cart gets created (e.g., when an item gets added for the first time), a cart.created event is triggered. The callback function receives the created CartState as an argument.

Snipcart.events.on('cart.created', (cartState) => {
    console.log(cartState);
});

cart.confirmed

When an order is placed and the cart gets confirmed successfully, a cart.confirmed event is triggered. The callback function receives the confirmed CartState as an argument.

Snipcart.events.on('cart.confirmed', (cartConfirmResponse) => {
    console.log(cartConfirmResponse);
});

cart.confirm.error

When an order is placed but fails confirmation, a cart.confirm.error event is triggered. The callback function receives the BaseCartConfirmError as an argument.

Snipcart.events.on('cart.confirm.error', (confirmError) => {
    console.log(confirmError);
});

cart.reset

When the cart is reset successfully, a cart.reset event is triggered. The callback function receives the confirmed CartState as an argument.

Snipcart.events.on('cart.reset', (cartState) => {
    console.log(cartState);
});

payment.failed

When an order gets rejected due to a payment error, a payment.failed event is triggered. The callback function receives the BaseCartConfirmError as an argument.

Snipcart.events.on('payment.failed', (paymentError) => {
    console.log(paymentError);
});

discount.applied

When a discount gets applied to the cart, a discount.applied event is triggered. The callback function receives the applied Discount as an argument.

Snipcart.events.on('discount.applied', (discount) => {
    console.log(discount);
});

shipping.selected

When a shipping method gets selected in the cart, a shipping.selected event is triggered. The callback function receives the selected ShippingMethod as an argument.

Snipcart.events.on('shipping.selected', (shippingMethod) => {
    console.log(shippingMethod);
});

language.updated

When the language of the cart is updated, a language.updated event is triggered. The callback function receives an object containing the updated language code as well as any specified overrides ({lang: string, overrides: {[key: string]: string}}).

Snipcart.events.on('discount.applied', (languageUpdatedResponse) => {
    console.log(`Language was changed to ${languageUpdatedResponse.lang}`);
});

customer.registered

When customers create an account so they can access their customer dashboard, a customer.registered event is triggered. The callback function receives the Customer as an argument.

Snipcart.events.on('customer.registered', (customer) => {
    console.log(`Customer ${customer.email} just created an account.`);
});

customer.signedin

When a customer signs into their customer dashboard, a customer.signedin event is triggered. The callback function receives the Customer as an argument.

Snipcart.events.on('customer.signedin', (customer) => {
    console.log(`Customer ${customer.email} just signed in.`);
});

customer.signedout

When a customer signs out, a customer.signedout event is triggered. The callback doesn't receive any parameters.

Snipcart.events.on('customer.signedout', () => {
    console.log('Customer signed out');
});

snipcart.initialized

When Snipcart has finished initializing, a snipcart.initialized event is triggered. The callback function takes the SnipcartState as an argument.

Snipcart.events.on('snipcart.initialized', (snipcartState) => {
    console.log(snipcartState);
});

snipcart.initialization.error

When Snipcart fails to initialize, a snipcart.initialization.error event is triggered. In this case, the callback function takes no argument.

Snipcart.events.on('snipcart.initialization.error', () => {
    console.log('Failed to initialize Snipcart');
});

Theme events

theme.routechanged

After a route in the cart has changed, a theme.routechanged event is triggered. The callback function receives an object containing the path of the previous and current route as an argument ({from: string, to: string}).

This event can be useful if you want to make DOM manipulations inside the cart.

Snipcart.events.on('theme.routechanged', (routesChange) => {
    if (routesChange.from === "/" && routesChange.to !== "/") {
        console.log('cart opened');
    }

    if (routesChange.from !== "/" && routesChange.to === "/") {
        console.log('cart closed');
    }
})

Browser context events

summary.checkout_clicked

When a customer clicks on a show cart button, a summary.checkout_clicked event is triggered. In this case, the callback function takes no argument.

Snipcart.events.on('summary.checkout_clicked', () => {
    console.log('checkout clicked')
});