Carrito de la compra

¿Necesitas un carro de la compra que trabaje más en la parte cliente de tu aplicación web que en la parte servidora, porque quieres ganar puntos en velocidad? Si es así, bienvenido, 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 o consulta del coste de la compra a toda velocidad en comparación con su contraparte 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[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 orientado a objetos de 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.

También te puede interesar leer esto...

Previous Post Next Post