aambrozkiewicz/vue-js-shopping-cart.html

## 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>