buildabox

Shopify Build A Box Application Template

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Configuration

Shopify Setup

1. Create a collection the handle 'all' (This is where we are pulling the products from)
2. Give a unique product type to the main product, the addon products that are bundled with the main product, as well as the card product
3. If using product filters, tag the product in this format 'category_value' Ex. Color_Blue

Project Setup

Variable Configuration

In /store/actions.js configure these variables

//Your Shopify Store URL
const STORE_URL = 'https://happy-box-product-builder-app-test.myshopify.com';

//Shopify Product Type of the Featured Product
const MAIN_PRODUCT_TYPE = 'Box';

//Shopify Product Type of the Addon Products that are bundled with the Featured Product
const ADDON_PRODUCT_TYPE = 'Gift'; 

//Shopify Product Type of the Customizable Card Product
const CARD_PRODUCT_TYPE = 'Card';

Filter Component

The filter component requires two props passed into it, options and category options: an array of options for that category category: a string with the category name

<ProductFilter :options="addonFilterOptions('Color')" category="Color"></ProductFilter>

The array of options can be generated by the functions addonFilterOptions([TAG_CATEGORY]) and cardFilterOptions([TAG_CATEGORY])

Warning

When adding a product with a line item property, Shopify's AJAX API ignores the inventory count and doesnt raise an error. For example, if there are 2 products available in inventory, and you attempt to add 3, the 3 products will add successfully. It isn't till checkout where the customer is informed that they've added more than they were allowed. So its best to use this system for stores that do not track inventory.