Vue cart

Developer
Dima
Size
4,497 Kb
Views
30,360
  1. Vue cart Previews
  2. Vue cart HTML Codes
  3. Vue cart CSS Codes
  4. Vue cart JS Codes

How do I make an vue cart?

Vue shopping-cart. What is a vue cart? How do you make a vue cart? This script and codes were developed by Dima on 26 September 2022, Monday.

Vue cart Previews
IQ Test

Vue cart - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>vue cart</title> <link rel="stylesheet" href="css/style.css">
</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 &gt; 0"><b>{{ item.qty }}</b> &times; {{ item.name }} {{ item.price }} <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> </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 cart - Script Codes CSS Codes

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

Vue cart - Script Codes JS Codes

"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 (this.products[i].id === id) { delete this.products[i].qty; break; } } }, del: function del(index, id) { this.cart.splice(index, 1); this.unblock(id); } }
});
Vue cart - Script Codes
Vue cart - Script Codes
Home Page Home
Developer Dima
Username dimaZubkov
Uploaded September 26, 2022
Rating 3
Size 4,497 Kb
Views 30,360
Do you need developer help for Vue 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
A Pen by Dima
Three js
Ken Burns effect CSS only
Glitch
Ken Burns Effect
Vue radio
Css masonry
Angular T-shirt shop
Responsive typography harmony
Star Rating
Create amazing video scripts 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!