<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/edward1995/pen/aLNEXe" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style class="cp-pen-styles">.glyphicon { margin-right:5px; }
.thumbnail
{
margin-bottom: 20px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.item.list-group-item
{
float: none;
width: 100%;
background-color: #fff;
margin-bottom: 10px;
}
.item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover
{
background: #428bca;
}
.item.list-group-item .list-group-image
{
margin-right: 10px;
}
.item.list-group-item .thumbnail
{
margin-bottom: 0px;
}
.item.list-group-item .caption
{
padding: 9px 9px 0px 9px;
}
.item.list-group-item:nth-of-type(odd)
{
background: #eeeeee;
}
.item.list-group-item:before, .item.list-group-item:after
{
display: table;
content: " ";
}
.item.list-group-item img
{
float: left;
}
.item.list-group-item:after
{
clear: both;
}
.list-group-item-text
{
margin: 0 0 11px;
}</style></head><body>
<div id="app">
<div class="container">
<nav class="well well-sm">
<a @click.prevent="isShowingCart = false"><strong>E-commerce Inc.</strong></a>
<div class="text-right pull-right">
<span class="stats">
{{ cart.items.length }}
<template v-if="cart.items.length == 1">item</template>
<template v-else>items</template>
in cart, totalling {{ cartTotal | currency }}
<button class="btn btn-primary" @click="isShowingCart = true">View Cart</button>
</span>
</div>
<div class="btn-group">
<a id="list" @click="listWrapper" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-th-list"></span>List
</a>
<a @click="gridWrapper" id="grid" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-th"></span>Grid
</a>
</div>
</div>
</nav>
<div class="container">
<div v-if="!isShowingCart" id="products" class="row">
<div v-for="product in products" :class="groupWrapper" class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image" src="https://placehold.it/400x250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
{{product.name}}</h4>
<p class="group inner list-group-item-text">
{{product.description}}</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
{{product.price | currency}}</p>
</div>
<div class="col-xs-8 flex flex-row align-center justify-right">
<div class="number-in-stock" :class="{ few: product.inStock < 10 && product.inStock > 0, none: product.inStock == 0 }" >
{{ product.inStock }} in stock
</div>
<button class="btn btn-success" @click="addProductToCart(product)" :disabled="product.inStock == 0" >Add to cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else>
<h1>Cart</h1>
<table v-if="cart.items.length > 0" class="table table-striped">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr v-for="item in cart.items">
<td>{{ item.product.name }}</td>
<td>
{{ item.quantity }}
<button class="btn btn-success" @click="increaseQuantity(item)" :disabled="item.product.inStock == 0">+</button>
<button class="btn btn-danger" @click="decreaseQuantity(item)">-</button>
</td>
<td>{{ item.quantity * item.product.price | currency }}</td>
</tr>
<tr>
<td class="text-right" colspan="2">
<strong>Subtotal</strong>
</td>
<td>{{ cartTotal | currency }}</td>
</tr>
<tr>
<td class="text-right" colspan="2">
<strong>Taxes</strong>
</td>
<td>{{ taxAmount | currency }}</td>
</tr>
<tr>
<td class="text-right" colspan="2">
<strong>Grand total</strong>
</td>
<td>{{ cartTotal + taxAmount | currency }}</td>
</tr>
<tr>
<td colspan="2"></td>
<td><button class="btn btn-success" @click="checkout">Checkout</button></td>
</tr>
</tbody>
</table>
<p v-else>Your cart is currently empty.</p>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script >new Vue({
el: '#app',
data:{
groupWrapper: "list-group-item",
isShowingCart: false,
cart: {
items: []
},
products: [
{
id: 1,
name: "MacBook Pro (15 inch)",
description:
"This laptop has a super crisp Retina display. Yes, we know that it's overpriced...",
price: 2999,
inStock: 50
},
{
id: 2,
name: "Samsung Galaxy Note 7",
description:
"Unlike the overpriced MacBook Pro, we're selling this one a bit cheap, as we heard it might explode...",
price: 299,
inStock: 755
},
{
id: 3,
name: "HP Officejet 5740 e-All-in-One-printer",
description:
"This one might not last for so long, but hey, printers never work anyways, right?",
price: 149,
inStock: 5
},
{
id: 4,
name: "iPhone 7 cover",
description:
"Having problems keeping a hold of that phone, huh? Ever considered not dropping it in the first place?",
price: 49,
inStock: 42
},
{
id: 5,
name: "iPad Pro (9.7 inch)",
description:
"We heard it's supposed to be pretty good. At least that's what people say.",
price: 599,
inStock: 0
},
{
id: 6,
name: "OnePlus 3 cover",
description:
"Does your phone spend most of its time on the ground? This cheap piece of plastic is the solution!",
price: 19,
inStock: 81
}
]
},
computed:{
cartTotal: function() {
var total = 0;
this.cart.items.forEach(function(item) {
total += item.quantity * item.product.price;
});
return total;
},
taxAmount: function() {
return this.cartTotal * 10 / 100;
}
},
filters: {
currency: function(value) {
var formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
minimumFractionDigits: 0
});
return formatter.format(value);
}
},
methods:{
removeItemFromCart: function(cartItem) {
var index = this.cart.items.indexOf(cartItem);
if (index !== -1) {
this.cart.items.splice(index, 1);
}
},
checkout: function() {
if (confirm('Are you sure that you want to purchase these products?')) {
this.cart.items.forEach(function(item) {
item.product.inStock += item.quantity;
});
this.cart.items = [];
}
},
addProductToCart: function(product) {
var cartItem = this.getCartItem(product);
if (cartItem != null) {
cartItem.quantity++;
} else {
this.cart.items.push({
product: product,
quantity: 1
});
}
product.inStock--;
},
increaseQuantity: function(cartItem) {
cartItem.product.inStock--;
cartItem.quantity++;
},
decreaseQuantity: function(cartItem) {
cartItem.quantity--;
cartItem.product.inStock++;
if (cartItem.quantity == 0) {
this.removeItemFromCart(cartItem);
}
},
getCartItem: function(product) {
for (var i = 0; i < this.cart.items.length; i++) {if (window.CP.shouldStopExecution(1)){break;}
if (this.cart.items[i].product.id === product.id) {
return this.cart.items[i];
}
}
window.CP.exitedLoop(1);
return null;
},
listWrapper:function(){
this.groupWrapper = "list-group-item"
},
gridWrapper:function(){
this.groupWrapper = "grid-group-item"
}
}
})
//# sourceURL=pen.js
</script>
</body></html>
