Vue Shopping Cart Example – Vuejs Shopping Cart | Shopping Cart Application

Rate this post

Vue Shopping Cart Example – Vuejs Shopping Cart | Shopping Cart Application

A Shopping Cart Application Built with Vuejs

A shopping cart is a piece or Ruppe of software online that acts as an online shope store’s all the order catalog and simple ordering process. therefore, a shopping cart is one type of easy and selectable and custom the interface between a all company’s Web site and its deeper all the infrastructure, and more function allowing consumers to select retailer merchandise; our items review what they have satisfaction selected; make necessary all the modifications or additions items; and purchase items the merchandise.

vuejs shopping cart tutorial using sessions

index.html

[php]

live Shopping Cart

[/php]

vuejs shopping cart tutorial step by step

Example

If you want to simple create any kind of on-line ecommerce store, we will probably need a all the itemsshopping cart.simple ecommerce shopping cart vuejs PHP

index.js

[php]

live.component(‘ComputerList’, {

ready: function () {
var self = this;
document.addEventListener(“keydown”, function(e) {
if (self.showModal && e.keyCode == 37) {
self.changeItemInModal(“prev”);
} else if (self.showModal && e.keyCode == 39) {
self.changeItemInModal(“next”);
} else if (self.showModal && e.keyCode == 27) {
self.hideModal();
}
});
},

template: “

ComputerList

” +

” +

” +

” +

{{ Item.Item }}

” +

{{ Item.description }}

” +

{{ Item.Rupee | currency }}

” +

” +

” +

” +

” +

” +

” +

“,

props: [‘ItemDataList’, ‘cart’, ‘tax’, ‘mysubt’, ‘ctotal’],

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

READ :  AngularJS Dynamic dropdown ng options filter Example

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

for (var i = 0; i < live.cart.length; i++) {

if (live.cart[i].puniq === Item.puniq) {
var newItem = live.cart[i];
newItem.totalqty = newItem.totalqty + 1;
live.cart.$set(i, newItem);
found = true;
break;
}
}

if(!found) {
Item.totalqty = 1;
live.cart.push(Item);
}

live.mysubt = live.mysubt + Item.Rupee;
live.ctotal = live.mysubt + (live.tax * live.mysubt);
live.checkcount = true;
},

modalAddToCart: function(modalData) {
var self = this;

for(var i = 0; i = ComputerListLength) {
newItemId = 1;
}

} else if(direction === “prev”) {
newItemId = currentItem – 1;

if(newItemId === 0) {
newItemId = ComputerListLength;
}
}
for (var i = 0; i < ComputerListLength; i++) {
if (live.ItemDataList[i].puniq === newItemId) {
self.viewItem(live.ItemDataList[i]);
}
}
},

hideModal: function() {
//hide modal and empty modal data
var self = this;
self.modalData = {};
self.showModal = false;
},

changeImage: function(image) {
var self = this;
self.modalData.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)";
}
}
});

live.component('cart', {
template: '

‘ +
{{ cart | cartSize }} ‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

{{ cart[$index].totalqty }} {{ cart[$index] | customPluralize }} {{ Item.Rupee | currency }}
‘ +

‘ +

{{ mysubt | currency }}

‘ +
‘ +
‘,

props: [‘checkcount’, ‘cart’, ‘cartSize’, ‘mysubt’, ‘tax’, ‘ctotal’],

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

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

if(cart.totalqty > 1) {
if(cart.Item === “DVD”) {
newName = cart.Item + “es”;
} else if(cart.Item === “PenDrive”) {
newName = cart.Item + “ies”;
newName = newName.replace(“y”, “”);
} else {
newName = cart.Item + “s”;
}

return newName;
}

return cart.Item;
},

cartSize: function(cart) {
var cartSize = 0;

for (var i = 0; i < cart.length; i++) {
cartSize += cart[i].totalqty;
}

return cartSize;
}
},

