├── static
    ├── .gitkeep
    └── moltin-light-hex.svg
├── .eslintignore
├── config
    ├── prod.env.js
    ├── test.env.js
    ├── dev.env.js
    └── index.js
├── screenshot.png
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── router
    │   └── index.js
    ├── services
    │   └── moltin.js
    ├── App.vue
    └── components
    │   ├── Home.vue
    │   ├── Cart.vue
    │   ├── Product.vue
    │   ├── Payment.vue
    │   └── Checkout.vue
├── test
    ├── unit
    │   ├── .eslintrc
    │   ├── specs
    │   │   └── Hello.spec.js
    │   ├── index.js
    │   └── karma.conf.js
    └── e2e
    │   ├── specs
    │       └── test.js
    │   ├── custom-assertions
    │       └── elementCount.js
    │   ├── runner.js
    │   └── nightwatch.conf.js
├── .gitignore
├── .editorconfig
├── .postcssrc.js
├── .babelrc
├── index.html
├── .eslintrc.js
├── README.md
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/*.js
2 | config/*.js
3 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   NODE_ENV: '"production"'
3 | }
4 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moltin/vue-demo-store/HEAD/screenshot.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moltin/vue-demo-store/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/test/unit/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "mocha": true
 4 |   },
 5 |   "globals": {
 6 |     "expect": true,
 7 |     "sinon": true
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/config/test.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var devEnv = require('./dev.env')
3 | 
4 | module.exports = merge(devEnv, {
5 |   NODE_ENV: '"testing"'
6 | })
7 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 | 
4 | module.exports = merge(prodEnv, {
5 |   NODE_ENV: '"development"'
6 | })
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | test/unit/coverage
 8 | test/e2e/reports
 9 | selenium-debug.log
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 | 
3 | module.exports = {
4 |   "plugins": {
5 |     // to edit target browsers: use "browserlist" field in package.json
6 |     "autoprefixer": {}
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", { "modules": false }],
 4 |     "stage-2"
 5 |   ],
 6 |   "plugins": ["transform-runtime"],
 7 |   "comments": false,
 8 |   "env": {
 9 |     "test": {
10 |       "presets": ["env", "stage-2"],
11 |       "plugins": [ "istanbul" ]
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/test/unit/specs/Hello.spec.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Hello from '@/components/Hello'
 3 | 
 4 | describe('Hello.vue', () => {
 5 |   it('should render correct contents', () => {
 6 |     const Constructor = Vue.extend(Hello)
 7 |     const vm = new Constructor().$mount()
 8 |     expect(vm.$el.querySelector('.hello h1').textContent)
 9 |       .to.equal('Welcome to Your Vue.js App')
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import router from './router'
 6 | 
 7 | Vue.config.productionTip = false
 8 | 
 9 | /* eslint-disable no-new */
10 | new Vue({
11 |   el: '#app',
12 |   router,
13 |   template: '<App/>',
14 |   components: { App }
15 | })
16 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>moltin-vue-demo</title>
 6 |     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" />
 7 |   </head>
 8 |   <body>
 9 |     <div class="ui text container" style="padding-top: 7em;">
10 |       <div id="app"></div>
11 |     </div>
12 |     <!-- built files will be auto injected -->
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/test/unit/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | Vue.config.productionTip = false
 4 | 
 5 | // require all test files (files that ends with .spec.js)
 6 | const testsContext = require.context('./specs', true, /\.spec$/)
 7 | testsContext.keys().forEach(testsContext)
 8 | 
 9 | // require all src files except main.js for coverage.
10 | // you can also change this to match only the subset of files that
11 | // you want coverage for.
12 | const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
13 | srcContext.keys().forEach(srcContext)
14 | 


