vue-slate-tools

1.0.2 • Public • Published

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=

Readme

Keywords

none

Package Sidebar

Install

npm i vue-slate-tools

Weekly Downloads

1

Version

1.0.2

License

MIT

Unpacked Size

91.1 kB

Total Files

75

Last publish

Collaborators

  • ezracelli