Vuejs Shopping Cart Application vue ecommerce

Rate this post

Vuejs Shopping Cart Application vue ecommerce

In this Post We Will Explain About is Vuejs Shopping Cart Application vue ecommerce With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Shopping Cart Application Built with Vuejs

In this post we will show you Best way to implement Shopping Cart Application using Vuejs, hear for How to Create Shopping Cart with Vuejs with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Vuejs Shopping Cart Application

index.html
[php]

Vue Shopping Cart – infinityknow.com



[/php]

index.js
[php]
Vue.component(‘items’, {

ready: function () {
var myself = this;
document.addEventListener(“keydown”, function(e) {
if (myself.newModal && e.keyCode == 37) {
myself.changeItemsInModal(“prev”);
} else if (myself.newModal && e.keyCode == 39) {
myself.changeItemsInModal(“next”);
} else if (myself.newModal && e.keyCode == 27) {
myself.dataHidePopup();
}
});
},

template: “

Items

” +

” +

” +

” +

{{ item.item }}

” +

{{ item.itemdesc }}

” +

{{ item.productprice | currency }}

” +

” +

” +

” +

” +

” +

” +

“,

props: [‘itemsData’, ‘shopCrat’, ‘billtax’, ‘shopcartSubtotal’, ‘shptotal’],

data: function() {
return {
newModal: false,
modalData: {},
datamodalAmt: 1,
timeout: “”,
mousestop: “”
}
},

methods: {
addToCart: function(item) {
var found = false;

for (var i = 0; i < vue.shopCrat.length; i++) { if (vue.shopCrat[i].sku === item.sku) { var newProduct = vue.shopCrat[i]; newProduct.qty = newProduct.qty + 1; vue.shopCrat.$set(i, newProduct); found = true; break; } } if(!found) { item.qty = 1; vue.shopCrat.push(item); } vue.shopcartSubtotal = vue.shopcartSubtotal + item.productprice; vue.shptotal = vue.shopcartSubtotal + (vue.billtax * vue.shopcartSubtotal); vue.checkCartData = true; }, modalAddToCart: function(modalData) { var myself = this; for(var i = 0; i < myself.datamodalAmt; i++) { myself.addToCart(modalData); } myself.datamodalAmt = 1; }, viewItem: function(item) { var myself = this; myself.modalData = (JSON.parse(JSON.stringify(item))); myself.newModal = true; }, changeItemsInModal: function(direction) { var myself = this, ItemsLength = vue.itemsData.length, currentProduct = myself.modalData.sku, newProductId, newProduct; if(direction === "next") { newProductId = currentProduct + 1; if(currentProduct >= ItemsLength) {
newProductId = 1;
}

READ :  Introduction To ASP.NET Delegates and Events in C#

} else if(direction === “prev”) {
newProductId = currentProduct – 1;

if(newProductId === 0) {
newProductId = ItemsLength;
}
}

for (var i = 0; i < ItemsLength; i++) { if (vue.itemsData[i].sku === newProductId) { myself.viewItem(vue.itemsData[i]); } } }, dataHidePopup: function() { var myself = this; myself.modalData = {}; myself.newModal = false; }, changeImage: function(image) { var myself = this; myself.modalData.image = image; }, imageMouseOver: function(getevent) { getevent.target.style.transform = "scale(2)"; }, imageMouseMove: function(getevent) { var myself = this; getevent.target.style.transform = "scale(2)"; myself.timeout = setTimeout(function() { getevent.target.style.transformOrigin = ((getevent.pageX - getevent.target.getBoundingClientRect().left) / getevent.target.getBoundingClientRect().width) * 100 + '% ' + ((getevent.pageY - getevent.target.getBoundingClientRect().top - window.pageYOffset) / getevent.target.getBoundingClientRect().height) * 100 + "%"; }, 50); myself.mouseStop = setTimeout(function() { getevent.target.style.transformOrigin = ((getevent.pageX - getevent.target.getBoundingClientRect().left) / getevent.target.getBoundingClientRect().width) * 100 + '% ' + ((getevent.pageY - getevent.target.getBoundingClientRect().top - window.pageYOffset) / getevent.target.getBoundingClientRect().height) * 100 + "%"; }, 100); }, imageMouseOut: function(getevent) { getevent.target.style.transform = "scale(1)"; } } }); Vue.component('shopCrat', { template: '

‘ +
{{ shopCrat | totalcartsize }} ‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

{{ shopCrat[$index].qty }} {{ shopCrat[$index] | customPluralize }} {{ item.productprice | currency }}
‘ +

‘ +

{{ shopcartSubtotal | currency }}

‘ +
‘ +
‘,

props: [‘checkCartData’, ‘shopCrat’, ‘totalcartsize’, ‘shopcartSubtotal’, ‘billtax’, ‘shptotal’],

data: function() {
return {
showCart: false
}
},

filters: {
customPluralize: function(shopCrat) {
var newName;

if(shopCrat.qty > 1) {
if(shopCrat.item === “Peach”) {
newName = shopCrat.item + “es”;
} else if(shopCrat.item === “Puppy”) {
newName = shopCrat.item + “ies”;
newName = newName.replace(“y”, “”);
} else {
newName = shopCrat.item + “s”;
}

return newName;
}

return shopCrat.item;
},

totalcartsize: function(shopCrat) {
var totalcartsize = 0;

for (var i = 0; i < shopCrat.length; i++) { totalcartsize += shopCrat[i].qty; } return totalcartsize; } }, methods: { deleteItems: function(item) { vue.shopCrat.$remove(item); vue.shopcartSubtotal = vue.shopcartSubtotal - (item.productprice * item.qty); vue.shptotal = vue.shopcartSubtotal + (vue.billtax * vue.shopcartSubtotal); if(vue.shopCrat.length <= 0) { vue.checkCartData = false; } }, clearCart: function() { vue.shopCrat = []; vue.shopcartSubtotal = 0; vue.shptotal = 0; vue.checkCartData = false; this.showCart = false; }, quantityChange: function(item, direction) { var qtyChange; for (var i = 0; i < vue.shopCrat.length; i++) { if (vue.shopCrat[i].sku === item.sku) { var newProduct = vue.shopCrat[i]; if(direction === "incriment") { newProduct.qty = newProduct.qty + 1; vue.shopCrat.$set(i, newProduct); } else { newProduct.qty = newProduct.qty - 1; if(newProduct.qty == 0) { vue.shopCrat.$remove(newProduct); } else { vue.shopCrat.$set(i, newProduct); } } } } if(direction === "incriment") { vue.shopcartSubtotal = vue.shopcartSubtotal + item.productprice; } else { vue.shopcartSubtotal = vue.shopcartSubtotal - item.productprice; } vue.shptotal = vue.shopcartSubtotal + (vue.billtax * vue.shopcartSubtotal); if(vue.shopCrat.length <= 0) { vue.checkCartData = false; } }, propagateCheckout: function() { vue.$dispatch("checkoutRequest"); } } }); Vue.component('checkout-area', { template: "

Checkout Area

” +

‘ +
{{ shopCrat | totalcartsize }} ‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +
//’

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

SKU Name Description Amount Price
{{ item.sku }} {{ item.item }} {{ item.itemdesc }} {{ shopCrat[$index].qty }} {{ item.productprice | currency }}
         
Subtotal:

{{ shopcartSubtotal | currency }}

Tax:

{{ shptotal – shopcartSubtotal | currency }}

Total:

{{ shptotal | currency }}

‘ +

‘ +

” +

” +

“,

props: [‘shopCrat’, ‘totalcartsize’, ‘shopcartSubtotal’, ‘billtax’, ‘shptotal’],

data: function() {
return {
newModal: false
}
},

filters: {
customPluralize: function(shopCrat) {
var newName;

if(shopCrat.qty > 1) {
newName = shopCrat.item + “s”;
return newName;
}

return shopCrat.item;
},

totalcartsize: function(shopCrat) {
var totalcartsize = 0;

for (var i = 0; i < shopCrat.length; i++) { totalcartsize += shopCrat[i].qty; } return totalcartsize; } }, methods: { deleteItems: function(item) { vue.shopCrat.$remove(item); vue.shopcartSubtotal = vue.shopcartSubtotal - (item.productprice * item.qty); vue.shptotal = vue.shopcartSubtotal + (vue.billtax * vue.shopcartSubtotal); if(vue.shopCrat.length <= 0) { vue.checkCartData = false; } }, checkoutModal: function() { var myself = this; myself.newModal = true; }, dataHidePopup: function() { var myself = this; myself.newModal = false; } }, events: { "checkoutRequest": function() { var myself = this; myself.checkoutModal(); } } }); Vue.config.debug = false; var vue = new Vue({ el: "#vue", data: { itemsData: [ { sku: 1, item: "laptop", image: "https://infinityknow.com/241793/chimpanzee.jpg", images: [ { image: "https://infinityknow.com/241793/chimpanzee.jpg" }, { image: "https://infinityknow.com/241793/gorilla.jpg" }, { image: "https://infinityknow.com/241793/red-laptop.jpg" }, { image: "https://infinityknow.com/241793/mandrill-laptop.jpg" } ], itemdesc: "This is a laptop", details: "This is where some detailes on laptop would go. This laptop done seent some shit.", productprice: 5.50 }, { sku: 2, item: "computers", image: "https://infinityknow.com/241793/computers.jpg", itemdesc: "This is a computers", details: "This is where some detailes on computers would go. Shout out computers for being adorable.", productprice: 10 }, { sku: 3, item: "DVD", image: "https://infinityknow.com/241793/DVD.jpg", itemdesc: "This is a DVD", details: "This is where some detailes on DVD would go. Damn nature, you DVD.", productprice: 15 }, { sku: 4, item: "pendrive", image: "https://infinityknow.com/241793/dog.jpg", itemdesc: "This is a pendrive", details: "This is where some detailes on pendrive would go. Shout out pendrive for being adorable.", productprice: 5 }, { sku: 5, item: "mouse", image: "https://infinityknow.com/241793/mouse.jpg", itemdesc: "This is an mouse", details: "This is where some detailes on mouse would go. Shout out mouse for being delicious.", productprice: 1 }, { sku: 6, item: "Orange", image: "https://infinityknow.com/241793/orange.jpg", itemdesc: "This is an orange", details: "This is where some detailes on oranges would go. Shout out oranges for being delicious.", productprice: 1.1 }, { sku: 7, item: "Peach", image: "https://infinityknow.com/241793/peach.jpg", itemdesc: "This is a peach", details: "This is where some detailes on peaches would go. Shout out peaches for being delicious.", productprice: 1.5 }, { sku: 8, item: "Mango", image: "https://infinityknow.com/241793/mango.png", itemdesc: "This is a mango", details: "This is where some detailes on mangos would go. Shout out mangos for being delicious.", productprice: 2 }, { sku: 9, item: "Cognac", image: "https://infinityknow.com/241793/cognac.jpg", itemdesc: "This is a glass of cognac", details: "This is where some detailes on cognac would go. I'm like hey whats up, hello.", productprice: 17.38 }, { sku: 10, item: "Chain", image: "https://infinityknow.com/241793/chain.jpg", itemdesc: "This is a chain", details: "This is where some details on chains would go. 2Chainz but I got me a few on.", productprice: 17.38 } ], checkCartData: false, shopCrat: [], shopcartSubtotal: 0, billtax: 0.065, shptotal: 0 } events: { "checkoutRequest": function() { vue.$broadcast("checkoutRequest"); } } }); [/php] Example

I hope you have Got Shopping Cart Application using Vuejs And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.

Leave a Reply

Your email address will not be published.