Forked from Guido Bertolino's Pen VueJs Shopping Trolley (WIP).
Forked from Guido Bertolino's Pen VueJs Shopping Trolley (WIP).
A Pen by Yassine Ben Slimane on CodePen.
<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" /> |
Forked from Guido Bertolino's Pen VueJs Shopping Trolley (WIP).
Forked from Guido Bertolino's Pen VueJs Shopping Trolley (WIP).
A Pen by Yassine Ben Slimane on CodePen.