Preamble Utils
A JavaScript utility library for Shopify themes.
Installation
Webpack, Browserify, etc.
npm install preamble-utils --save
// commonjsvar Preamble = ; // es6 modules;
CDN
Unminified
https://unpkg.com/preamble-utils/dist/preamble-utils.js
Minified
https://unpkg.com/preamble-utils/dist/preamble-utils.min.js
API
Arguments expect the format of the output of {{ product | json }}
title: 'Product Title' variants: option1: 'Blue' option2: 'Small' option3: null available: true price: 1399 options: 'Color' 'Size'
findVariantFromOptions(variants: object[], options: object): object | undefined
Find a variant with the given options.
Any option that is not included is considered null.
const options = { option1: 'White' }
is the same as:
const options = { option1: 'White', option2: null, option3: null }
Returns undefined
if none are found.
const variants = title: 'Blue / Small' option1: 'Blue' option2: 'Small' option3: null title: 'Green / Small' option1: 'Green' option2: 'Small' option3: null ; ;// { title: 'Green / Small', option1: 'Green', option2: 'Small', option3: null }
firstAvailableVariant(variants: object[]): object | undefined
Get the first available variant. Returns undefined
if none are available.
const variants = title: 'Blue / Small' available: false title: 'Green / Small' available: true ; // { title: 'Green / Small', available: true }
formatMoney(money: integer, prefix: string): string
Simple money formatting. prefix
defaults to '$'
.
;// '$13.99' ;// '£13.99'
imageSize(url: string, size: string): string
Get the URL to an image size.
const url = 'https://cdn.shopify.com/s/files/1/0383/9765/products/10516_indigo_med_wash_l_z.jpeg?v=1401811137'; ;// http://cdn.shopify.com/s/files/1/0383/9765/products/10516_indigo_med_wash_l_z_large.jpeg?v=1401811137
uniqueOptions(variants: object[], options: object[]): object[]
Get the unique options and its values
const variants = title: 'Blue / Small' option1: 'Blue' option2: 'Small' option3: null title: 'Green / Small' option1: 'Green' option2: 'Small' option3: null ;const options = 'Color' 'Size'; ;// [// { name: 'Color', values: ['Blue', 'Green'] },// { name: 'Size', values: ['Small'] }// ]