<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/JJdgGN?limit=all&page=5&q=shop" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style class="cp-pen-styles">* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
position: fixed;
z-index: 10;
width: 100%;
top: 0;
height: 50px;
overflow: hidden;
line-height: 50px;
box-shadow: 0 -5px 5px 5px rgba(0,0,0,0.3);
background: rgba(255,255,255,0.8);
}
.topLine {
padding-left: 1em;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#cart {
color: #fff;
padding: 0 0.5em;
fill: #fff;
min-width: 50px;
background: #5d9cec;
cursor: pointer;
}
#cart:hover .inCart {
display: block;
}
#cart .inCart {
padding: 0.5em 0.8em;
line-height: 1.6;
box-shadow: 0 0 1em #747474;
list-style: none;
position: fixed;
margin-left: -160px;
width: 260px;
background: #efefef;
color: #000;
display: none;
}
#cart .inCart img {
width: 50px;
float: left;
}
#cart .inCart button {
width: 2.4em;
height: 2.4em;
line-height: 2.4em;
border-radius: 50%;
background: #008b8b;
color: #fff;
}
#cart .inCart li {
overflow: auto;
}
#cart .inCart li + li {
border-top: 1px solid #ccc;
}
#cart .inCart p {
padding-top: 4px;
}
#cart span {
padding-left: 0.2em;
}
#cart svg {
vertical-align: middle;
}
.wr {
max-width: 1220px;
margin: auto;
}
.flex,
.flex_wr {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.flex_wr {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
body {
padding-top: 60px;
color: #666d70;
font-family: sans-serif;
}
.product-item {
position: relative;
margin: 4px;
-webkit-box-flex: 1;
-ms-flex: 1 1 20%;
flex: 1 1 20%;
}
@media (max-width: 900px) {
.product-item {
-webkit-box-flex: 1;
-ms-flex: 1 1 180px;
flex: 1 1 180px;
}
}
@media (max-width: 500px) {
.product-item {
-webkit-box-flex: 1;
-ms-flex: 1 0 130px;
flex: 1 0 130px;
}
}
.product-item img {
display: block;
width: 100%;
}
.zoom {
cursor: pointer;
stroke: #ccc;
position: absolute;
bottom: 0;
right: 0;
}
.zoom:hover {
stroke: #555;
}
.focus {
z-index: 1;
}
.focus:after {
background: rgba(96,125,139,0.8);
content: '';
cursor: pointer;
position: fixed;
left: 0;
top: 0;
z-index: -2;
width: 100%;
height: 100%;
}
.focus .item-buy {
display: block;
}
.item-buy {
text-align: center;
position: absolute;
z-index: 1;
top: calc(100% + 8px);
width: 100%;
padding: 1em;
background: #fff;
display: none;
}
.item-buy p {
margin-bottom: 0.5em;
}
.item-buy i {
font-style: normal;
vertical-align: middle;
font-size: 1.4em;
line-height: 1;
}
.item-buy b {
cursor: pointer;
margin: 0 0.2em 0.4em;
display: inline-block;
border: 1px solid #eee;
padding: 0.2em 0.4em;
}
.item-buy b:hover {
border-color: #ffe4c4;
color: #444;
}
button {
border: 0;
cursor: pointer;
outline: none;
}
.btn {
padding: 0.5em;
width: 100%;
font-size: inherit;
color: #a9a9a9;
background: none;
border: 1px solid #ccc;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.btn:hover:not([disabled]) {
border-color: #5d9cec;
background: #5d9cec;
border-radius: 20px;
color: #fff;
}
.btn[disabled] {
cursor: default;
background: #f0f2e6;
color: #555;
}
</style></head><body>
<div id="vue">
<header>
<div class="wr flex topLine">
<h1>Ninja shop</h1>
<div id="cart"><span>{{count}} / {{total}} ₽</span>
<!--0 / 00 ₽-->
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewbox="0 0 512 512">
<polygon points="447.992,336 181.555,336 69.539,80 0.008,80 0.008,48 90.477,48 202.492,304 447.992,304"></polygon>
<path d="M287.992,416c0,26.5-21.5,48-48,48s-48-21.5-48-48s21.5-48,48-48S287.992,389.5,287.992,416z"></path>
<path d="M447.992,416c0,26.5-21.5,48-48,48s-48-21.5-48-48s21.5-48,48-48S447.992,389.5,447.992,416z"></path>
<polygon points="499.18,144 511.992,112 160.008,112 172.805,144"></polygon>
<polygon points="211.195,240 223.992,272 447.992,272 460.805,240"></polygon>
<polygon points="486.398,176 185.602,176 198.398,208 473.586,208"></polygon>
</svg>
<ul class="inCart">
<h2 v-if="!cart.length">Empty</h2>
<li v-for="item,i in cart"><img :src="'//zupra.github.io/test/img/shop/'+item.id+'.jpg'"/>
<p><b>{{ item.qty }}</b> × {{ item.name }} {{ item.price }} ₽</p>
<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>
</li>
</ul>
</div>
</div>
</header>
<div class="product-List wr flex_wr">
<div class="product-item" v-for="item in products" @click="off_focus($event)"><img :src="'//zupra.github.io/test/img/shop/'+item.id+'.jpg'"/>
<svg class="zoom" @click="focus($event)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
<line x1="11" y1="8" x2="11" y2="14"></line>
<line x1="8" y1="11" x2="14" y2="11"></line>
</svg>
<div class="item-buy" v-show="1">
<p> <i>99 ₽ </i><b v-for="size in ['S','M','L','XL']">{{size}}</b></p>
<button class="btn" @click="addToCart(item)" :disabled="item.qty" v-text="!item.qty ? 'Add to Cart': 'In cart'"> </button>
</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.1.10/vue.js'></script>
<script >let products = [
{
id: 1,
name: "black Ninja",
price: 99
},
{
id: 2,
name: "Happy Ninja",
price: 99
},
{
id: 3,
name: "Hoodie Ninja",
price: 99
},
{
id: 4,
name: "Hoodie black",
price: 99
},
{
id: 5,
name: "Hoodie pink",
price: 99
},
{
id: 6,
name: "Patient Ninja",
price: 99
},
{
id: 7,
name: "WTF Ninja",
price: 99
},
{
id: 8,
name: "WTF-2 Ninja",
price: 99
},
{
id: 9,
name: "Red WOO",
price: 99
},
{
id: 10,
name: "Blue WOO",
price: 99
},
{
id: 11,
name: "Simple Ninja",
price: 99
},
{
id: 12,
name: "Red Ninja",
price: 99
}
];
var vm = new Vue({
el: "#vue",
data: {
products: products,
//isFocus: false,
cart: []
},
computed: {
count: function() {
return this.cart.reduce(function(n, cart) {
return cart.qty + n;
}, 0);
},
total: function() {
return this.cart
.reduce(function(n, cart) {
return cart.price * cart.qty + n;
}, 0).toFixed();
}
},
methods: {
focus(e) {
e.currentTarget.parentElement.classList.toggle("focus");
},
off_focus(e) {
e.target.classList.remove("focus");
},
addToCart(product) {
this.$set(product, "qty", +1);
this.cart.push(product);
},
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(index, id) {
this.cart.splice(index, 1);
this.unblock(id);
}
}
});
//# sourceURL=pen.js
</script>
</body></html>
