Module Pattern #4 – Implementar un carrito de la compra

Articulo anterior Module Pattern #3 – getters y setters

Como una practica sencilla aqui va lo que seria una base de como implementar un carrito de la compra en javascript. Se pone en practica lo visto hasta ahora sobre module pattern.

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="utf-8">

<title>javascript object in detail</title>

</head>

<body>

<div id="fb"></div>

<script>

//carritoModulo tendrá tres métodos: addItem(), itemsLength(), getItem()

var carritoModulo = (function(){

var carrito = []; //variable privada

return {

//parte pública

addItem : function (valores) {

carrito.push(valores);

console.log('El producto se ha añadido correctamente.');

},

itemsLength : function () {

return carrito.length;

},

getItem : function(indice) {

if (indice <= this.itemsLength() ) {

return carrito[indice];

}

},

muestraCarrito : function(capaID){

var capa = document.getElementById(capaID);

var txtCapa = "";

var longitud = this.itemsLength();

while (longitud--) {

txtCapa += '<p>' + this.getItem(longitud).articulo + ': ' + this.getItem(longitud).precio + '</p>' ;

}

capa.innerHTML = txtCapa;

}

};

}());

carritoModulo.addItem({articulo:'mermelada',precio:'3 €'});

carritoModulo.addItem({articulo:'café',precio:'4.5 €'});

console.log( 'El carrito tiene '+ carritoModulo.itemsLength() + ' productos' );

carritoModulo.muestraCarrito('fb');

//carritoModulo.carrito; //daría error

</script>

</body>

</html>

Aqui puedes ver el ejemplo funcionando

Ver Pen carrito de la compra por Aitor Alejandro (@aitoralejandro) on CodePen.

Module Pattern #4 – Implementar un carrito de la compra

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s