Vue Shopping Cart – VueJS Shopping Cart – vue js e-commerce
In this Post We Will Explain About is Vue Shopping Cart – VueJS Shopping Cart – vue js e-commerce With Example and Demo.Welcome on Pakainfo.com – Vue Shopping Cart, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Creating an Online Shopping Cart Mechanism in vue js Example
In this post we will show you Best way to implement Vue Shopping Cart, hear for simple shopping cart in vue js source code with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
VueJS Shopping Cart Application
In this Example,First of all Add or Inluce External Libs Like as a(jQuery, css etc..), and then create a simple index.php or index.html page.After that crate a simple javascript file like as a index.js or main.js, It is also add your web-application First Header Part to some priorty set.After that Include your relavant CSS Class.
index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Vue.js Shopping Cart Step By step</title>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main-wrapper">
<div class="header"><h1>Vue Shopping Cart Application</h1></div>
<div id="vue">
<cart :cart="cart" :cart-sub-total="sub_total_cart" :live_tax="live_tax" :cart-total="total_cart" :checkout-bool="liveCheckout"></cart>
<Items :cart="cart" :cart-sub-total="sub_total_cart" :live_tax="live_tax" :cart-total="total_cart" :Items-data="itemData"></Items>
<checkout-area v-if="liveCheckout" :cart="cart" :live_tax="live_tax" :cart-sub-total="sub_total_cart" :cart-total="total_cart" :Items-data="itemData" :total-with-live_tax="totalWithTax"></checkout-area>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.js'></script>
<script src="js/index.js"></script>
</body>
</html>
index.js
//@TODO NOTIFICATIONS
Vue.component('Items', {
ready: function () {
var self = this;
document.addEventListener("keydown", function(e) {
if (self.showModal && e.keyCode == 37) {
self.changeProductInModal("prev");
} else if (self.showModal && e.keyCode == 39) {
self.changeProductInModal("next");
} else if (self.showModal && e.keyCode == 27) {
self.hideModal();
}
});
},
template: "<h1>Items</h1>" +
"<div class='Items'>" +
"<div v-for='item in itemData' track-by='$index' class='item {{ item.item | lowercase }}'>" +
"<div class='image' @click='viewItems(item)' v-bind:style='{ backgroundImage: \"url(\" + item.image + \")\" }' style='background-size: cover; background-position: center;'></div>" +
"<div class='name'>{{ item.item }}</div>" +
"<div class='item_desc'>{{ item.item_desc }}</div>" +
"<div class='item_price'>{{ item.item_price | currency }}</div>" +
"<button @click='Cart_toAdd(item)'>Add to Cart</button><br><br></div>" +
"</div>" +
"<div class='wp-modal' v-show='showModal'>" +
"<div class='prevProduct' @click='changeProductInModal(\"prev\")'><i class='fa fa-angle-left'></i></div>" +
"<div class='item_next' @click='changeProductInModal(\"next\")'><i class='fa fa-angle-right'></i></div>" +
"<div class='overlay' @click='hideModal()'></div>" +
"<div class='modal'>" +
"<i class='close fa fa-times' @click='hideModal()'></i>" +
"<div class='imageWrapper'><div class='image' v-bind:style='{ backgroundImage: \"url(\" + data_model.image + \")\" }' style='background-size: cover; background-position: center;' v-on:mouseover='imageMouseOver($event)' v-on:mousemove='imageMouseMove($event)' v-on:mouseout='imageMouseOut($event)'></div></div>" +
"<div class='additionalImages' v-if='data_model.images'>" +
"<div v-for='image in data_model.images' class='additionalImage' v-bind:style='{ backgroundImage: \"url(\" + image.image + \")\" }' style='background-size: cover; background-position: center;' @click='changeImage(image.image)'></div>" +
"</div>" +
"<div class='name'>{{ data_model.item }}</div>" +
"<div class='item_desc'>{{ data_model.item_desc }}</div>" +
"<div class='item_details'>{{ data_model.item_details }}</div>" +
"<h3 class='item_price'>{{ data_model.item_price | currency }}</h3>" +
"<label for='liveAmount_modal'>QTY</label>" +
"<input id='liveAmount_modal' value='{{ liveAmount_modal }}' v-model='liveAmount_modal' class='amount' @keyup.enter='modalAddToCart(data_model), hideModal()'/>" +
"<button @click='modalAddToCart(data_model), hideModal()'>Add to Cart</button>" +
"</div></div>",
props: ['itemData', 'cart', 'live_tax', 'sub_total_cart', 'total_cart'],
data: function() {
return {
showModal: false,
data_model: {},
liveAmount_modal: 1,
timeout: "",
mousestop: ""
}
},
methods: {
Cart_toAdd: function(item) {
var found = false;
for (var i = 0; i < vue.cart.length; i++) {
if (vue.cart[i].sku === item.sku) {
var newProduct = vue.cart[i];
newProduct.item_qty = newProduct.item_qty + 1;
vue.cart.$set(i, newProduct);
//console.log("DUPLICATE", vue.cart[i].item + "'s item_qty is now: " + vue.cart[i].item_qty);
found = true;
break;
}
}
if(!found) {
item.item_qty = 1;
vue.cart.push(item);
}
vue.sub_total_cart = vue.sub_total_cart + item.item_price;
vue.total_cart = vue.sub_total_cart + (vue.live_tax * vue.sub_total_cart);
vue.liveCheckout = true;
},
modalAddToCart: function(data_model) {
var self = this;
for(var i = 0; i < self.liveAmount_modal; i++) {
self.Cart_toAdd(data_model);
}
self.liveAmount_modal = 1;
},
viewItems: function(item) {
var self = this;
//self.data_model = item;
self.data_model = (JSON.parse(JSON.stringify(item)));
self.showModal = true;
},
changeProductInModal: function(direction) {
var self = this,
productsLength = vue.itemData.length,
currentProduct = self.data_model.sku,
newProductId,
newProduct;
if(direction === "next") {
newProductId = currentProduct + 1;
if(currentProduct >= productsLength) {
newProductId = 1;
}
} else if(direction === "prev") {
newProductId = currentProduct - 1;
if(newProductId === 0) {
newProductId = productsLength;
}
}
//console.log(direction, newProductId);
for (var i = 0; i < productsLength; i++) {
if (vue.itemData[i].sku === newProductId) {
self.viewItems(vue.itemData[i]);
}
}
},
hideModal: function() {
//hide modal and empty modal data
var self = this;
self.data_model = {};
self.showModal = false;
},
changeImage: function(image) {
var self = this;
self.data_model.image = image;
},
imageMouseOver: function(event) {
event.target.style.transform = "scale(2)";
},
imageMouseMove: function(event) {
var self = this;
event.target.style.transform = "scale(2)";
self.timeout = setTimeout(function() {
event.target.style.transformOrigin = ((event.pageX - event.target.getBoundingClientRect().left) / event.target.getBoundingClientRect().width) * 100 + '% ' + ((event.pageY - event.target.getBoundingClientRect().top - window.pageYOffset) / event.target.getBoundingClientRect().height) * 100 + "%";
}, 50);
self.mouseStop = setTimeout(function() {
event.target.style.transformOrigin = ((event.pageX - event.target.getBoundingClientRect().left) / event.target.getBoundingClientRect().width) * 100 + '% ' + ((event.pageY - event.target.getBoundingClientRect().top - window.pageYOffset) / event.target.getBoundingClientRect().height) * 100 + "%";
}, 100);
},
imageMouseOut: function(event) {
event.target.style.transform = "scale(1)";
}
}
});
Vue.component('cart', {
template: '<div class="cart">' +
'<span class="cart-size" @click="cartShow = !cartShow"> {{ cart | live_size_cart }} </span><i class="fa fa-shopping-cart" @click="cartShow = !cartShow"></i>' +
'<div class="cart-items" v-show="cartShow">' +
'<table class="cartTable">' +
'<tbody>' +
'<tr class="item" v-for="item in cart">' +
'<td class="align-left"><div class="cartImage" @click="deleteItem(item)" v-bind:style="{ backgroundImage: \'url(\' + item.image + \')\' }" style="background-size: cover; background-position: center;"><i class="close fa fa-times"></i></div></td>' +
'<td class="center-live-align"><button @click="changeQty(item, \'decriment\')"><i class="close fa fa-minus"></i></button></td>' +
'<td class="center-live-align">{{ cart[$index].item_qty }}</td>' +
'<td class="center-live-align"><button @click="changeQty(item, \'incriment\')"><i class="close fa fa-plus"></i></button></td>' +
'<td class="center-live-align">{{ cart[$index] | customPluralize }}</td>' +
'<td>{{ item.item_price | currency }}</td>' +
'</tbody>' +
'<table>' +
'</div>' +
'<h4 class="sub_total_cart" v-show="cartShow"> {{ sub_total_cart | currency }} </h4></div>' +
'<button class="clearCart" v-show="liveCheckout" @click="clearCart()"> Clear Cart </button>' +
'<button class="checkoutCart" v-show="liveCheckout" @click="propagateCheckout()"> Checkout </button>',
props: ['liveCheckout', 'cart', 'live_size_cart', 'sub_total_cart', 'live_tax', 'total_cart'],
data: function() {
return {
cartShow: false
}
},
filters: {
customPluralize: function(cart) {
var item_newname;
if(cart.item_qty > 1) {
if(cart.item === "angular") {
item_newname = cart.item + "es";
} else if(cart.item === "vuejs") {
item_newname = cart.item + "ies";
item_newname = item_newname.replace("y", "");
} else {
item_newname = cart.item + "s";
}
return item_newname;
}
return cart.item;
},
live_size_cart: function(cart) {
var live_size_cart = 0;
for (var i = 0; i < cart.length; i++) {
live_size_cart += cart[i].item_qty;
}
return live_size_cart;
}
},
methods: {
deleteItem: function(item) {
vue.cart.$remove(item);
vue.sub_total_cart = vue.sub_total_cart - (item.item_price * item.item_qty);
vue.total_cart = vue.sub_total_cart + (vue.live_tax * vue.sub_total_cart);
if(vue.cart.length <= 0) {
vue.liveCheckout = false;
}
},
clearCart: function() {
vue.cart = [];
vue.sub_total_cart = 0;
vue.total_cart = 0;
vue.liveCheckout = false;
this.cartShow = false;
},
changeQty: function(item, direction) {
var qtyChange;
for (var i = 0; i < vue.cart.length; i++) {
if (vue.cart[i].sku === item.sku) {
var newProduct = vue.cart[i];
if(direction === "incriment") {
newProduct.item_qty = newProduct.item_qty + 1;
vue.cart.$set(i, newProduct);
} else {
newProduct.item_qty = newProduct.item_qty - 1;
if(newProduct.item_qty == 0) {
vue.cart.$remove(newProduct);
} else {
vue.cart.$set(i, newProduct);
}
}
}
}
if(direction === "incriment") {
vue.sub_total_cart = vue.sub_total_cart + item.item_price;
} else {
vue.sub_total_cart = vue.sub_total_cart - item.item_price;
}
vue.total_cart = vue.sub_total_cart + (vue.live_tax * vue.sub_total_cart);
if(vue.cart.length <= 0) {
vue.liveCheckout = false;
}
},
propagateCheckout: function() {
vue.$dispatch("checkoutRequest");
}
}
});
Vue.component('checkout-area', {
template: "<h1>Checkout Area</h1>" +
'<div class="checkout-area">' +
'<span> {{ cart | live_size_cart }} </span><i class="fa fa-shopping-cart"></i>' +
'<table>' +
'<thead>' +
'<tr>' +
'<th class="center-live-align">SKU</th>' +
'<th>Name</th>' +
'<th>Description</th>' +
'<th class="align-right">Amount</th>' +
'<th class="align-right">Price</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr v-for="item in cart" track-by="$index">' +
'<td class="center-live-align">{{ item.sku }}</td>' +
'<td>{{ item.item }}</td>' +
'<td>{{ item.item_desc }}</td>' +
'<td class="align-right">{{ cart[$index].item_qty }}</td>' +
'<td class="align-right">{{ item.item_price | currency }}</td>' +
'</tr>' +
//'<button @click="deleteItem(item)"> X </button></div>' +
'<tr>' +
'<td> </td>' +
'<td> </td>' +
'<td> </td>' +
'<td> </td>' +
'<td> </td>' +
'</tr>' +
'<tr>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td class="align-right">Subtotal:</td>' +
'<td class="align-right"><h4 v-if="sub_total_cart != 0"> {{ sub_total_cart | currency }} </h4></td>' +
'</tr>' +
'<tr>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td class="align-right">Tax:</td>' +
'<td class="align-right"><h4 v-if="sub_total_cart != 0"> {{ total_cart - sub_total_cart | currency }} </h4></td>' +
'</tr>' +
'<tr>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'<td class="align-right vert-bottom">Total:</td>' +
'<td class="align-right vert-bottom"><h2 v-if="sub_total_cart != 0"> {{ total_cart | currency }} </h2></td>' +
'</tr>' +
'</tbody>' +
'</table>' +
'<button v-show="sub_total_cart" @click="checkoutModal()">Checkout</button></div>' +
"<div class='wp-modal' v-show='showModal'>" +
"<div class='overlay' @click='hideModal()'></div>" +
"<div class='modal checkout'>" +
"<i class='close fa fa-times' @click='hideModal()'></i>" +
"<h1>Checkout</h1>" +
"<div>We accept: <i class='fa fa-stripe'></i> <i class='fa fa-cc-visa'></i> <i class='fa fa-cc-mastercard'></i> <i class='fa fa-cc-amex'></i> <i class='fa fa-cc-discover'></i></div><br>" +
"<h3> Subtotal: {{ sub_total_cart | currency }} </h3>" +
"<h3> Tax: {{ total_cart - sub_total_cart | currency }} </h4>" +
"<h1> Total: {{ total_cart | currency }} </h3>" +
"<br><div>In this post, live24u is blog post our payment processor goes</div>" +
"</div>",
props: ['cart', 'live_size_cart', 'sub_total_cart', 'live_tax', 'total_cart'],
data: function() {
return {
showModal: false
}
},
filters: {
customPluralize: function(cart) {
var item_newname;
if(cart.item_qty > 1) {
item_newname = cart.item + "s";
return item_newname;
}
return cart.item;
},
live_size_cart: function(cart) {
var live_size_cart = 0;
for (var i = 0; i < cart.length; i++) {
live_size_cart += cart[i].item_qty;
}
return live_size_cart;
}
},
methods: {
deleteItem: function(item) {
vue.cart.$remove(item);
vue.sub_total_cart = vue.sub_total_cart - (item.item_price * item.item_qty);
vue.total_cart = vue.sub_total_cart + (vue.live_tax * vue.sub_total_cart);
if(vue.cart.length <= 0) {
vue.liveCheckout = false;
}
},
checkoutModal: function() {
var self = this;
self.showModal = true;
console.log("CHECKOUT", self.total_cart);
},
hideModal: function() {
var self = this;
self.showModal = false;
}
},
events: {
"checkoutRequest": function() {
var self = this;
self.checkoutModal();
}
}
});
Vue.config.debug = false;
var vue = new Vue({
el: "#vue",
data: {
itemData: [
{
sku: 1,
item: "angular",
image: "https://www.pakainfo.com/w3free/img/angular.jpg",
images: [
{ image: "https://www.pakainfo.com/w3free/img/angular.jpg" },
{ image: "https://www.pakainfo.com/w3free/img/angular.jpg" },
{ image: "https://www.pakainfo.com/w3free/img/angular.jpg" },
{ image: "https://www.pakainfo.com/w3free/img/angular.jpg" }
],
item_desc: "In this post, live24u is a angular",
item_details: "In this post, live24u is blog post some information on monkies would step by step. In this post, live24u angular done seent some shit.",
item_price: 15.50
},
{
sku: 2,
item: "Kitten",
image: "https://www.pakainfo.com/w3free/img/angular.jpg",
item_desc: "In this post, live24u is a kitten",
item_details: "In this post, live24u is blog post some information on kittens would step by step. Shout out kittens for being adorable.",
item_price: 100
},
{
sku: 3,
item: "vuejs",
image: "https://www.pakainfo.com/w3free/img/angular.jpg",
item_desc: "In this post, live24u is a vuejs",
item_details: "In this post, live24u is blog post some information on vuejs would step by step. Damn nature, you vuejs.",
item_price: 15
},
{
sku: 4,
item: "vuejs",
image: "https://www.pakainfo.com/w3free/img/angular.jpg",
item_desc: "In this post, live24u is a puppy",
item_details: "In this post, live24u is blog post some information on puppies would step by step. Shout out puppies for being adorable.",
item_price: 5
},
{
sku: 5,
item: "Apple",
image: "https://www.pakainfo.com/w3free/img/angular.jpg",
item_desc: "In this post, live24u is an apple",
item_details: "In this post, live24u is blog post some information on apples would step by step. Shout out apples for being implementation.",
item_price: 1
},
{
sku: 6,
item: "Orange",
image: "https://www.pakainfo.com/w3free/img/angular.jpg",
item_desc: "In this post, live24u is an orange",
item_details: "In this post, live24u is blog post some information on oranges would step by step. Shout out oranges for being implementation.",
item_price: 1.1
},
{
sku: 7,
item: "angular",
image: "https://www.pakainfo.com/w3free/img/angular.jpg",
item_desc: "In this post, live24u is a peach",
item_details: "In this post, live24u is blog post some information on peaches would step by step. Shout out peaches for being implementation.",
item_price: 1.5
},
{
sku: 8,
item: "Mango",
image: "https://www.pakainfo.com/w3free/img/angular.jpg",
item_desc: "In this post, live24u is a mango",
item_details: "In this post, live24u is blog post some information on mangos would step by step. Shout out mangos for being implementation.",
item_price: 2
},
{
sku: 9,
item: "Cognac",
image: "https://www.pakainfo.com/w3free/img/angular.jpg",
item_desc: "In this post, live24u is a glass of cognac",
item_details: "In this post, live24u is blog post some information on cognac would step by step. I'm like hey whats up, hello.",
item_price: 17.38
},
{
sku: 10,
item: "Chain",
image: "https://www.pakainfo.com/w3free/img/angular.jpg",
item_desc: "In this post, live24u is a chain",
item_details: "In this post, live24u is blog post some item_details on chains would step by step. 2Chainz but I got me a few on.",
item_price: 17.38
}
],
liveCheckout: false,
cart: [],
sub_total_cart: 0,
live_tax: 0.065,
total_cart: 0
},
events: {
"checkoutRequest": function() {
vue.$broadcast("checkoutRequest");
}
}
});
You are Most welcome in my youtube Channel Please shubscibe my channel. and give me feedBackMore Details……
Angularjs Example
I hope you have Got What is simple ecommerce shopping cart vue js with PHP And how it works.I would Like to have FeaeBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.