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

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

<div class="main-wrapper">
  <div class="header"><h1>live Shopping Cart</h1></div>
  <div id="live">
    
    
    
  </div>
</div>

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

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: "<h1>ComputerList</h1>" + 
  "<div class='ComputerList'>" +
  "<div class='Item {{ Item.Item | lowercase }}'>" + 
  "<div class='image'></div>" +
  "<div class='name'>{{ Item.Item }}</div>" +
  "<div class='description'>{{ Item.description }}</div>" +
  "<div class='Rupee'>{{ Item.Rupee | currency }}</div>" +
  "<button>Add to Cart</button><br><br></div>" +
  "</div>" +
  "<div class='modalWrapper'>" +
  "<div class='prevItem'><i class='fa fa-angle-left'></i></div>" +
  "<div class='nextItem'><i class='fa fa-angle-right'></i></div>" +
  "<div class='overlay'></div>" + 
  "<div class='modal'>" + 
  "<i class='close fa fa-times'></i>" + 
  "<div class='imageWrapper'><div class='image'></div></div>" +
  "<div class='additionalImages'>" + 
  "<div class='additionalImage'></div>" +
  "</div>" +
  "<div class='name'>{{ modalData.Item }}</div>" +
  "<div class='description'>{{ modalData.description }}</div>" +
  "<div class='details'>{{ modalData.details }}</div>" +
  "<h3 class='Rupee'>{{ modalData.Rupee | currency }}</h3>" +
  "<label for='modalAmount'>QTY</label>" +
  "" +
  "<button>Add to Cart</button>" +
  "</div></div>",

  props: ['ItemDataList', 'cart', 'tax', 'mysubt', 'ctotal'],

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

  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: '<div class="cart">' + 
  '<span class="cart-size"> {{ cart | cartSize }} </span><i class="fa fa-shopping-cart"></i>' +
  '<div class="cart-items">' +
  '<table class="cartTable">' +
  '<tbody>' +
  '<tr class="Item">' +
  '<td class="align-left"><div class="cartImage"><i class="close fa fa-times"></i></div></td>' +
  '<td><button><i class="close fa fa-minus"></i></button></td>' +
  '<td>{{ cart[$index].totalqty }}</td>' +
  '<td><button><i class="close fa fa-plus"></i></button></td>' +
  '<td>{{ cart[$index] | customPluralize }}</td>' +
  '<td>{{ Item.Rupee | currency }}</td>' +
  '</tbody>' +
  '<table>' +
  '</div>' +
  '<h4 class="mysubt"> {{ mysubt | currency }} </h4></div>' +
  '<button class="clearCart"> Clear Cart </button>' +
  '<button class="checkoutCart"> Checkout </button>',

  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: "<h1>Checkout Area</h1>" + 
  '<div class="checkout-area">' + 
  '<span> {{ cart | cartSize }} </span><i class="fa fa-shopping-cart"></i>' +
  '<table>' +
  '<thead>' +
  '<tr>' +
  '<th>puniq</th>' +
  '<th>Name</th>' +
  '<th>Description</th>' +
  '<th>Amount</th>' +
  '<th>Rupee</th>' +
  '</tr>' +
  '</thead>' +
  '<tbody>' +
  '<tr>' +
  '<td>{{ Item.puniq }}</td>' +
  '<td>{{ Item.Item }}</td>' +
  '<td>{{ Item.description }}</td>' +
  '<td>{{ cart[$index].totalqty }}</td>' +
  '<td>{{ Item.Rupee | currency }}</td>' +
  '</tr>' +
  '<tr>' +
  '<td> </td>' +
  '<td> </td>' +
  '<td> </td>' +
  '<td> </td>' +
  '<td> </td>' +
  '</tr>' +
  '<tr>' +
  '<td></td>' +
  '<td></td>' +
  '<td></td>' +
  '<td>Subtotal:</td>' +
  '<td><h4> {{ mysubt | currency }} </h4></td>' +
  '</tr>' +
  '<tr>' +
  '<td></td>' +
  '<td></td>' +
  '<td></td>' +
  '<td>Tax:</td>' +
  '<td><h4> {{ ctotal - mysubt | 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> {{ ctotal | currency }} </h2></td>' +
  '</tr>' +
  '</tbody>' +
  '</table>' +
  '<button>Checkout</button></div>' + 
  "<div class='modalWrapper'>" +
  "<div class='overlay'></div>" + 
  "<div class='modal checkout'>" + 
  "<i class='close fa fa-times'></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: {{ mysubt | currency }} </h3>" +
  "<h3> Tax: {{ ctotal - mysubt | currency }} </h4>" +
  "<h1> Total: {{ ctotal | currency }} </h3>" +
  "<br><div>This is where our payment processor goes</div>" +
  "</div>",

  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");
    }
  }
});

Example

READ :  AngularJs Events Directives With Example

Add a Comment

Your email address will not be published. Required fields are marked *