https://github.com/tylersavery/vue-shopify

A Vue.js application to interface with Shopify through the Storefront API.
https://github.com/tylersavery/vue-shopify

Last synced: 10 days ago
JSON representation

A Vue.js application to interface with Shopify through the Storefront API.

• Host: GitHub
• URL: https://github.com/tylersavery/vue-shopify
• Owner: tylersavery
• License: mit
• Created: 2018-12-07T20:20:23.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2018-12-12T19:05:27.000Z (almost 6 years ago)
• Last Synced: 2024-08-02T02:16:01.814Z (3 months ago)
• Language: JavaScript
• Size: 52.7 KB
• Stars: 58
• Watchers: 5
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# VueShopify

A Vue.js application to interface with Shopify through the Storefront API.

## Getting Started

### Installing and Running Locally

Edit the following settings in `config.js`

* `shopifyDomain`

* `shopifyToken`

Then in your terminal, run the following commands

```

$ npm install 

$ npm install

$ npm run serve

```

Finally, visit [http://localhost:8080/](http://localhost:8080/) in your browser.

## Building For Production

```

$ npm run build

```

## Configuration Details

#### `config.js`

```

shopifyDomain: "YOUR_SHOPIFY_STORE_NAME.myshopify.com", // required

shopifyToken: "SHOPIFY_STOREFRONT_TOKEN", // required

collectionHandle: "SHOPIFY_COLLECTION_HANDLE", // optional, if not set it i will pull all products

localStorageKey: "FOO_BAR", // used as a key for local storage to remember a user's checkout ID

showUnavailableProducts: false, // if true, it will show products that are sold out

productListColumns: 3, // how many columns of products to show

productListColumnsMobile: 1, // how many columns of products to show on mobile

loadingColor: '#41b883', // color of the loading icon

googleAnalyticsId: 'UA-XXXXXXX-XX', // if unset, Google Analytics tracking will not fire

```

#### `environments.js`

Since this is a SPA (single page application) there are certain SEO/OpenGraph settings that need to be configured and compiled outside of the Vue.js application so web crawlers such as Facebook & Twitter can obtain the relevant data.

This file is used when rendering index.pug during the pre-build.js script (which is run when serving and building).

The default settings can be overriden by multiple environments as you will see in the file.