The ns object

ns is the cart, as every block’s markup sees it. Its values update as the cart changes, and the markup updates with them.

Amounts are in the smallest unit of the store’s currency: 4500 is £45.00. Each amount has a Formatted twin for display.

Cart data

Name
items	The lines in the cart
itemCount	The total quantity of all lines
subtotal, subtotalFormatted	The total before cart-level discounts
total, totalFormatted	What the shopper pays
totalDiscount, totalDiscountFormatted	The total of all discounts
totalCompareAt, totalCompareAtFormatted	The lines at their compare-at prices
totalSavings, totalSavingsFormatted	totalCompareAt minus total, never below zero
applicableDiscountCodes	The discount codes applied to the cart
isInitialLoading	true until the cart has loaded for the first time
isInitialLoadingError	true if the cart couldn’t be loaded
routes.root, routes.cart, routes.checkout	The store’s home, cart and checkout addresses in the shopper’s language, such as /fr/ and /fr/cart

The lines in items are Shopify’s cart lines, so they have the fields Shopify’s cart API gives them: key, quantity, product_title, variant_title, url, image, final_price, final_line_price, properties and more. In the product list, lines gives you most of these ready to show; see Block variables.

Actions

Name
increaseQuantity(key)	One more of a line
decreaseQuantity(key)	One fewer
setQuantity(key, quantity)	Sets the quantity, for example from a quantity field. 0 removes the line. An empty field, a negative number or text does nothing.
removeItem(key)	Removes the line
clear()	Empties the cart
checkout(params)	Goes to checkout. params are added to the checkout address, such as { payment: 'shop_pay' }.
close()	Closes the drawer

Scripts on the page can stop checkout with the nativeslide:before-checkout event; see Events.

While a change runs, getState(key, state) is true for that line. Use it to show progress:

<button
  type="button"
  :disabled="ns.getState(item.key, 'removing')"
  @click="ns.removeItem(item.key)"
>
  Remove
</button>

The states are increasing, decreasing, updating, removing, and clearing with the key clear.

If a change fails, getError(key) has Shopify’s reason until the next change of that line works:

<p v-if="ns.getError(item.key)" role="alert">{{ ns.getError(item.key) }}</p>

Helpers

Name
formatMoney(amount)	Formats an amount with the store’s money format, such as £45.00