--------------------------------------------------------------------------------
/test/e2e/specs/test.js:
--------------------------------------------------------------------------------
 1 | // For authoring Nightwatch tests, see
 2 | // http://nightwatchjs.org/guide#usage
 3 | 
 4 | module.exports = {
 5 |   'default e2e tests': function (browser) {
 6 |     // automatically uses dev Server port from /config.index.js
 7 |     // default: http://localhost:8080
 8 |     // see nightwatch.conf.js
 9 |     const devServer = browser.globals.devServerURL
10 | 
11 |     browser
12 |       .url(devServer)
13 |       .waitForElementVisible('#app', 5000)
14 |       .assert.elementPresent('.hello')
15 |       .assert.containsText('h1', 'Welcome to Your Vue.js App')
16 |       .assert.elementCount('img', 1)
17 |       .end()
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // http://eslint.org/docs/user-guide/configuring
 2 | 
 3 | module.exports = {
 4 |   root: true,
 5 |   parser: 'babel-eslint',
 6 |   parserOptions: {
 7 |     sourceType: 'module'
 8 |   },
 9 |   env: {
10 |     browser: true,
11 |   },
12 |   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
13 |   extends: 'standard',
14 |   // required to lint *.vue files
15 |   plugins: [
16 |     'html'
17 |   ],
18 |   // add your custom rules here
19 |   'rules': {
20 |     // allow paren-less arrow functions
21 |     'arrow-parens': 0,
22 |     // allow async-await
23 |     'generator-star-spacing': 0,
24 |     // allow debugger during development
25 |     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/test/e2e/custom-assertions/elementCount.js:
--------------------------------------------------------------------------------
 1 | // A custom Nightwatch assertion.
 2 | // the name of the method is the filename.
 3 | // can be used in tests like this:
 4 | //
 5 | //   browser.assert.elementCount(selector, count)
 6 | //
 7 | // for how to write custom assertions see
 8 | // http://nightwatchjs.org/guide#writing-custom-assertions
 9 | exports.assertion = function (selector, count) {
10 |   this.message = 'Testing if element <' + selector + '> has count: ' + count
11 |   this.expected = count
12 |   this.pass = function (val) {
13 |     return val === this.expected
14 |   }
15 |   this.value = function (res) {
16 |     return res.value
17 |   }
18 |   this.command = function (cb) {
19 |     var self = this
20 |     return this.api.execute(function (selector) {
21 |       return document.querySelectorAll(selector).length
22 |     }, [selector], function (res) {
23 |       cb.call(self, res)
24 |     })
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from '@/components/Home'
 4 | import Product from '@/components/Product'
 5 | import Cart from '@/components/Cart'
 6 | import Checkout from '@/components/Checkout'
 7 | import Payment from '@/components/Payment'
 8 | 
 9 | Vue.use(Router)
10 | 
11 | export default new Router({
12 |   routes: [
13 |     {
14 |       path: '/',
15 |       name: 'Home',
16 |       component: Home
17 |     },
18 |     {
19 |       path: '/cart',
20 |       name: 'Cart',
21 |       component: Cart
22 |     },
23 |     {
24 |       path: '/checkout',
25 |       name: 'Checkout',
26 |       component: Checkout
27 |     },
28 |     {
29 |       path: '/products/:slug',
30 |       name: 'Product',
31 |       component: Product
32 |     },
33 |     {
34 |       path: '/payments/:orderId',
35 |       name: 'Payment',
36 |       component: Payment
37 |     }
38 |   ]
39 | })
40 | 


--------------------------------------------------------------------------------
/src/services/moltin.js:
--------------------------------------------------------------------------------
 1 | import { gateway as MoltinGateway } from '@moltin/sdk'
 2 | 
 3 | const Moltin = MoltinGateway({
 4 |   client_id: 'EdP3Gi1agyUF3yFS7Ngm8iyodLgbSR3wY4ceoJl0d2'
 5 | })
 6 | 
 7 | export default {
 8 | 
 9 |   getHomepageProducts () {
10 |     return Moltin.Products.Filter({}).With('main_image').Limit(8).All()
11 |   },
12 | 
13 |   findBySlug (slug) {
14 |     return Moltin.Products.Filter({
15 |       eq: {
16 |         slug: slug
17 |       }
18 |     }).With(['main_image', 'brands']).Limit(1).All()
19 |   },
20 | 
21 |   getCart () {
22 |     return Moltin.Cart().Items()
23 |   },
24 | 
25 |   addToCart (productId, qty) {
26 |     return Moltin.Cart().AddProduct(productId, qty)
27 |   },
28 | 
29 |   removeFromCart (itemId) {
30 |     return Moltin.Cart().RemoveItem(itemId)
31 |   },
32 | 
33 |   checkout (customerId, billing, shipping) {
34 |     return Moltin.Cart().Checkout(customerId, billing, shipping)
35 |   },
36 | 
37 |   pay (orderId, paymentData) {
38 |     return Moltin.Orders.Payment(orderId, paymentData)
39 |   }
40 | 
41 | }
42 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div class="ui huge inverted top fixed menu">
 4 |       <div class="ui text container">
 5 |         <router-link to="/" class="header item">
 6 |           <img src="static/moltin-light-hex.svg" class="ui mini image" style="margin-right: 1.5em;">Vue.js Store
 7 |         </router-link>
 8 |         <router-link to="/cart" class="right item">
 9 |           Cart ({{ cart.data.length }} items)
10 |         </router-link>
11 |       </div>
12 |     </div>
13 |     <router-view :cart="cart" @cart-updated="onCartUpdated"></router-view>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import MoltinService from './services/moltin.js'
19 | 
20 | export default {
21 |   name: 'app',
22 |   data () {
23 |     return {
24 |       cart: {
25 |         data: []
26 |       }
27 |     }
28 |   },
29 |   beforeMount () {
30 |     MoltinService.getCart().then((response) => {
31 |       this.cart = response
32 |     })
33 |   },
34 |   methods: {
35 |     onCartUpdated (cart) {
36 |       this.cart = cart
37 |     }
38 |   }
39 | }
40 | </script>
41 | 
42 | <style>
43 | </style>
44 | 


--------------------------------------------------------------------------------
/test/unit/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // This is a karma config file. For more details see
 2 | //   http://karma-runner.github.io/0.13/config/configuration-file.html
 3 | // we are also using it with karma-webpack
 4 | //   https://github.com/webpack/karma-webpack
 5 | 
 6 | var webpackConfig = require('../../build/webpack.test.conf')
 7 | 
 8 | module.exports = function (config) {
 9 |   config.set({
10 |     // to run in additional browsers:
11 |     // 1. install corresponding karma launcher
12 |     //    http://karma-runner.github.io/0.13/config/browsers.html
13 |     // 2. add it to the `browsers` array below.
14 |     browsers: ['PhantomJS'],
15 |     frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
16 |     reporters: ['spec', 'coverage'],
17 |     files: ['./index.js'],
18 |     preprocessors: {
19 |       './index.js': ['webpack', 'sourcemap']
20 |     },
21 |     webpack: webpackConfig,
22 |     webpackMiddleware: {
23 |       noInfo: true
24 |     },
25 |     coverageReporter: {
26 |       dir: './coverage',
27 |       reporters: [
28 |         { type: 'lcov', subdir: '.' },
29 |         { type: 'text-summary' }
30 |       ]
31 |     }
32 |   })
33 | }
34 | 


--------------------------------------------------------------------------------
/test/e2e/runner.js:
--------------------------------------------------------------------------------
 1 | // 1. start the dev server using production config
 2 | process.env.NODE_ENV = 'testing'
 3 | var server = require('../../build/dev-server.js')
 4 | 
 5 | server.ready.then(() => {
 6 |   // 2. run the nightwatch test suite against it
 7 |   // to run in additional browsers:
 8 |   //    1. add an entry in test/e2e/nightwatch.conf.json under "test_settings"
 9 |   //    2. add it to the --env flag below
10 |   // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
11 |   // For more information on Nightwatch's config file, see
12 |   // http://nightwatchjs.org/guide#settings-file
13 |   var opts = process.argv.slice(2)
14 |   if (opts.indexOf('--config') === -1) {
15 |     opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
16 |   }
17 |   if (opts.indexOf('--env') === -1) {
18 |     opts = opts.concat(['--env', 'chrome'])
19 |   }
20 | 
21 |   var spawn = require('cross-spawn')
22 |   var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
23 | 
24 |   runner.on('exit', function (code) {
25 |     server.close()
26 |     process.exit(code)
27 |   })
28 | 
29 |   runner.on('error', function (err) {
30 |     server.close()
31 |     throw err
32 |   })
33 | })
34 | 


--------------------------------------------------------------------------------
/test/e2e/nightwatch.conf.js:
--------------------------------------------------------------------------------
 1 | require('babel-register')
 2 | var config = require('../../config')
 3 | 
 4 | // http://nightwatchjs.org/gettingstarted#settings-file
 5 | module.exports = {
 6 |   src_folders: ['test/e2e/specs'],
 7 |   output_folder: 'test/e2e/reports',
 8 |   custom_assertions_path: ['test/e2e/custom-assertions'],
 9 | 
10 |   selenium: {
11 |     start_process: true,
12 |     server_path: require('selenium-server').path,
13 |     host: '127.0.0.1',
14 |     port: 4444,
15 |     cli_args: {
16 |       'webdriver.chrome.driver': require('chromedriver').path
17 |     }
18 |   },
19 | 
20 |   test_settings: {
21 |     default: {
22 |       selenium_port: 4444,
23 |       selenium_host: 'localhost',
24 |       silent: true,
25 |       globals: {
26 |         devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
27 |       }
28 |     },
29 | 
30 |     chrome: {
31 |       desiredCapabilities: {
32 |         browserName: 'chrome',
33 |         javascriptEnabled: true,
34 |         acceptSslCerts: true
35 |       }
36 |     },
37 | 
38 |     firefox: {
39 |       desiredCapabilities: {
40 |         browserName: 'firefox',
41 |         javascriptEnabled: true,
42 |         acceptSslCerts: true
43 |       }
44 |     }
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Moltin Vue Demo Store
 2 | 
 3 | > A barebones [moltin](https://moltin.com/) demo store built with [Vue.js](https://vuejs.org/). View a [demo here](https://moltin.github.io/vue-demo-store/#/).
 4 | 
 5 | 📚 [moltin.com](https://moltin.com)
 6 | 
 7 | This is a simple example of a Vue store using moltin. You can view products, add to cart and checkout. The store uses our [JS-SDK](https://github.com/moltin/js-sdk).
 8 | 
 9 | ![Demo Image](https://raw.githubusercontent.com/moltin/vue-demo-store/master/screenshot.png)
10 | 
11 | ## ⛽️ Usage
12 | 
13 | ``` bash
14 | # install dependencies
15 | npm install
16 | 
17 | # serve with hot reload at localhost:8080
18 | npm run dev
19 | 
20 | # build for production with minification
21 | npm run build
22 | 
23 | # build for production and view the bundle analyzer report
24 | npm run build --report
25 | 
26 | # run unit tests
27 | npm run unit
28 | 
29 | # run e2e tests
30 | npm run e2e
31 | 
32 | # run all tests
33 | npm test
34 | ```
35 | 
36 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
37 | 
38 | ## ❤️ Contributing
39 | 
40 | We love community contributions. Here's a quick guide if you want to submit a pull request:
41 | 
42 | 1.  Fork the repository
43 | 2.  Add a tests if possible
44 | 3.  Commit your changes (see note below)
45 | 4.  Submit your PR with a brief description explaining your changes
46 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: 'static',
10 |     assetsPublicPath: 'https://moltin.github.io/vue-demo-store/',
11 |     publicPath: '/vue-demo-store/',
12 |     productionSourceMap: true,
13 |     // Gzip off by default as many popular static hosts such as
14 |     // Surge or Netlify already gzip all static assets for you.
15 |     // Before setting to `true`, make sure to:
16 |     // npm install --save-dev compression-webpack-plugin
17 |     productionGzip: false,
18 |     productionGzipExtensions: ['js', 'css'],
19 |     // Run the build command with an extra argument to
20 |     // View the bundle analyzer report after build finishes:
21 |     // `npm run build --report`
22 |     // Set to `true` or `false` to always turn it on or off
23 |     bundleAnalyzerReport: process.env.npm_config_report
24 |   },
25 |   dev: {
26 |     env: require('./dev.env'),
27 |     port: 8080,
28 |     autoOpenBrowser: true,
29 |     assetsSubDirectory: 'static',
30 |     assetsPublicPath: '/',
31 |     proxyTable: {},
32 |     // CSS Sourcemaps off by default because relative paths are "buggy"
33 |     // with this option, according to the CSS-Loader README
34 |     // (https://github.com/webpack/css-loader#sourcemaps)
35 |     // In our experience, they generally work as expected,
36 |     // just be aware of this issue when enabling this option.
37 |     cssSourceMap: false
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 |   <div>
 4 |     <div class="ui items" v-for="product in products.data" :key="product.id">
 5 |       <div class="item">
 6 |         <router-link :to="'/products/' + product.slug" class="ui small image">
 7 |           <img :src="getProductThumb(product)" alt="">
 8 |         </router-link>
 9 |         <div class="content">
10 |           <router-link :to="'/products/' + product.slug" class="header">
11 |             {{ product.name }}
12 |           </router-link>
13 |           <div class="meta">{{ product.meta.display_price.with_tax.formatted }}</div>
14 |           <div class="description">{{ product.description }}</div>
15 |         </div>
16 |       </div>
17 |     </div>
18 |   </div>
19 | 
20 | </template>
21 | 
22 | <script>
23 | import MoltinService from '../services/moltin.js'
24 | 
25 | export default {
26 |   name: 'home',
27 |   data () {
28 |     return {
29 |       products: {}
30 |     }
31 |   },
32 |   beforeMount () {
33 |     MoltinService.getHomepageProducts().then((response) => {
34 |       this.products = response
35 |     })
36 |   },
37 |   methods: {
38 |     getProductThumb: function (product) {
39 |       var placeholder = 'https://placeholdit.imgix.net/~text?txtsize=69&txt=824%C3%971050&w=824&h=1050'
40 |       try {
41 |         var fileId = product.relationships.main_image.data.id
42 | 
43 |         var file = this.products.included.main_images.find(function (el) {
44 |           return fileId === el.id
45 |         })
46 | 
47 |         return file.link.href || placeholder
48 |       } catch (e) {
49 |         return placeholder
50 |       }
51 |     }
52 |   }
53 | }
54 | </script>
55 | 
56 | <!-- Add "scoped" attribute to limit CSS to this component only -->
57 | <style>
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/components/Cart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |       <div class="ui warning message" v-if="cart.data.length == 0">
 4 |         <div class="header">Your cart is empty</div>
 5 |         <p>You'll need to add some items to the cart before you can checkout.</p>
 6 |       </div>
 7 | 
 8 |       <div v-if="cart.data.length > 0">
 9 |         <div class="ui divided items">
10 |           <div class="item" v-for="item in cart.data" :key="item.id">
11 |             <div class="ui small image">
12 |               <img v-bind:src="item.image.href" alt="">
13 |             </div>
14 |             <div class="content">
15 |               <div class="header">{{ item.name }}</div>
16 |               <div class="meta">{{ item.quantity }}x {{ item.meta.display_price.with_tax.value.formatted }}</div>
17 |               <button class="ui basic icon right floated button" role="button" v-on:click.prevent="removeFromCart(item.id)">
18 |                 <i aria-hidden="true" class="remove icon"></i>
19 |               </button>
20 |             </div>
21 |           </div>
22 |         </div>
23 |         <div class="ui divider"></div>
24 | 
25 |         <div class="ui large clearing segment">
26 |           <strong>Sub total:</strong> {{ cart.meta.display_price.with_tax.formatted }}
27 |           <span>
28 |             <router-link :to="'/checkout'" class="ui black right floated button">Checkout</router-link>
29 |           </span>
30 |         </div>
31 |       </div>
32 |     </div>
33 | </template>
34 | <script>
35 | import MoltinService from '../services/moltin.js'
36 | 
37 | export default {
38 |   name: 'product',
39 |   props: ['cart'],
40 |   methods: {
41 |     removeFromCart (itemId) {
42 |       MoltinService.removeFromCart(itemId).then((response) => {
43 |         this.$emit('cart-updated', response)
44 |       })
45 |     }
46 |   }
47 | }
48 | </script>
49 | <style></style>
50 | 


--------------------------------------------------------------------------------
/static/moltin-light-hex.svg:
--------------------------------------------------------------------------------
1 | <svg id="all-logos" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 315.07685 337.8195"><defs><linearGradient id="linear-gradient" x1="141.10109" y1="121.89421" x2="161.99985" y2="204.71523" gradientUnits="userSpaceOnUse"><stop offset="0.01093" stop-color="#e67417"/><stop offset="0.99952" stop-color="#e62f17"/></linearGradient><linearGradient id="New_Gradient_Swatch" x1="157.53505" y1="146.08214" x2="157.53505" y2="244.76161" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f2bb30"/><stop offset="0.30905" stop-color="#e67417"/><stop offset="1" stop-color="#e62f17"/></linearGradient><linearGradient id="linear-gradient-2" x1="195.59505" y1="189.53959" x2="202.97741" y2="155.26436" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient></defs><title>light-hex</title><path d="M236.30763,126.46783a5.25933,5.25933,0,0,0-2.62735-4.55313l-73.51423-42.443a5.26427,5.26427,0,0,0-5.25526,0l-73.51422,42.443a5.25932,5.25932,0,0,0-2.62736,4.55313v84.886a5.25574,5.25574,0,0,0,2.62736,4.55092l73.51422,42.443a5.26421,5.26421,0,0,0,5.25526,0l73.51423-42.443a5.25575,5.25575,0,0,0,2.62735-4.55092Z" fill="#fff"/><path d="M91.62543,210.41282a5.97283,5.97283,0,0,1-2.98641-5.17261v-43.096a42.65112,42.65112,0,0,1,2.15134-14.58677c2.5067-6.76608,7.46437-13.38529,17.29164-17.28905,18.82967-7.47985,37.44026,2.63328,47.95411,17.62525,8.82827,12.58845,13.98071,17.59354,25.0818,26.092,9.82978,7.52517,40.6576,21.059,45.32012-5.898v37.1526a5.97282,5.97282,0,0,1-2.98642,5.17261l-62.92668,36.33074a5.97283,5.97283,0,0,1-5.97282,0Z" fill="url(#linear-gradient)"/><path d="M91.62543,210.41282l62.92668,36.33074a5.97283,5.97283,0,0,0,5.97282,0l62.92668-36.33074a5.97282,5.97282,0,0,0,2.98642-5.17261v-37.1526c0-27.51959-30.69537-29.79159-46.515-7.92007-12.53865,17.33535-18.09249,23.542-34.8771,29.64554-19.64344,7.14307-37.27489,3.26972-47.30206-6.53946A29.86883,29.86883,0,0,1,88.639,162.1442v43.096A5.97283,5.97283,0,0,0,91.62543,210.41282Z" fill="url(#New_Gradient_Swatch)"/><path d="M226.438,168.08761c0-27.51956-30.69537-29.79161-46.51508-7.92007-2.17681,3.00961-4.14032,5.67712-5.99144,8.07353,2.1361,1.81448,4.48411,3.67581,7.18638,5.74454C190.94767,181.51077,221.77547,195.04462,226.438,168.08761Z" opacity="0.3" fill="url(#linear-gradient-2)"/></svg>


--------------------------------------------------------------------------------
/src/components/Product.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="ui items">
 4 |       <div class="item">
 5 |         <div class="ui medium image">
 6 |           <img v-if="product.data" :src="product.included.main_images[0].link.href" alt="">
 7 |         </div>
 8 |         <div class="content">
 9 |           <div v-if="product.data" class="header">{{ product.data[0].name }}</div>
10 |           <div class="description">
11 |             <p v-if="product.data">{{ product.data[0].meta.display_price.with_tax.formatted }}</p>
12 |             <div v-if="product.data" class="ui label">SKU: {{ product.data[0].sku }}</div>
13 |           </div>
14 |             <div class="extra">
15 |               <div class="ui action input">
16 |                 <input type="number" placeholder="Quantity" v-model="qty">
17 |                 <button class="ui orange button" role="button" v-on:click.prevent="addToCart(product.data[0].id, qty)">
18 |                   <i aria-hidden="true" class="plus cart icon"></i>Add to Cart
19 |                 </button>
20 |             </div>
21 |           </div>
22 |         </div>
23 |       </div>
24 |     </div>
25 |     <h3 class="ui header">About this product</h3>
26 |     <p v-if="product.data">{{ product.data[0].description }}</p>
27 |     <div class="ui divider"></div>
28 |     <table class="ui celled table">
29 |       <thead class="">
30 |         <tr class="">
31 |             <th colspan="2" class="">Attributes</th>
32 |         </tr>
33 |       </thead>
34 |       <tbody class="">
35 |         <tr class="">
36 |             <td class="">Material</td>
37 |             <td class=""></td>
38 |         </tr>
39 |         <tr class="">
40 |             <td class="">Max watt.</td>
41 |             <td class=""></td>
42 |         </tr>
43 |         <tr class="">
44 |             <td class="">Bulb qty.</td>
45 |             <td class=""></td>
46 |         </tr>
47 |         <tr class="">
48 |             <td class="">Finish</td>
49 |             <td class=""></td>
50 |         </tr>
51 |         <tr class="">
52 |             <td class="">Fitting</td>
53 |             <td class=""></td>
54 |         </tr>
55 |       </tbody>
56 |     </table>
57 |   </div>
58 | </template>
59 | <script>
60 | import MoltinService from '../services/moltin.js'
61 | 
62 | export default {
63 |   name: 'product',
64 |   data () {
65 |     return {
66 |       product: {},
67 |       qty: 1
68 |     }
69 |   },
70 |   beforeMount () {
71 |     // TODO: This might not resolve before the template is built. Add a workaround.
72 |     MoltinService.findBySlug(this.$route.params.slug).then((response) => {
73 |       this.product = response
74 |     })
75 |   },
76 |   methods: {
77 |     addToCart: function (productId, qty) {
78 |       MoltinService.addToCart(productId, qty).then((response) => {
79 |         this.$emit('cart-updated', response)
80 |         this.qty = 1
81 |       })
82 |     }
83 |   }
84 | }
85 | </script>
86 | <style>
87 | </style>
88 | 


--------------------------------------------------------------------------------
/src/components/Payment.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="row">
 3 | 
 4 |       <div class="ui message" v-bind:class="{ error: isError }" v-if="errors">
 5 |         <div class="header">
 6 |           {{ errors[0].title }}
 7 |         </div>
 8 |         {{ errors[0].detail }}
 9 |       </div>
10 | 
11 |       <form class="ui form">
12 |         <h1 class="ui dividing header">Payment Details</h1>
13 | 
14 |         <div class="field">
15 |           <div class="two fields">
16 |             <div class="field">
17 |               <input type="text"class="form-control" id="first-name" name="First Name" placeholder="First Name" v-model="payment_data.first_name" required>
18 |             </div>
19 |             <div class="field">
20 |               <input type="text" class="form-control" id="last-name" name="Last Name" placeholder="Last Name" v-model="payment_data.last_name" required>
21 |             </div>
22 |           </div>
23 |         </div>
24 | 
25 |         <div class="field">
26 |           <div class="two fields">
27 |             <div class="twelve wide field">
28 |               <input type="text"class="form-control" id="card-number" name="Card Number" placeholder="Card Number" v-model="payment_data.number" required>
29 |             </div>
30 |             <div class="four wide field">
31 |               <input type="text" class="form-control" id="cvv" name="CVV" placeholder="CVV" v-model="payment_data.verification_value" required>
32 |             </div>
33 |           </div>
34 |         </div>
35 | 
36 |         <div class="field">
37 |           <div class="two fields">
38 |             <div class="eight wide field">
39 |               <input type="text"class="form-control" id="expiry-month" name="Expiry Month" placeholder="Expiry Month" v-model="payment_data.month" required>
40 |             </div>
41 |             <div class="eight wide field">
42 |               <input type="text" class="form-control" id="expiry-year" name="Expiry Year" placeholder="Expiry Year" v-model="payment_data.year" required>
43 |             </div>
44 |           </div>
45 |         </div>
46 | 
47 |         <button class="btn btn-primary" v-on:click.prevent="pay()">Complete Order</button>
48 |       </form>
49 | 
50 |     </div>
51 | </template>
52 | <script>
53 | import MoltinService from '../services/moltin.js'
54 | 
55 | export default {
56 |   name: 'payment',
57 |   data () {
58 |     return {
59 |       isError: false,
60 |       errors: '',
61 |       payment_data: {
62 |         gateway: 'stripe',
63 |         method: 'purchase',
64 |         first_name: '',
65 |         last_name: '',
66 |         number: '',
67 |         month: '',
68 |         year: '',
69 |         verification_value: ''
70 |       },
71 |       message: ''
72 |     }
73 |   },
74 |   methods: {
75 |     pay () {
76 |       MoltinService.pay(this.$route.params.orderId, this.payment_data).then((respond) => {
77 |         this.message = 'Order complete!'
78 |       }).catch((err) => {
79 |         this.isError = true
80 |         this.errors = err.errors
81 |       })
82 |     }
83 |   }
84 | }
85 | </script>
86 | <style></style>
87 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "moltin-vue-demo",
 3 |   "version": "1.0.0",
 4 |   "description": "A demo store built with moltin & VueJS",
 5 |   "author": "Jmz <jamesowers@gmail.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "node build/dev-server.js",
 9 |     "start": "node build/dev-server.js",
10 |     "build": "node build/build.js",
11 |     "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
12 |     "e2e": "node test/e2e/runner.js",
13 |     "test": "npm run unit && npm run e2e",
14 |     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
15 |     "deploy": "npm run build&&gh-pages -d dist"
16 |   },
17 |   "dependencies": {
18 |     "@moltin/sdk": "^3.21.0",
19 |     "vue": "^2.6.1",
20 |     "vue-router": "^3.0.3"
21 |   },
22 |   "devDependencies": {
23 |     "autoprefixer": "^6.7.2",
24 |     "babel-core": "^6.22.1",
25 |     "babel-eslint": "^7.1.1",
26 |     "babel-loader": "^6.2.10",
27 |     "babel-plugin-istanbul": "^5.1.4",
28 |     "babel-plugin-transform-runtime": "^6.22.0",
29 |     "babel-preset-env": "^1.3.2",
30 |     "babel-preset-stage-2": "^6.22.0",
31 |     "babel-register": "^6.22.0",
32 |     "chai": "^3.5.0",
33 |     "chalk": "^1.1.3",
34 |     "chromedriver": "^2.27.2",
35 |     "connect-history-api-fallback": "^1.3.0",
36 |     "copy-webpack-plugin": "^4.0.1",
37 |     "cross-env": "^4.0.0",
38 |     "cross-spawn": "^5.0.1",
39 |     "css-loader": "^3.0.0",
40 |     "eslint": "^3.19.0",
41 |     "eslint-config-standard": "^6.2.1",
42 |     "eslint-friendly-formatter": "^2.0.7",
43 |     "eslint-loader": "^1.7.1",
44 |     "eslint-plugin-html": "^2.0.0",
45 |     "eslint-plugin-promise": "^3.4.0",
46 |     "eslint-plugin-standard": "^2.0.1",
47 |     "eventsource-polyfill": "^0.9.6",
48 |     "express": "^4.14.1",
49 |     "extract-text-webpack-plugin": "^2.0.0",
50 |     "file-loader": "^0.11.1",
51 |     "friendly-errors-webpack-plugin": "^1.1.3",
52 |     "gh-pages": "^1.2.0",
53 |     "html-webpack-plugin": "^2.28.0",
54 |     "http-proxy-middleware": "^0.19.1",
55 |     "inject-loader": "^3.0.0",
56 |     "karma": "^4.1.0",
57 |     "karma-coverage": "^1.1.1",
58 |     "karma-mocha": "^1.3.0",
59 |     "karma-phantomjs-launcher": "^1.0.2",
60 |     "karma-phantomjs-shim": "^1.4.0",
61 |     "karma-sinon-chai": "^1.3.1",
62 |     "karma-sourcemap-loader": "^0.3.7",
63 |     "karma-spec-reporter": "0.0.30",
64 |     "karma-webpack": "^2.0.2",
65 |     "lolex": "^1.5.2",
66 |     "mocha": "^6.1.4",
67 |     "nightwatch": "^1.1.12",
68 |     "opn": "^4.0.2",
69 |     "optimize-css-assets-webpack-plugin": "^5.0.1",
70 |     "ora": "^1.2.0",
71 |     "phantomjs-prebuilt": "^2.1.14",
72 |     "rimraf": "^2.6.0",
73 |     "selenium-server": "^3.0.1",
74 |     "semver": "^5.3.0",
75 |     "shelljs": "^0.7.6",
76 |     "sinon": "^2.1.0",
77 |     "sinon-chai": "^2.8.0",
78 |     "url-loader": "^2.0.0",
79 |     "vue-loader": "^11.3.4",
80 |     "vue-style-loader": "^2.0.5",
81 |     "vue-template-compiler": "^2.2.6",
82 |     "webpack": "^2.3.3",
83 |     "webpack-bundle-analyzer": "^3.3.2",
84 |     "webpack-dev-middleware": "^1.10.0",
85 |     "webpack-hot-middleware": "^2.18.0",
86 |     "webpack-merge": "^4.1.0"
87 |   },
88 |   "engines": {
89 |     "node": ">= 4.0.0",
90 |     "npm": ">= 3.0.0"
91 |   },
92 |   "browserslist": [
93 |     "> 1%",
94 |     "last 2 versions",
95 |     "not ie <= 8"
96 |   ]
97 | }
98 | 


--------------------------------------------------------------------------------
/src/components/Checkout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 
  3 |     <div class="row">
  4 | 
  5 |       <div class="ui message" v-bind:class="{ error: isError }" v-if="errors">
  6 | 
  7 |         <ul id="example-1">
  8 |           <li v-for="error in errors">
  9 |             <div class="header">
 10 |               {{ error.source }}
 11 |             </div>
 12 |             {{ error.detail }}
 13 |           </li>
 14 |         </ul>
 15 | 
 16 |       </div>
 17 | 
 18 |       <form class="ui form">
 19 |         <h1 class="ui dividing header">Shipping and Billing Details</h1>
 20 | 
 21 |         <div class="field">
 22 | 
 23 |           <h4 class="ui dividing header">Customer Details</h4>
 24 |           <div class="two fields">
 25 |             <div class="field">
 26 |               <input type="text"class="form-control" id="name" name="Name" placeholder="Name" v-model="checkoutData.customer.name" required>
 27 |             </div>
 28 |             <div class="field">
 29 |               <input type="text" class="form-control" id="email" name="Email" placeholder="Email" v-model="checkoutData.customer.email" required>
 30 |             </div>
 31 |           </div>
 32 |         </div>
 33 | 
 34 |         <div class="field">
 35 |           <h4 class="ui dividing header">Billing Address</h4>
 36 | 
 37 |           <div class="two fields">
 38 |             <div class="field">
 39 |               <input type="text"class="form-control" id="billing-first-name" name="billing[first-name]" placeholder="First Name" v-model="checkoutData.billing_address.first_name" required>
 40 |             </div>
 41 |             <div class="field">
 42 |               <input type="text" class="form-control" id="billing-last-name" name="billing[last-name]" placeholder="Last Name" v-model="checkoutData.billing_address.last_name" required>
 43 |             </div>
 44 |           </div>
 45 | 
 46 |           <div class="two fields">
 47 |             <div class="eight wide field">
 48 |               <input type="text" class="form-control" id="billing-line-1" name="billing[address-1]" placeholder="Address Line 1" v-model="checkoutData.billing_address.line_1" required>
 49 |             </div>
 50 |             <div class="eight wide field">
 51 |               <input type="text" class="form-control" id="billing-line-2" name="billing[address-2]" placeholder="Address Line 2" v-model="checkoutData.billing_address.line_2" required>
 52 |             </div>
 53 |           </div>
 54 | 
 55 |           <div class="two fields">
 56 |             <div class="eight wide field">
 57 |               <input type="text" class="form-control" id="billing-city" name="billing[city]" placeholder="City" v-model="checkoutData.billing_address.city" required>
 58 |             </div>
 59 |             <div class="eight wide field">
 60 |               <input type="text" class="form-control" id="billing-county" name="billing[county]" placeholder="County/State" v-model="checkoutData.billing_address.county" required>
 61 |             </div>
 62 |           </div>
 63 | 
 64 |           <div class="two fields">
 65 |             <div class="eight wide field">
 66 |               <input type="text" class="form-control" id="billing-postcode" name="billing[postcode]" placeholder="Postcode" v-model="checkoutData.billing_address.postcode" required>
 67 |             </div>
 68 |             <div class="eight wide field">
 69 |               <input type="text"  class="form-control" id="billing-country" name="billing[country]" placeholder="Country" v-model="checkoutData.billing_address.country" required>
 70 |             </div>
 71 |           </div>
 72 |         </div>
 73 | 
 74 |         <div class="field">
 75 |           <h4 class="ui dividing header">Shipping Address</h4>
 76 | 
 77 |           <div class="two fields">
 78 |             <div class="field">
 79 |               <input type="text"class="form-control" id="shipping-first-name" name="shipping[first-name]" placeholder="First Name" v-model="checkoutData.shipping_address.first_name" required>
 80 |             </div>
 81 |             <div class="field">
 82 |               <input type="text" class="form-control" id="shipping-last-name" name="shipping[last-name]" placeholder="Last Name" v-model="checkoutData.shipping_address.last_name" required>
 83 |             </div>
 84 |           </div>
 85 | 
 86 |           <div class="two fields">
 87 |             <div class="eight wide field">
 88 |               <input type="text" class="form-control" id="shipping-line-1" name="shipping[address-1]" placeholder="Address Line 1" v-model="checkoutData.shipping_address.line_1" required>
 89 |             </div>
 90 |             <div class="eight wide field">
 91 |               <input type="text" class="form-control" id="shipping-line-2" name="shipping[address-2]" placeholder="Address Line 2" v-model="checkoutData.shipping_address.line_2" required>
 92 |             </div>
 93 |           </div>
 94 | 
 95 |           <div class="two fields">
 96 |             <div class="eight wide field">
 97 |               <input type="text" class="form-control" id="shipping-city" name="shipping[city]" placeholder="City" v-model="checkoutData.shipping_address.city" required>
 98 |             </div>
 99 |             <div class="eight wide field">
100 |               <input type="text" class="form-control" id="shipping-county" name="shipping[county]" placeholder="County/State" v-model="checkoutData.shipping_address.county" required>
101 |             </div>
102 |           </div>
103 | 
104 |           <div class="two fields">
105 |             <div class="eight wide field">
106 |               <input type="text" class="form-control" id="shipping-postcode" name="shipping[postcode]" placeholder="Postcode" v-model="checkoutData.shipping_address.postcode" required>
107 |             </div>
108 |             <div class="eight wide field">
109 |               <input type="text"  class="form-control" id="shipping-country" name="shipping[country]" placeholder="Country" v-model="checkoutData.shipping_address.country" required>
110 |             </div>
111 |           </div>
112 |         </div>
113 | 
114 |         <button class="btn btn-primary" v-on:click.prevent="checkout()">Checkout!</button>
115 |       </form>
116 |     </div>
117 | </template>
118 | <script>
119 | import MoltinService from '../services/moltin.js'
120 | 
121 | export default {
122 |   name: 'product',
123 |   data () {
124 |     return {
125 |       isError: false,
126 |       errors: '',
127 |       checkoutData: {
128 |         customer: {
129 |           name: 'Ron Swanson',
130 |           email: 'ron@swanson.com'
131 |         },
132 |         shipping_address: {
133 |           first_name: 'Ron',
134 |           last_name: 'Swanson',
135 |           line_1: '2nd Floor British India House',
136 |           line_2: '15 Carliol Square',
137 |           city: 'Newcastle Upon Tyne',
138 |           postcode: 'NE1 6UF',
139 |           county: 'Tyne & Wear',
140 |           country: 'United Kingdom'
141 |         },
142 |         billing_address: {
143 |           first_name: 'Ron',
144 |           last_name: 'Swanson',
145 |           line_1: '2nd Floor British India House',
146 |           line_2: '15 Carliol Square',
147 |           city: 'Newcastle Upon Tyne',
148 |           postcode: 'NE1 6UF',
149 |           county: 'Tyne & Wear',
150 |           country: 'United Kingdom'
151 |         }
152 |       }
153 |     }
154 |   },
155 |   methods: {
156 |     checkout () {
157 |       MoltinService.checkout(this.checkoutData.customer, this.checkoutData.billing_address, this.checkoutData.shipping_address).then((response) => {
158 |         this.$router.push('/payments/' + response.data.id)
159 |       }).catch((err) => {
160 |         this.isError = true
161 |         this.errors = err.errors
162 |       })
163 |     }
164 |   }
165 | }
166 | </script>
167 | <style></style>
168 | 


--------------------------------------------------------------------------------