vue-slate-tools
A modern development toolkit for Shopify themes, semi-compatible with `vue-cli` v2
Last updated 9 months ago by ezracelli .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-slate-tools 
SYNC missed versions from official npm registry.

npm version

vue-slate-tools

⚠️ DO NOT INSTALL THIS PACKAGE ⚠️

There is NO further documentation for this package besides what is provided below.

Create the "Backend"

In order for this setup to be of any use, you have to connect to your shop's frontend via a public Shopify App (I followed this tutorial). This will serve as your "backend", a proxy for Shopify's REST API.

The following environment variables (see below) will be injected into your frontend via vue-slate-tools's webpack build.

SHOPIFY_APP_HOST=
SHOPIFY_APP_SHOP=
SHOPIFY_THEME_ID=

Use them in your frontend like so:

import axios from 'axios'

const {
  SHOPIFY_APP_HOST: shopifyAppHost,
  SHOPIFY_APP_SHOP: shopifyAppShop,
  SHOPIFY_THEME_ID: shopifyThemeId,
} = process.env

axios.get(`${shopifyAppHost}/shopify?shop=${shopifyAppShop}.myshopify.com`)

// now, make calls to your Shopify App to get JSON from your store

Create the Frontend

$ yarn global add vue-cli
  • Init a project
$ vue init webpack $PROJECT_NAME
  • Delete the node_modules directory. You can also delete the build directory and index.html in the project root (vue-slate-tools will be building your project using a custom template)

  • Edit your package.json's devDependencies to the following and install

{
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/runtime": "^7.4.4",
    "babel-core": "^7.0.0-bridge.0",
    "babel-loader": "^8.0.5"
  },
}

$ yarn install
  • Install this package, vue-slate-tools, as a dev dependency
$ yarn add --dev vue-slate-tools

Customization

  • Edit your package.json scripts to accommodate for slate
{
  "scripts": {
    "start": "slate-tools start",
    "watch": "slate-tools start --skipFirstDeploy",
    "build": "slate-tools build",
    "upload": "slate-tools deploy",
    "deploy": "slate-tools build && slate-tools deploy",
    "zip": "slate-tools build && slate-tools zip"
  },
}
  • Download the contents of the liquid directory to src/liquid in your project

  • Create an .env file in your project's root directory with the normal Slate environment variables

SLATE_STORE=
SLATE_PASSWORD=
SLATE_THEME_ID=
SLATE_IGNORE_FILES=

Note: Your project's file structure should now look like this:

$PROJECT_NAME
│     ...
│     .env
│
└─── src
    │     App.vue
    │     main.js
   ...
    └─── liquid

  • Add to your .env your Shopify App URL (see above) shop name (without .myshopify.com), and theme ID
SHOPIFY_APP_HOST=
SHOPIFY_APP_SHOP=
SHOPIFY_THEME_ID=

Current Tags

  • 1.0.2                                ...           latest (9 months ago)

3 Versions

  • 1.0.2                                ...           9 months ago
  • 1.0.1                                ...           10 months ago
  • 1.0.0                                ...           10 months ago
Maintainers (1)
Downloads
Today 0
This Week 3
This Month 3
Last Day 0
Last Week 0
Last Month 1
Dependencies (74)
Dev Dependencies (1)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |