Un carrito de la compra JavaScript en la parte cliente

¿Necesitas un carro de la compra que trabaje más en la parte cliente de tu app web (GUI) que en la parte servidora porque quieres ganar puntos en velocidad? Si es así, you are welcome!, has llegado al sitio adecuado.

Hoy adjunto un carrito JS que, junto con la ayuda de JQuery, te permitirá hacer las típicas operaciones de adición y borrado de elementos, consulta del coste de la compra, etc., a una velocidad increíble en comparación con su contraparte servidora.

Carrito de la compra

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[i].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>');
};

Fíjate que este carro de la compra está programado dentro del paradigma OO JavaScript, y que asume un objeto en notación literal para su correcto funcionamiento. Por ejemplo, para añadir un nuevo artículo hay que hacer esto:

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

Y esto es todo por hoy, ¡espero que este código te sirva de ayuda en tu sistema ecommerce!