un panier JavaScript sur le client

Avez-vous besoin d’une voiture de l’achat Fonctionne plus sur le client de votre application Web que dans la partie serveur, car vous souhaitez gagner des points à la vitesse? Si oui, bienvenue, vous avez atteint le bon endroit.

Aujourd’hui, je suis attaché à JS Panier qui, avec l’aide de JQuery, vous permettra de faire l’ajout et la suppression typique des éléments ou de la consultation des coûts. de l’achat à pleine vitesse par rapport à son homologue de serveur.

function Cart() { this.items = ; }Cart.prototype.add = function(item) { this.items.push(item); return this.items;};Cart.prototype.remove = function(id) { for (var i = 0; i < this.items.length; i++) { id == this.items.id ? this.items.splice(i, 1) : false; } return this.items;};Cart.prototype.get = function() { return this.items;};Cart.prototype.set = function(items) { this.items = items;};Cart.prototype.getTotal = function() { var total = 0; $.each(this.items, function(key, value) { total += value.price; }); return total;};Cart.prototype.printHTMLEdit = function(div) { $(div).empty(); $.each(this.items, function(key, value) { $(div).append('// Your HTML code here...'); }); $(div).append('<p>Total: ' + this.getTotal() + ' €</p>');};

Look Si ce panier est prévu dans les objets de paradigme orientés vers des objets JavaScript, et suppose un objet dans la notation littérale pour son bon fonctionnement.

Par exemple, pour ajouter un nouvel article, vous devez le faire:

var cart = new Cart();$('.buy-item').click(function(){ var item = { 'id': $(this).attr('data-id'), 'title': $(this).attr('data-title'), 'description': $(this).attr('data-description'), // Your fields here... 'price': parseFloat($(this).attr('data-price')) } cart.add(item);});

C’est tout pour aujourd’hui, j’espère que ce code vous aidera à vous aider dans votre système de commerce électronique.

Vous pouvez également être intéressé à lire ceci …

  • Hello World OOP avec ECMAScript 6 (ES6)
  • Quels avantages Les générateurs Sites statiques SSG offrent-ils?
  • Comment réagit-il.js fonctionne?
  • Qu’est-ce que JSON?
  • Un entretien avec tapas – une interview avec tapas

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *