"vue shop card"
Bootstrap 3.0.0 Snippet by evarevirus

<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/qq7886/pen/zBGrwq" /> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <style class="cp-pen-styles">html, body { background-color: #eee; font-family: calibri, sans-serif; } #app { width: 760px; margin: 20px auto; } #app #product .box { width: 230px; background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); display: inline-block; margin: 0 10px; position: relative; } #app #product .box img { width: 230px; } #app #product .box i { width: 50px; height: 50px; background: #ED277F; color: #ffffff; border-radius: 25px; text-align: center; line-height: 50px; font-size: 1.4rem; position: absolute; right: 20px; top: 150px; box-shadow: 0 0 4px 2px rgba(80, 80, 80, 0.1); cursor: pointer; transition: all 0.3s; } #app #product .box i:hover { transform: scale(1.05); } #app #product .box h2 { margin-left: 20px; } #app #product .box p { margin-left: 20px; } #app #cart { margin-top: 50px; overflow: hidden; } #app #cart #head { width: 100%; border-bottom: 1px solid #BFBFBF; height: 40px; display: block; } #app #cart #head h3 { display: inline-block; line-height: 40px; margin: 0; } #app #cart #head #price { display: inline-block; color: #777777; margin-left: 200px; line-height: 40px; } #app #cart #head #quantity { display: inline-block; color: #777777; margin-left: 100px; line-height: 40px; } #app #cart #head #total { display: inline-block; color: #777777; line-height: 40px; float: right; } #app #cart .row { width: 100%; border-bottom: 1px solid #BFBFBF; overflow: hidden; padding: 10px 0; display: block; flaot: left; } #app #cart .row img { height: 100px; float: left; } #app #cart .row h4 { float: left; margin: 0; line-height: 100px; margin-left: 20px; width: 100px; } #app #cart .row p { float: left; margin: 0; width: 80px; line-height: 100px; margin-left: 35px; text-align: center; } #app #cart .row .qty-minus { float: left; width: 20px; line-height: 100px; margin-left: 60px; text-align: center; cursor: pointer; } #app #cart .row .qty { float: left; width: 20px; line-height: 100px; margin-left: 20px; text-align: center; } #app #cart .row .qty-plus { float: left; width: 20px; line-height: 100px; margin-left: 20px; text-align: center; cursor: pointer; } #app #cart .row .del { float: left; width: 80px; line-height: 100px; margin-left: 60px; cursor: pointer; text-decoration: underline; color: #ED277F; } #app #cart .row .totalprice { float: left; width: 80px; line-height: 100px; margin-left: 10px; text-align: right; } #app #cart .row .row p::before, #app #cart .row .box p::before, #app #cart .row .totalprice::before { content: "$"; } #app #cart h5 { font-size: 1.2rem; text-align: right; } </style></head><body> <div id="app"> <div id="product"> <item v-for="item in items" v-bind:item_data="item"></item> </div> <div id="cart"> <div id="head"> <h3>Shopping Cart</h3> <div id="price">Price</div> <div id="quantity">Quantity</div> <div id="total">Total</div> </div> <buyitem v-for="buyitem in buyitems" v-bind:buy_data="buyitem"></buyitem> <h5 v-if="total()">Sum: $ {{total()}}</h5> </div> </div> <template id="product-box"> <div class="box"> <img :src="item_data.img"/> <i class="fa fa-plus" v-on:click="addItem(item_data)"></i> <h2>{{item_data.title}}</h2> <p>$ {{item_data.price}}</p> </div> </template> <template id="buy-box"> <div class="row"> <img :src="buy_data.img"/> <h4>{{buy_data.title}}</h4> <p>$ {{buy_data.price}}</p> <div class="qty-minus" v-on:click="minusQty(buy_data)">-</div> <div class="qty">{{buy_data.qty}}</div> <div class="qty-plus" v-on:click="plusQty(buy_data)">+</div> <div class="del" v-on:click="removeItem(buy_data)">Remove</div> <div class="totalprice">{{buy_data.total}}</div> </div> </template> <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.min.js'></script> <script >var beerClick = 0; var ecoClick = 0; var paperClick = 0; Vue.component("item", { template: "#product-box", props: ["item_data", "buyitems"], methods: { addItem: function(item_data) { if (item_data.id == "beer") { beerClick += 1; if (beerClick <= 1) { this.pushData(); } else { var i = this.findIndex(this.$parent.buyitems, "id", "beer"); this.$parent.buyitems[i].qty += 1; this.$parent.buyitems[i].total = this.$parent.buyitems[i].qty*this.$parent.buyitems[i].price; console.log(i); } } else if (item_data.id == "eco-bag") { ecoClick += 1; if (ecoClick <= 1) { this.pushData(); } else { var i = this.findIndex(this.$parent.buyitems, "id", "eco-bag"); this.$parent.buyitems[i].qty += 1; this.$parent.buyitems[i].total =this.$parent.buyitems[i].qty*this.$parent.buyitems[i].price; } } else { paperClick += 1; if (paperClick <= 1) { this.pushData(); } else { var i = this.findIndex(this.$parent.buyitems, "id", "paper-bag"); this.$parent.buyitems[i].qty += 1; this.$parent.buyitems[i].total = this.$parent.buyitems[i].qty*this.$parent.buyitems[i].price; } } console.log(beerClick, ecoClick, paperClick); }, pushData: function() { this.$parent.buyitems.push({ img: this.item_data.img, title: this.item_data.title, price: this.item_data.price, qty: 1, total: this.item_data.price, id: this.item_data.id }); }, findIndex: function(array, attr, value) { for (var i = 0; i < array.length; i += 1) {if (window.CP.shouldStopExecution(1)){break;} if (array[i][attr] === value) { return i; } } window.CP.exitedLoop(1); return -1; }, } }); Vue.component("buyitem", { template: "#buy-box", props: ["buy_data", "buyitems"], methods: { removeItem: function(buy_data) { var index = this.$parent.buyitems.indexOf(buy_data); this.$parent.buyitems.splice(index, 1); if (buy_data.id == "beer") { beerClick = 0; } else if (buy_data.id == "eco-bag") { ecoClick = 0; } else { paperClick = 0; } }, plusQty: function(buy_data){ buy_data.qty += 1; buy_data.total = buy_data.qty*buy_data.price; }, minusQty: function(buy_data){ buy_data.qty -= 1; if (buy_data.qty < 0){ buy_data.qty = 0; } buy_data.total = buy_data.qty*buy_data.price; } } }); var app = new Vue({ el: "#app", data: { items: [ { img: "http://chenyiya.com/codepen/product-1.jpg", title: "Beer Bottle", price: "25", id: "beer" }, { img: "http://chenyiya.com/codepen/product-2.jpg", title: "Eco Bag", price: "73", id: "eco-bag" }, { img: "http://chenyiya.com/codepen/product-3.jpg", title: "Paper Bag", price: "35", id: "paper-bag" } ], buyitems: [] }, methods: { total: function(){ var sum = 0; this.buyitems.forEach(function(buyitem){ sum += parseInt(buyitem.total); }); return sum; } } }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: