devsnippet/shop-vue

It's just a shopping cart experiment using VueJS.

Shop-vue

It's just a shopping cart experiment using Vue.js.

• See it live!

This project is built with vue-cli and vuex.

Also I suggest you to use vue-devtools if you want a see how everything happens.

How cart works

• Products can be added to the cart if they've a item available on stock.
• Products added to cart must be removable.
• Checkout must be disabled if cart total is over user limit.
• If a product already exists on cart, its counter should be updated.
• All products have a shipping price. shipping is defined by the highest shipping price of products added to cart.

How promotions work

• 30% OFF should reduce 30% of the costs on subtotal.
• $100.00 Discout should reduce $100.00 of total.
• Free Shipping should set shipping to zero.
• +$100.00 on limit should increase user limit by $100.00.

We have 3 resources:

Profile

{
  'firstName': 'Joe',
  'lastName': 'Montana',
  'limit': 850.00
}

Products

{
  'id': 1,
  'title': 'iPad 4 Mini',
  'price': 500.01,
  'inventory': 2,
  'shipping': 15.00
},
...

Promotions

{ 'id': 1, 'title': '30% OFF' },
{ 'id': 2, 'title': '$100.00 Discount' },
{ 'id': 3, 'title': 'Free Shipping' },
{ 'id': 4, 'title': '+ $100.00 on limit' }

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

This project uses vue-cli. For detailed explanation on how things work, checkout the guide and docs for vue-loader.