backpackjs

Backpackjs

Simple and snappy ecommerce in a flash.

Table of Contents

Expand / Collapse

• Introduction
• Getting Started
  • Requirements
  • Installation
  • Environment Variables
  • Usage
• Netlify Deployments
  • Configuration
  • Add Environment Variables
• Features
  • Roadmap
  • Bonus Features
• Authors
• License

Introduction

One sentence description of what this is. Forage shabby chic bicycle rights flannel tumeric. Polaroid master cleanse squid sartorial, godard letterpress migas intelligentsia seitan keytar gastropub.

Getting Started

Pabst cred cloud bread cardigan, quinoa semiotics drinking vinegar slow-carb. Post-ironic selfies echo park glossier pour-over mustache ramps four dollar toast pok pok next level. Kickstarter man braid jianbing offal biodiesel hammock venmo sartorial.

Food truck ethical poke, listicle photo booth shaman master cleanse vape whatever palo santo single-origin coffee tofu jean shorts hella truffaut. Leggings kinfolk pop-up normcore migas mlkshk hoodie blog readymade.

Requirements

• node >= 12.18.0
• yarn >= 1.22.5

Installation

# Clone this repository
$ git clone https://github.com/packdigital/backpackjs-theme

# Go into the repository root
$ cd backpackjs-theme

# Install dependencies (must use yarn)
$ yarn install

Environment Variables

# Create .env file
$ touch .env

Add values for the following env vars:

• BACKPACK_API_TOKEN
• BACKPACK_SITE_ID
• SHOPIFY_DOMAIN
• SHOPIFY_STOREFRONT_API_TOKEN
• SHOPIFY_STOREFRONT_API_VERSION

Usage

Build your project at least once:

$ yarn build

Then try running one of these commands:

$ yarn dev

$ yarn start

Netlify Deployments

Configuration

• Set up project to deploy from github repo
• Set build command to yarn build
• Set publish directory to storefront/out

Add Environment Variables

• Navigate to Build & deploy > Environment
• Click Edit Variables
• Add values for the following:
  • BACKPACK_API_TOKEN
  • BACKPACK_SITE_ID
  • SHOPIFY_DOMAIN
  • SHOPIFY_STOREFRONT_API_TOKEN
  • SHOPIFY_STOREFRONT_API_VERSION

Note: make sure your project has a yarn.lock file in the root or has the NETLIFY_USE_YARN env variable set to true

Features

• 🛒  Shopping Cart powered by Shopify Buy SDK
• 📡  Real-time content preview via. [Fast Refresh]
• 💆‍♀️  Headless Account Managements via. /accounts/*
• 📹  Headless Preview via. Next.js preview

Roadmap

• Steal README.md
• Abstract away Next.js pages (e.g. pages/products, etc.)
• Abstract away account endpoints (e.g. api/customerGet.js, etc.)
• Ensure current hooks provide all data required (e.g. recharge, etc.)
• Ensure current hooks expose all actions required (e.g. useGiftNote, etc.)
• Publish document.ready, window.load events
• Publish route change event
• Publish page specific events (e.g. view collection, etc.)
• Publish action specific events (e.g. remove from cart, etc.)

Bonus Features

• Better prop validation & error messages (see: @backpackjs/cart)
• Abstract away platform specific code (e.g. buy-sdk, etc.)
• Create generic interfaces to connect platform specific code
• Make raise function in CartContext.jsx a utility
• Replace usePrevious.js with an npm package
• Identifying state vs persisted state changes in @backpackjs/account
• Identifying state vs persisted state changes in @backpackjs/cart
• Move common functions in actionsAsync.js to utils

Authors

License

MIT