aambrozkiewicz · October 10, 2015 14:46 · azimidev · Aug 9, 2016
diff --git a/vue-js-shopping-cart.html b/vue-js-shopping-cart.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
 	<title>vue eatally</title>
 	
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" media="screen">
 	<style type="text/css" media="screen">
 	body {
 		background-color: #f4f4f4;
 	}
 	</style>
 </head>
 <body>
 	<!-- navigation bar -->
 	<nav class="navbar navbar-default">
 		<div class="container-fluid">
 			<div class="container">
 			  <a class="navbar-brand">
 				  <i class="glyphicon glyphicon-shopping-cart"></i> Vue.js shoping cart
 			  </a>
 		  </div>
 		</div>
 	</nav>
 	  
 	<div class="container">
 		<div class="row">
 			<div class="col-md-4">
 				<ul class="list-group">
 					<li v-repeat="products" class="list-group-item">
 						{{ name }} {{ price }}
 						<div class="pull-right">
 							<button v-show="!inCart" v-on="click: addToCart(this)" class="btn btn-xs btn-primary">
 								+
 							</button>
 							<span v-show="inCart" class="glyphicon glyphicon-ok-circle text-success"></span>
 						</div>
 					</li>
 				</ul>
 			</div>
 			<div class="col-md-4">
 				<div class="panel panel-default">
 				  <div class="panel-heading">
 					  <span class="glyphicon glyphicon-shopping-cart"></span>
 					  Koszyk (<span v-text="total"></span>)
 				  </div>
 				  <div class="panel-body">
 					  <span v-show="!count" class="text-muted">Pusto ;(</span>
 						<li v-repeat="cart_items" class="list-group-item">
 							{{ qty }} &times; {{ name }} {{ price }}
 							<div class="pull-right">
 								<button v-on="click: decQty(this)" class="btn btn-xs btn-default">
 									-
 								</button>
 								<button v-on="click: qty += 1" class="btn btn-xs btn-default">
 									+
 								</button>
 							</div>
 						</li>
 				  </div>
 				</div>
 			</div>
 		</div>
 	</div>
 	
 	<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js" type="text/javascript" charset="utf-8"></script>
 	<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
 		
 	<script type="text/javascript">		
 		var v = new Vue({
 			el: 'body',
 			data: {
 				products: [
 					{'id': 1, 'name': 'Product 1', 'price': 12.95},
 					{'id': 2, 'name': 'Other product', 'price': 4.35}
 				],
 				cart_items: []
 			},
 			computed: {
 				count: function() {
 					return this.cart_items.length;
 				},
 				total: function() {
 					return _.reduce(this.cart_items, function(n, cart_item) {
 						return cart_item.price * cart_item.qty + n;
 					}, 0).toFixed(2);
 				}
 			},
 			methods: {
 				addToCart: function(product) {
 					if (!_.contains(this.cart_items, product)) {
 						product.$set('inCart', true);
 						product.$set('qty', 1);
 						
 						this.cart_items.push(product);
 					}
 				},
 				decQty: function(product) {
 					product.qty -= 1;
 					if (product.qty <= 0) {
 						product.$set('inCart', false);
 						this.cart_items.$remove(_.findIndex(this.cart_items, function(item) {
 							return item.id == product.id;
 						}));
 					}
 				}
 			}
 		});
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>vue eatally</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" media="screen">
	<style type="text/css" media="screen">
	body {
	background-color: #f4f4f4;
	}
	</style>
	</head>
	<body>
	<!-- navigation bar -->
	<nav class="navbar navbar-default">
	<div class="container-fluid">
	<div class="container">
	<a class="navbar-brand">
	<i class="glyphicon glyphicon-shopping-cart"></i> Vue.js shoping cart
	</a>
	</div>
	</div>
	</nav>

	<div class="container">
	<div class="row">
	<div class="col-md-4">
	<ul class="list-group">
	<li v-repeat="products" class="list-group-item">
	{{ name }} {{ price }}
	<div class="pull-right">
	<button v-show="!inCart" v-on="click: addToCart(this)" class="btn btn-xs btn-primary">
	+
	</button>
	<span v-show="inCart" class="glyphicon glyphicon-ok-circle text-success"></span>
	</div>
	</li>
	</ul>
	</div>
	<div class="col-md-4">
	<div class="panel panel-default">
	<div class="panel-heading">
	<span class="glyphicon glyphicon-shopping-cart"></span>
	Koszyk (<span v-text="total"></span>)
	</div>
	<div class="panel-body">
	<span v-show="!count" class="text-muted">Pusto ;(</span>
	<li v-repeat="cart_items" class="list-group-item">
	{{ qty }} × {{ name }} {{ price }}
	<div class="pull-right">
	<button v-on="click: decQty(this)" class="btn btn-xs btn-default">
	-
	</button>
	<button v-on="click: qty += 1" class="btn btn-xs btn-default">
	+
	</button>
	</div>
	</li>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js" type="text/javascript" charset="utf-8"></script>
	<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
	var v = new Vue({
	el: 'body',
	data: {
	products: [
	{'id': 1, 'name': 'Product 1', 'price': 12.95},
	{'id': 2, 'name': 'Other product', 'price': 4.35}
	],
	cart_items: []
	},
	computed: {
	count: function() {
	return this.cart_items.length;
	},
	total: function() {
	return _.reduce(this.cart_items, function(n, cart_item) {
	return cart_item.price * cart_item.qty + n;
	}, 0).toFixed(2);
	}
	},
	methods: {
	addToCart: function(product) {
	if (!_.contains(this.cart_items, product)) {
	product.$set('inCart', true);
	product.$set('qty', 1);

	this.cart_items.push(product);
	}
	},
	decQty: function(product) {
	product.qty -= 1;
	if (product.qty <= 0) {
	product.$set('inCart', false);
	this.cart_items.$remove(_.findIndex(this.cart_items, function(item) {
	return item.id == product.id;
	}));
	}
	}
	}
	});
	</script>
	</body>
	</html>