Vue shopping cart

Developer
Dima
Size
6,338 Kb
Views
14,168
  1. Vue shopping cart Previews
  2. Vue shopping cart HTML Codes
  3. Vue shopping cart CSS Codes
  4. Vue shopping cart JS Codes

How do I make an vue shopping cart?

Vue.js shopping cart. What is a vue shopping cart? How do you make a vue shopping cart? This script and codes were developed by Dima on 15 December 2022, Thursday.

Vue shopping cart Previews
IQ Test

Vue shopping cart - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>vue shopping cart</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</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> &times; {{ item.name }} {{ item.price }} ₽</p> <button @click="item.qty += 1">+1</button> <button v-if="item.qty &gt; 1" @click="(item.qty &gt; 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='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js'></script> <script src="js/index.js"></script>
</body>
</html>

Vue shopping cart - Script Codes CSS Codes

* { 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;
}

Vue shopping cart - Script Codes JS Codes

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 (this.products[i].id === id) { delete this.products[i].qty; break; } } }, del(index, id) { this.cart.splice(index, 1); this.unblock(id); } }
});
Vue shopping cart - Script Codes
Vue shopping cart - Script Codes
Home Page Home
Developer Dima
Username dimaZubkov
Uploaded December 15, 2022
Rating 3
Size 6,338 Kb
Views 14,168
Do you need developer help for Vue shopping cart?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dima (dimaZubkov) Script Codes
Name
Audio button
Fluid typography
Section Slides
Vue cart
Section scroll
Ken Burns effect CSS only
Star Rating
Glitch
Glitch
Ken Burns Effect
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!