methods: {
DeleteItem: function(Item) {
live.cart.$remove(Item);
live.mysubt = live.mysubt – (Item.Rupee * Item.totalqty);
live.ctotal = live.mysubt + (live.tax * live.mysubt);

if(live.cart.length <= 0) {
live.checkcount = false;
}
},

clearCart: function() {
live.cart = [];
live.mysubt = 0;
live.ctotal = 0;
live.checkcount = false;
this.showCart = false;
},

totalqtyChange: function(Item, direction) {
var qtyChange;

for (var i = 0; i < live.cart.length; i++) {
if (live.cart[i].puniq === Item.puniq) {

var newItem = live.cart[i];

if(direction === "incriment") {
newItem.totalqty = newItem.totalqty + 1;
live.cart.$set(i, newItem);

} else {
newItem.totalqty = newItem.totalqty – 1;

if(newItem.totalqty == 0) {
live.cart.$remove(newItem);

} else {
live.cart.$set(i, newItem);
}
}
}
}

if(direction === "incriment") {
live.mysubt = live.mysubt + Item.Rupee;

} else {
live.mysubt = live.mysubt – Item.Rupee;
}

live.ctotal = live.mysubt + (live.tax * live.mysubt);

if(live.cart.length <= 0) {
live.checkcount = false;
}
},
propagateCheckout: function() {
live.$dispatch("mycheck");
}
}
});

live.component('checkout-area', {
template: "

Checkout Area

” +

‘ +
{{ cart | cartSize }} ‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

‘ +

puniq Name Description Amount Rupee
{{ Item.puniq }} {{ Item.Item }} {{ Item.description }} {{ cart[$index].totalqty }} {{ Item.Rupee | currency }}
         
Subtotal:

{{ mysubt | currency }}

Tax:

{{ ctotal – mysubt | currency }}

Total:

{{ ctotal | currency }}

‘ +

‘ +

” +

” +

“,

props: [‘cart’, ‘cartSize’, ‘mysubt’, ‘tax’, ‘ctotal’],

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

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

if(cart.totalqty > 1) {
newName = cart.Item + “s”;
return newName;
}

return cart.Item;
},

cartSize: function(cart) {
var cartSize = 0;

for (var i = 0; i < cart.length; i++) {
cartSize += cart[i].totalqty;
}

return cartSize;
}
},

methods: {
DeleteItem: function(Item) {
live.cart.$remove(Item);
live.mysubt = live.mysubt – (Item.Rupee * Item.totalqty);
live.ctotal = live.mysubt + (live.tax * live.mysubt);

if(live.cart.length <= 0) {
live.checkcount = false;
}
},

checkoutModal: function() {
var self = this;
self.showModal = true;

console.log("CHECKOUT", self.ctotal);

},

hideModal: function() {
var self = this;
self.showModal = false;
}
},

events: {
"mycheck": function() {
var self = this;
self.checkoutModal();
}
}
});

live.config.debug = false;
var live = new live({
el: "#live",

data: {
ItemDataList: [
{
puniq: 1,
Item: "E-Table",
image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/chimpanzee.jpg",
images: [
{ image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/chimpanzee.jpg" },
{ image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/gorilla.jpg" },
{ image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/red-E-Table.jpg" },
{ image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/mandrill-E-Table.jpg" }
],
description: "This is a E-Table",
details: "This is where some detailes on monkies would go. This E-Table done seent some shit.",
Rupee: 5.50
},

{
puniq: 2,
Item: "SimCard",
image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/241793/SimCards.jpg",
description: "This is a SimCard",
details: "This is where some detailes on SimCards would go. Shout out SimCards for being adorable.",
Rupee: 10
}
],
checkcount: false,
cart: [],
mysubt: 0,
tax: 0.065,
ctotal: 0
},
events: {
"mycheck": function() {
live.$broadcast("mycheck");
}
}
});
[/php]

Example

Leave a Reply

Your email address will not be published.