Events

The snippet sends DOM events on document, named nativeslide: followed by the event name. The details are in event.detail.

document.addEventListener('nativeslide:item-added', (event) => {
  console.log('Added', event.detail.items);
});

NativeSlide.on(name, listener) listens for the same events. It calls listener(detail, event), so you get the details directly and the DOM event as the second argument. It returns a function that stops listening:

const stop = NativeSlide.on('open', ({ variant }) => {
  analytics.track('Cart opened', { variant });
});

// later
stop();

NativeSlide.off(name, listener) stops a listener too. You can call on() and off() at any time, before the API is ready as well.

Event	detail	When
ready	{ enabled, version }	The API is ready. Fires once.
open	{ variant }	The drawer opened
close	{ variant }	The drawer closed
cart-updated	{ cart }	The drawer read a cart that differs from the last one, whoever changed it
item-added	{ items, source }	Lines were added to the cart
error	{ key, message }	A change to a line failed, or an add from the theme failed
before-checkout	{ cart, params }	The shopper is about to go to checkout. Cancel the event to stop it.
checkout	{ cart, params }	The shopper is going to checkout

Details

• ready: enabled is false when the store has no published NativeSlide cart. version is the snippet release, such as 1.1.0. A listener added after the event has fired isn’t called, so use NativeSlide.ready if your script may run late.
• open, close: variant is the ID of the cart the shopper sees, as in NativeSlide.variant. They fire however the drawer opened or closed: the shopper, the theme’s cart link or your script.
• cart-updated: cart is the whole cart, as in NativeSlide.Cart.cart. It also fires for the first read, just before ready.
• item-added: items are the added lines as Shopify’s /cart/add.js returns them. source is api for adds through NativeSlide.Cart.addItem() and addItems(), and theme for every other add, including other apps’. It fires before the cart-updated that follows the add.
• error: message is Shopify’s message, such as “You can only add 2 of Canvas tote to the cart.”, or the cart’s own error text if the request didn’t complete. key is the key passed to the change (the line’s key, or the variant ID if that was used), clear for a failed clear(), or add when an add-to-cart form that NativeSlide took over failed. It fires for changes from the drawer and the API alike. Failed adds, discount codes, note and attributes through the API don’t fire it; check the action’s result instead.
• before-checkout, checkout: cart is the cart, or null if it couldn’t be read. params are the parameters passed to checkout(), or {}. before-checkout is the only event you can cancel; see Stopping checkout.