├── .babelrc ├── .gitignore ├── README.md ├── dist ├── .gitkeep └── product.png ├── index.html ├── package.json ├── src ├── App.vue ├── components │ ├── Product.vue │ └── ShoppingCart.vue ├── main.js └── shoppingCartState.js └── thumb.png /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"] 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/build.js 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Shopping Cart 2 | 3 | > A simple shopping cart with vue.js 4 | 5 | ## Requirements 6 | 7 | - node js [5.1.x] 8 | - npm [3.3.x] 9 | - vue cli [1.4.x] 10 | 11 | ![alt tag](https://github.com/codekerala/vuejs-shoppingcart/raw/master/thumb.png) 12 | 13 | ## Build Setup 14 | 15 | ``` bash 16 | # install dependencies 17 | npm install 18 | 19 | # serve with hot reload at localhost:8080 20 | npm run dev 21 | 22 | ``` 23 | 24 | ### Want More? 25 | 26 | Find the link for paid full source code from codecanyon. 27 | 28 | [Flow Demo](https://flow.codekerala.com) 29 | 30 | [Buy Flow Now](https://codecanyon.net/item/flow-simple-crm-for-freelancers-and-small-businesses/22641018) 31 | 32 | -------------------------------------------------------------------------------- /dist/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codekerala/vuejs-shoppingcart/651df2a6ac215b6a1909b36832b35e2ad89414bf/dist/.gitkeep -------------------------------------------------------------------------------- /dist/product.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codekerala/vuejs-shoppingcart/651df2a6ac215b6a1909b36832b35e2ad89414bf/dist/product.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | shoppingcart 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shoppingcart", 3 | "description": "a simple shopping cart with vue.js", 4 | "author": "code kerala ", 5 | "private": true, 6 | "scripts": { 7 | "watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js", 8 | "serve": "http-server -c 1 -a localhost", 9 | "dev": "npm-run-all --parallel watchify serve", 10 | "build": "cross-env NODE_ENV=production browserify src/main.js | uglifyjs -c warnings=false -m > dist/build.js" 11 | }, 12 | "dependencies": { 13 | "lodash": "^4.13.1", 14 | "vue": "^1.0.0" 15 | }, 16 | "devDependencies": { 17 | "babel-core": "^6.0.0", 18 | "babel-plugin-transform-runtime": "^6.0.0", 19 | "babel-preset-es2015": "^6.0.0", 20 | "babel-preset-stage-2": "^6.0.0", 21 | "babel-runtime": "^6.0.0", 22 | "cross-env": "^1.0.6", 23 | "babelify": "^7.2.0", 24 | "browserify": "^12.0.1", 25 | "browserify-hmr": "^0.3.1", 26 | "http-server": "^0.9.0", 27 | "npm-run-all": "^1.6.0", 28 | "uglify-js": "^2.5.0", 29 | "vueify": "^8.5.2", 30 | "watchify": "^3.4.0" 31 | }, 32 | "browserify": { 33 | "transform": [ 34 | "vueify", 35 | "babelify" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 39 | 40 | 75 | -------------------------------------------------------------------------------- /src/components/Product.vue: -------------------------------------------------------------------------------- 1 | 18 | 53 | -------------------------------------------------------------------------------- /src/components/ShoppingCart.vue: -------------------------------------------------------------------------------- 1 | 23 | 42 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: 'body', 6 | components: { App } 7 | }) 8 | -------------------------------------------------------------------------------- /src/shoppingCartState.js: -------------------------------------------------------------------------------- 1 | // shopping cart state 2 | export default { 3 | data: { 4 | cart: [ 5 | {id: 1, title: 'Name of Product 1', price: 40, image: 'product.png', qty: 1} 6 | ] 7 | }, 8 | add (product) { 9 | var found = _.find(this.data.cart, ['id', product.id]) 10 | if(typeof found != 'object') { 11 | this.data.cart.push({ 12 | id: product.id, 13 | title: product.title, 14 | price: product.price, 15 | image: product.image, 16 | qty: 1 17 | }) 18 | } 19 | }, 20 | inc (product) { 21 | var found = _.find(this.data.cart, ['id', product.id]) 22 | if(typeof found == 'object') { 23 | var index = _.indexOf(this.data.cart, found) 24 | this.data.cart[index].qty++ 25 | } 26 | }, 27 | dec (product) { 28 | var found = _.find(this.data.cart, ['id', product.id]) 29 | if(typeof found == 'object') { 30 | var index = _.indexOf(this.data.cart, found) 31 | 32 | if(this.data.cart[index].qty == 1) { 33 | this.data.cart.$remove(found) 34 | } else { 35 | this.data.cart[index].qty-- 36 | } 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codekerala/vuejs-shoppingcart/651df2a6ac215b6a1909b36832b35e2ad89414bf/thumb.png --------------------------------------------------------------------------------