For theme developers

This page is for developers building or customising a theme. It describes what the NativeSlide snippet does on the page so you can avoid surprises.

Cart requests

The snippet watches the page’s requests to Shopify’s cart API (/cart.js, /cart/add, /cart/change, /cart/update and /cart/clear, with or without .js and a language prefix such as /fr), whether they use fetch or XMLHttpRequest, and updates the drawer from the responses. Keep using the cart API as you normally would; you don’t need to tell NativeSlide about changes. A request that gets something other than JSON back, such as a form post that redirects, makes the snippet read /cart.js again.

If your code changes the cart some other way, for example through the Storefront GraphQL API, call NativeSlide.Cart.refresh() afterwards.

Add to cart forms

With Replace the theme’s cart on, the snippet handles the submit event of every form that posts to the store’s /cart/add (also /cart/add.js and language-prefixed addresses such as /fr/cart/add). It listens in the capture phase and stops the event, so your own submit listeners don’t run. It sends the form’s fields to /cart/add.js and, with Auto-open on, opens the drawer. All the usual fields work: id, quantity, properties[...], selling_plan. Forms inside the drawer are left alone.

While the request runs, the button that submitted the form (or the form’s first [type="submit"]) gets the loading class and aria-disabled="true".

If the add fails, the snippet looks for Dawn’s error element (.product-form__error-message, inside .product-form__error-message-wrapper) in the form’s product-form element, or in the form’s parent, and shows Shopify’s message there. On other themes, listen for the nativeslide:error event with key: 'add' to show it your own way:

document.addEventListener('nativeslide:error', (event) => {
  if (event.detail.key === 'add') {
    alert(event.detail.message);
  }
});

Links and the theme’s cart

• Clicks on links to the cart page (/cart or /<language>/cart on your store’s domain) open the drawer, whatever the settings. Links inside the drawer itself, such as View cart, go to the cart page as usual.
• With Replace the theme’s cart on, <cart-drawer> and <cart-notification> elements are hidden, and if the page has an element with the ID cart-icon-bubble, its content is re-rendered through Shopify’s Section Rendering API after every cart change, as Dawn does.
• Items count selector and Subtotal selector replace the text of the matching elements with the cart’s item count and formatted subtotal after every change.

Classes on the page

While the drawer is open, body has the class ns-cart-open. Use it, for example, to hide a floating chat button behind the drawer:

body.ns-cart-open .chat-button {
  display: none;
}

Your own integration

To open the drawer from your theme, react to cart events or add products from your own UI, use the Storefront API.