Block variables

Besides ns, config and t, some block types give their markup values of their own. Amounts in them come as { amount, formatted }, such as { amount: 4500, formatted: '£45.00' }, unless the table says otherwise.

Block settings

config holds the block’s settings under the names below, as the merchant set them in the editor. A setting the merchant never changed may be missing, so treat a missing value as the default shown in the editor (see Writing block markup).

Block	Settings
Cart title bar	showCartTitle, showItemsCount, closeButtonStyle ('icon' or 'circle'), closeButtonPosition ('left' or 'right')
Cart items list	showImages, showOptions, linkToProduct, compareAtPrice, savings ('none', 'monetary' or 'percentage'), nestedItems, clearBasket
Checkout buttons	termsCheckbox, ageConfirmationCheckbox, checkoutButton, viewCartButton, continueShoppingButton, shopPay, acceleratedCheckout, lockIcon, installmentsAmount, installmentsProvider, installmentsTermsUrl
Discount input	codeInput, giftCardInput, startOpen
Subtotal area	itemsCount, savings, compareAtPrice, showTaxNote
Announcement bar	layoutType ('hs' or 'vs'), messageDuration (milliseconds)
Message	text, HTML the merchant wrote
Free shipping progress bar	threshold, the goal in the store’s currency, such as 50
Loyalty points	pointsPerSpend
Payment methods	methods, such as ['visa', 'mastercard', 'paypal']

Settings the template adds to a block are in config too, under the names the template gives them. In Minimalist:

Block	Template settings
Cart title bar	titleAlignment ('left' or 'center')
Cart items list	imageShape ('square', 'portrait' or 'natural'), showColumnHeadings
Loyalty points	textAlignment ('left', 'center' or 'right'), showIcon

<div v-if="config.showColumnHeadings !== false" class="ns-items__head">
  <span>{{ t('general.product') }}</span>
  <span>{{ t('general.total') }}</span>
</div>

A block with hideIfEmpty: true in its settings isn’t shown while the cart is empty. Templates set it as a default; Minimalist sets it on the discount input, subtotal area, checkout buttons and loyalty points. There’s no switch for it in the editor.

Cart items list

lines is the cart’s lines, ready to show. With the Nested items setting on, a bundle’s products follow the bundle, marked nested.

Field
key	The line’s key, for actions such as ns.removeItem(line.key)
item	Shopify’s line, for anything not listed here, such as item.quantity
nested	true for a product inside a bundle
title, url	The product’s name and page
image(width)	The image at that width, or null
options	[{ name, value }], such as Size: M. Empty for products without variants.
properties	[{ name, value }] the shopper entered, such as an engraving. Properties whose name starts with _ are left out.
sellingPlan	The subscription’s name, or null
discounts	[{ title, amount }] discounts on this line
price.final, price.compareAt	The unit price, and the higher price to cross out (or null)
total.final, total.compareAt	The same for the whole line
saving	{ amount, percent }, or null if there’s nothing saved or Show savings is None

price.compareAt is the compare-at price when Show compare at prices is on, and otherwise the price before a discount. It’s only set when it’s higher than the price.

<li v-for="line in lines" :key="line.key">
  <img v-if="line.image(200)" :src="line.image(200)" :alt="line.title" />
  <a :href="line.url">{{ line.title }}</a>
  <s v-if="line.total.compareAt">{{ line.total.compareAt.formatted }}</s>
  {{ line.total.final.formatted }}
</li>

Checkout buttons

checkout holds the state of the checkboxes and the checkout itself:

Field
termsAccepted, ageConfirmed	The checkboxes. Bind them with v-model.
requirementsMet	Every required box is ticked
requirementsMissing	The shopper tried to check out with a box unticked
go()	Checks out, if the required boxes are ticked
shopPay()	The same, straight to Shop Pay
installment	{ count, amount, amountFormatted } when Installments amount is 2 or more and the cart isn’t free, otherwise null. amount is a plain number.

A box is required when its setting, Terms checkbox or Age confirmation checkbox, is on.

<label v-if="config.termsCheckbox">
  <input type="checkbox" v-model="checkout.termsAccepted" />
  {{ t('checkout.terms') }}
</label>
<p v-if="checkout.requirementsMissing" role="alert">{{ t('checkout.requirements') }}</p>
<button type="button" @click="checkout.go()">{{ t('checkout.checkout') }}</button>

Discount input

form is the discount code form:

Field
discountCodeToApply	The code field. Bind it with v-model.
submit()	Applies the code
removeDiscountCode(code)	Takes a code off
loading	true while a code is being applied or removed
error, success, message	The outcome of the last attempt, and the text to show

message is one of the texts core.discounts.success, core.discounts.invalid (Shopify can’t apply the code to this cart) or core.discounts.error (the request failed); see the cart’s own texts. The applied codes are in ns.applicableDiscountCodes.

<form @submit.prevent="form.submit()">
  <input type="text" v-model="form.discountCodeToApply" :disabled="form.loading" />
  <button type="submit" :disabled="form.loading">{{ t('discounts.apply') }}</button>
</form>
<p v-if="form.message" :role="form.error ? 'alert' : 'status'">{{ form.message }}</p>

Subtotal area

discounts lists the discounts on the whole cart, as [{ title, amount, amountFormatted }]. amount is a plain number here.

Free shipping progress bar

progress measures the cart total against the block’s Goal:

Field
percent	0 to 100
reached	true once the goal is met
remaining, remainingFormatted	How much more the shopper needs to spend
goal, goalFormatted	The goal

The amounts are plain numbers, each with a Formatted twin. Without a goal set, it’s 50 in the store’s currency.

Loyalty points

pointsEarned is the number of points the order earns: the cart total times the block’s Points per £1 spent, rounded down. It’s 0 when the rate isn’t set.

Announcement bar

The bar’s messages are blocks of their own. childBlockComponents lists them, and activeIndex is the one showing now. With more than one message, activeIndex moves on every Message duration (5000 milliseconds if it isn’t set). The bar shows one at a time:

<Transition name="slide">
  <component
    v-if="childBlockComponents[activeIndex]"
    :key="childBlockComponents[activeIndex].id"
    :is="childBlockComponents[activeIndex].component"
  />
</Transition>