Storefront API

The NativeSlide snippet adds window.NativeSlide to every page of the store. Themes, other apps and agency scripts can use it to open the cart drawer, read and change the cart, and listen for events such as an item being added or the shopper heading to checkout.

If you only need the drawer to open from your own button, you probably don’t need any code: see Opening the cart.

Waiting until it’s ready

window.NativeSlide exists as soon as our script runs, but the cart is only available once it is ready: the store’s cart settings have loaded and the cart has been read from Shopify. Pick whichever of these suits your script.

// A promise. It never rejects.
const { enabled } = await window.NativeSlide.ready;

// An event. It fires once, so add the listener before it fires,
// for example if your script runs before ours.
document.addEventListener('nativeslide:ready', (event) => {
  if (event.detail.enabled) {
    // …
  }
});

// A queue, which works whether your script runs before or after ours
(window.NativeSlideQueue = window.NativeSlideQueue || []).push((NativeSlide) => {
  if (NativeSlide.enabled) NativeSlide.open();
});

All three give you the same { enabled, version }. Queued functions get window.NativeSlide as their argument. Functions queued before the API is ready run once it is, in order; a function pushed after that runs straight away. If one throws, the error is logged and the others still run.

NativeSlide.enabled is null until the API is ready, then true or false. It is false when the store hasn’t published a NativeSlide cart, or the snippet couldn’t start. The API is still there, but every action fails with the error code disabled. Use that to fall back to the theme’s own cart.

The API is also ready, with enabled: true, if reading the cart from Shopify failed. In that case NativeSlide.Cart.cart stays null until the cart is read again.

Before it’s ready

You can call anything at any time:

Cart actions, such as Cart.addItem(), wait until the API is ready and then run.
open(), close() and toggle() do nothing, and isOpen() is false.
checkout() fails with disabled.
The Cart properties are empty: null, [], 0, '' or {}.
on(), off(), version and formatMoney() work as usual.

Everything on `NativeSlide`


`version`, `enabled`, `ready`, `variant`	Above and Drawer and checkout
`open()`, `close()`, `toggle()`, `isOpen()`	Drawer and checkout
`checkout(params)`	Drawer and checkout
`Cart.cart`, `Cart.items` and the other `Cart` properties	Reading the cart
`Cart.addItem()` and the other `Cart` actions	Changing the cart
`on(name, listener)`, `off(name, listener)`	Events
`formatMoney()`, `translate()`, `getVariantMetafield()`, `getProductMetafield()`	Helpers and types

Good to know

Prices are in the smallest unit of the store’s currency, as in Shopify’s cart API: 4500 is £45.00. Use NativeSlide.formatMoney() to display them.
Cart actions return promises that always resolve, never reject. Check result.ok. checkout() is the exception: it returns its result straight away, not a promise.
Changes made through the API look the same in the drawer as the shopper’s own: a line shows as busy while a change to it runs, and Shopify’s error appears under it if it fails.
NativeSlide.version is the snippet release, such as 1.1.0.
If the snippet is on the page twice, the second copy does nothing and leaves the first one’s window.NativeSlide in place.