backpackjs
v1.2.4
Published
<h1 align="center">Backpackjs</h1> <br> <p align="center"> <img src="https://i.imgur.com/yGFIcpZ.jpg" width="200"> </p>
Downloads
12
Keywords
Readme
Table of Contents
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
- [x] 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 inCartContext.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