Necessites un carro de la compra que treballi més en la part client de la teva aplicació web que a la part servidora, perquè vols guanyar punts en velocitat? Si és així, benvingut, has arribat a el lloc adequat.
Avui adjunt un carret JS que, juntament amb l’ajuda de JQuery, et permetrà fer les típiques operacions d’addició i esborrat d’elements o consulta de el cost de la compra a tota velocitat en comparació amb la seva contrapart servidora.
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>');};Fixa’t que aquest carro de la compra és programat dins el paradigma orientat a objectes de JavaScript, i que assumeix un objecte en notació literal per al seu correcte funcionament.
per exemple, per afegir un nou article cal fer això:
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);});I això és tot per avui, espero que aquest codi et serveixi d’ajuda al sistema ecommerce.
També et pot interessar llegir això …
- Hola món OOP amb ECMAScript juny (ES6)
- Quins avantatges ofereixen els generadors de llocs estàtics SSG?
- Com funciona React.js?
- Què és JSON?
- Una entrevista amb tapes – An interview with tapes