<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/dimaZubkov/pen/LxeMBw?limit=all&page=11&q=shop" />
<style class="cp-pen-styles">* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
color: #262626;
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
#shop {
margin: 1em 270px 1em 1em;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#shop .item {
text-align: center;
}
#shop .name {
margin-bottom: 0.5em;
}
#shop .price {
color: #000;
font-size: 1.2em;
display: inline-block;
background: #fffbd3;
padding: 0.5em;
border-radius: 0.5em;
vertical-align: middle;
}
#cart {
border-left: 1px solid #eee;
position: fixed;
margin: 1em 0 0;
top: 0;
right: 0;
width: 270px;
padding: 0.5em 1em 2em;
}
#cart h1,
#cart h2 {
text-align: center;
}
#cart .cart_item {
padding: 0.5em 0;
border-bottom: 1px dashed #ccc;
}
button {
vertical-align: middle;
outline: 0;
border: 0;
cursor: pointer;
padding: 0.5em 1em;
border-radius: 5px;
border-bottom: 3px solid rgba(0,0,0,0.3);
background: #e0e4cc;
}
button:hover {
background: #e9ecdb;
}
.btn {
background: #ffe766;
font-size: 1em;
}
.btn:hover {
background: #ffd700;
}
.btn[disabled] {
cursor: default;
background: #f0f2e6;
}
</style></head><body>
<div id="vue">
<div class="flex" id="shop">
<div class="item" v-for="product in products"><img :src="'//zupra.github.io/t-shirt_shop/img/test-2/'+product.id+'.png'"/>
<div class="name">{{ product.name }}</div>
<div class="price">{{ product.price }} ₽</div>
<button class="btn" :disabled="product.qty" @click="addToCart(product)">
<template v-if="!product.qty">Add to Cart </template>
<template v-else="v-else">✔ in Cart <b>{{product.qty}}</b></template>
</button>
</div>
</div>
<div id="cart">
<h1>cart </h1>
<h2>{{count}} / {{total}} ₽</h2>
<div class="cart_item" v-for="item,i in cart" v-if="item.qty > 0"><b>{{ item.qty }}</b> × {{ item.name }} {{ item.price }}
<button @click="item.qty += 1">+1</button>
<button v-if="item.qty > 1" @click="(item.qty > 1) ? item.qty -= 1 : ''">-1</button>
<button @click="del(i, item.id)">X</button>
</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.1.10/vue.js'></script>
<script >"use strict";
var vm = new Vue({
el: "#vue",
data: {
products: [{
id: 1,
name: "black",
price: 99
}, {
id: 2,
name: "dark-blue",
price: 99
}, {
id: 3,
name: "green",
price: 99
}, {
id: 4,
name: "grey",
price: 99
}, {
id: 5,
name: "light-blue",
price: 99
}, {
id: 6,
name: "pink",
price: 99
}, {
id: 7,
name: "purple",
price: 99
}, {
id: 8,
name: "red",
price: 99
}, {
id: 9,
name: "white",
price: 99
}],
cart: []
},
computed: {
count: function count() {
return this.cart.reduce(function (n, cart) {
return cart.qty + n;
}, 0);
},
total: function total() {
return this.cart.reduce(function (n, cart) {
return cart.price * cart.qty + n;
}, 0).toFixed(2);
}
},
methods: {
addToCart: function addToCart(product) {
this.$set(product, 'qty', +1);
this.cart.push(product);
},
unblock: function unblock(id) {
for (var i = 0; i < this.products.length; i++) {if (window.CP.shouldStopExecution(1)){break;}
if (this.products[i].id === id) {
delete this.products[i].qty;
break;
}
}
window.CP.exitedLoop(1);
},
del: function del(index, id) {
this.cart.splice(index, 1);
this.unblock(id);
}
}
});
//# sourceURL=pen.js
</script>
</body></html>
