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
” +
“
“
“
” +
“
” +
“
” +
“
” +
“
” +
“
” +
“
“
” +
“
” +
“
” +
“
“” +
“
” +
“
“
” +
“
” +
“
” +
“
” +
“
” +
“
{{ modalData.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;
}
} 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 }} |
| 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 }} |
‘ +
‘
‘ +
“
“
” +
“
“” +
“
Checkout
” +
“
” +
“
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: "http://infinityknow.com/241793/chimpanzee.jpg", images: [ { image: "http://infinityknow.com/241793/chimpanzee.jpg" }, { image: "http://infinityknow.com/241793/gorilla.jpg" }, { image: "http://infinityknow.com/241793/red-laptop.jpg" }, { image: "http://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: "http://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: "http://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: "http://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: "http://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: "http://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: "http://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: "http://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: "http://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: "http://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.