Shwing JS

What is it?

A Shopify Storefront API toolkit for Frontend Devs on a time budget.

dev: Code Style

The coding preferences of this repo can be described as:

• descriptive, helpful, and minimal
• functional, i.e. currying etc.
• classless
• immutable
• data-safe
• clean, concise scopes
• lazy, asynchronous, and (where appropriate) reactive

But most importantly, do the thing.

Setup:

Be sure to check for the latest version here: https://www.npmjs.com/package/@madebywink/shwing

CDN: (i.e. Webflow embed)

<script src="https://cdn.jsdelivr.net/npm/@madebywink/[email protected]/dist/index.min.js"></script>

const Product = shwing.ShopifyProduct(productOptions)
const Cart = shwing.ShopifyProduct(cartOptions)

NPM: (i.e. Svelte component)

npm install --save shwing

import {
    ShopifyProduct,
    ShopifyCart
} from '@madebywink/shwing'

const Product = ShopifyProduct(productOptions)
const Cart = ShopifyProduct(cartOptions)

Cart:

Basic usage:

const options = {
    GQL_ENDPOINT_URL: "https://shopify-store-name.myshopify.com/api/2020-07/graphql",
    STOREFRONT_ACCESS_TOKEN: "aabc1234d5e6f7g0etc",
    onInit: (cartDetails, lineItems, cartNote, customAttributes) => {
        // do stuff
    },
    onUpdateState: (cartDetails, lineItems, cartNote, customAttributes) => {
        renderLineItems(lineItems)
        replaceCartDetails(cartDetails)
    }
}

const Cart = ShopifyCart(options)

window.onload = async function() {
    await Cart.init()
}

function renderLineItems(lineItems) {
    // do stuff
}

function replaceCartDetails(cartDetails) {
    // do stuff
}

Product:

Basic usage:

const options = {
    GQL_ENDPOINT_URL: "", /* https://shopify-store-name.myshopify.com/api/2020-07/graphql */
    STOREFRONT_ACCESS_TOKEN: "", /* long string of numbers and letters */
    onInit: (defaultProduct, variants) => {
        hydrateProductPage(defaultProduct, variants)
        addFormHandlers()
    },
    handle: "your-product-slug"
}

const Product = ShopifyProduct(options)

window.onload = async function() {
    await Product.init()
}

function hydrateProductPage (defaultProduct, variants) {
    //do stuff
}

function addFormHandlers () {
    // do stuff
}

ShopifyProduct:

const cartOptions = {...}
const Cart = ShopifyCart(cartOptions)

The Cart requires an options object of the following shape:

const options = {
    GQL_ENDPOINT_URL: "", /* https://shopify-store-name.myshopify.com/api/2020-07/graphql */
    STOREFRONT_ACCESS_TOKEN: "", /* long string of numbers and letters */
    onInit: (cartDetails, lineItems, cartNote, customAttributes) => {
        // do stuff
    },
    onUpdateState: (cartDetails, lineItems, cartNote, customAttributes) => {
        // do stuff
    }
}

Cart will be a returned Object containing various methods, including an initialization function, Cart mutation functions, getters, and setters.

These methods are only safe to use AFTER initialization.

{
    init() => undefined,
    query: {  
        cartState(onThisUpdate: function) => undefined,
    },
    mutate: {  
        lineItemQuantity(variantId: "...", quantity: 1) => undefined,
        removeLineItem(variantId: "...") => undefined,
        cartNote() => undefined,
        cartCustomAttributes() => undefined,
    },
    get: {
        lineItems() => [...],
        cartDetails() => ({...}),
        cartNote() => "...",
        customAttributes() => [...],
        _checkoutId() => ""
    },
    set: {
        cartNote("..."),
        customAttributes([{key: "", value: ""}])
    }
}

ShopifyCart

const productOptions = {...}
const Product = ShopifyCart(productOptions)

The Product requires an options object of the following shape:

const options = {
    GQL_ENDPOINT_URL: "", /* https://shopify-store-name.myshopify.com/api/2020-07/graphql */
    STOREFRONT_ACCESS_TOKEN: "", /* long string of numbers and letters */
    onInit: (cartDetails, lineItems, cartNote, customAttributes) => {
        // do stuff
    },
    onUpdateState: (cartDetails, lineItems, cartNote, customAttributes) => {
        // do stuff
    }
}

Product will be a returned Object containing various methods, including an initialization function, an addToCart funciton, getters, and setters.

These methods are only safe to use AFTER initialization.

{
    init() => undefined,
    api: {
        addToCart(customAttributes: [{key: "", value: ""}]) => undefined
    },
    get: {
        selectedVariant() => ({...}),
        deliveryDate() => "...",
        defaultProduct() => ({...}),
        variants() => [...],
        _checkoutId() => "..."
    },
    set: {
        selectedVariant({...}),
        deliveryDate("...")
    }
}

Shwing!