Skip to content

Instantly share code, notes, and snippets.

Created March 31, 2016 18:13
Show Gist options
  • Save anonymous/dad4fb6c19345f95b53fbd48b74440a9 to your computer and use it in GitHub Desktop.
Save anonymous/dad4fb6c19345f95b53fbd48b74440a9 to your computer and use it in GitHub Desktop.
VueJs Shopping Trolley (WIP)
<div class="container">
<div class="shopping-trolley" id="shopping-trolley">
<div class="col-md-2"></div>
<div class="col-md-4">
<h1>Goods List</h1>
<ul class="list-group">
<li v-repeat="good: goods"
class="list-group-item"
>
{{ good.description }}
<div class="AddToCart">
<button v-on="click: addToCart(good)"><i class="fa fa-plus-square"></i></button>
<span>Price: € {{ good.price }}</span>
</div>
</li>
</ul>
</div>
<div class="col-md-4">
<h1>Shopping Cart ({{ cart.length }}) - Grand Total: € {{ cartTotal }}</h1>
<ul class="list-group">
<li v-repeat="item: cart"
class="list-group-item"
>{{ item.description }} - Total: € {{ item.quantity * item.price }}
<button v-on="click: removeItem(item)"><i class="fa fa-trash-o"></i></button>
<button v-on="click: minusOne(item)"><i class="fa fa-caret-square-o-down"></i></button>
<button v-on="click: plusOne(item)"><i class="fa fa-caret-square-o-up"></i></button>
<span class="badge">{{ item.quantity }}</span>
</li>
</ul>
</div>
<div class="col-md-2"></div>
<hr />
<!--<h3>Data Troubleshooter</h3>
<pre>{{ $data | json }}</pre>-->
</div>
</div>
new Vue({
el: '#shopping-trolley',
data: {
goods: [
{ id: 1, description: 'Razor Blade', price: 10 },
{ id: 2, description: 'Coffee Mug', price: 20 },
{ id: 3, description: 'USB Stick', price: 5 },
{ id: 4, description: 'Amazing Dildo', price: 35 },
],
cart: [],
},
computed: {
cartTotal: function() {
var total = 0;
var item;
for (item in this.cart) {
total = total + (this.cart[item].quantity * this.cart[item].price);
}
return total;
}
},
methods: {
addToCart: function(good) {
this.cart.push({
id: good.id,
description: good.description,
price: good.price,
quantity: 1
});
this.goods.$remove(good);
},
plusOne: function(item) {
item.quantity = item.quantity + 1;
},
minusOne: function(item) {
if (item.quantity == 1) {
this.removeItem(item);
} else {
item.quantity = item.quantity - 1;
}
},
removeItem: function(item) {
this.goods.push({
id: item.id,
description: item.description,
price: item.price
});
this.cart.$remove(item);
},
}
})
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
.shopping-trolley {
margin: 0 auto;
button {
background: none;
border: 0;
float: right;
margin-left: 5px;
}
ul {
li {
.AddToCart {
float: right;
}
}
}
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment