Cuando no tengo nada que hacer!!!: EJEMPLO DE CÓMO HACER UN CARRITO DE COMPRAS (CON POCO DE AJAX)

Seguramente alguna vez nos ha tocado (bueno, a mi generación nos tocó) que algún maestro nos deja de trabajo (ya sea de la materia de Sistemas Distribuidos, Programación Web I o II) que realicemos un sitio que involucre vender productos a través de la web.

Lo tradicional sería hacerlo de la manera a como se realiza en una aplicación de escritorio, pero recordar que al trabajar a través de la web, si realizamos muchas peticiones al servidor pues los tiempos de respuestas son muy tardados, además que provocamos sobrecargas a los servidores.

Bueno vamos a dejarnos de choro mareador, en este ejemplo mostraremos una forma sencilla de cómo podemos implementar un carrito de compras, independientemente si trabajamos con PHP, ASP.NET, JAVA,etc. Para lo cual haremos uso del framework Prototype además de las librerías de script.aculo.

El carrito de compras nos permitirá agregar los productos al canasto, ya sea haciendo click en el link “Agregar al carrito” o arrastrando la imagen del producto al canasto (Drag&Drop)

Requerimientos:

· Framework Prototype

· Librería script.aculo

· Visual Studio 2008 (no es necesario)

· Un café capuccino

Iniciando

Primeramente crearemos una página, la cual puede tener un diseño parecido a la de la imagen siguiente:

Seguramente se estarán riendo, es válido, ya que soy pésimo para las cuestiones de diseño.

En mi caso en mi proyecto tengo la siguiente estructura de los archivos:

En la carpeta “IMÁGENES” almaceno cada una de la foto de los productos de muestra.

En “js”, guardo la librería del framework Prototype, script.aculo y el archivo Carrito.js que explicaré más adelante.

Por último en “stylesheets” guardo las hojas de estilos.

A continuación pongo el código de la página “Default.aspx”:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Pedidos" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>*** Salvador Benítez ***</title>

</head>

<body>

<hr />

</div>

<h3 class="leftbox">Bienvenido al sitio de Salvadorcito.</h3>

<br/>

<div class="nombreProducto">Producto1</div>

<div>Precio:$20</div>

Agregar al Carrito</div>

</li>

<br/>

<div class="nombreProducto">Producto2</div>

<div>Precio:$50</div>

Agregar al Carrito</div>

</li>

<br/>

<div class="nombreProducto">Producto3</div>

<div>Precio:$80</div>

Agregar al Carrito</div>

</li>

<br/>

<div class="nombreProducto">Producto4</div>

<div>Precio:$150</div>

Agregar al Carrito</div>

</li>

<br/>

<div class="nombreProducto">Producto5</div>

<div>Precio:$60</div>

Agregar al Carrito</div>

</li>

</ul>

</div>

<h3 class="leftbox">Carrito de Compras</h3>

</div>

<div id="cargando">Pueden poner un cartel al estilo google por ejemplo====Procesando Pedido, Por favor espere...</div>

Está a punto de enviar su pedido. Si desea realizar una observacion al

encargado de papelería anótela a continuacion.<br /><br />

<%--<div id="listadoprod"></div>--%>

<tr>

<td>Observaciones</td>

</tr>

<tr>

<td>

<br />

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

La mayor parte del código es pura cuestión de diseño, la parte que comentaremos será la siguiente:

<h3 class="leftbox">Bienvenido al sitio de Salvadorcito.</h3>

<br/>

<div class="nombreProducto">Producto1</div>

<div>Precio:$20</div>

<div class="agregarProducto" Onclick="agregar('001','20','Producto1')"> Agregar al Carrito</div>

</li>

……

….

Etc,etc,etc

…..

….

</ul>

</div>

Aquí estamos creando un listado, que será nuestro catalogo de productos, en total tendremos 5 productos.

Las funciones “drag”, “agregar”, las tenemos creadas en el archivo “Carrito.js”

A continuación el código de “Carrito.js”

window.onload=function(){

Droppables.add("listaCanasto",{

onDrop:sueltaProducto,

accept:["detalleFoto"]

});

$("cargando").style.visibility="hidden";

$("listaCanasto").innerHTML="Carrito Vacio";

//drop('foto');

//Droppables.add("basura",{

//onDrop:tiraProducto,

//accept:["filaCanasto"]

//});

}

var cacheProductos=[];

var canasto=[];

function agregar(id,precio,nombre){

var i=0;

var encontrado=false;

while((i<canasto.length)&&(!encontrado))

{

if(canasto[i].id==id)

{

encontrado=true;

}

else

{

i++;

}

if(encontrado){

canasto[i].cantidad++;

}

else{

var producto=cacheProductos[id];

nuevoProducto={

'id':id,

'nombre':nombre,

'precio':precio,

'cantidad':1

};

canasto[canasto.length]=nuevoProducto;

}

actualizarCanasto();

}

function actualizarCanasto(){

var contenido="";

if(canasto.length==0){

contenido='';

}

else{

var filaCanasto=0;

var total=0;

for(var i=0;i<canasto.length;i++){

//creo una fila por cada producto

filaCanasto="<div class='filaCanasto'";

filaCanasto+="id='canasto_"+canasto[i].id+"'>";

//se arma cada fila con una tabla

var tablaCanasto;

tablaCanasto="<table width='100%'><tr>";

tablaCanasto+="<td class='canastoNombre'>"+canasto[i].nombre+"</td>";

tablaCanasto+="<td class='canastoCantidad'>"+canasto[i].cantidad+" <img src='images/abajo.jpg' onclick='bajar("+canasto[i].id+")'/><img src='images/arriba.jpg' onclick='subir("+canasto[i].id+")'/></td>";

tablaCanasto+="<td class='canastoPrecio'>$"+canasto[i].cantidad*canasto[i].precio+"</td>";

tablaCanasto+="<td><a href='javascript:quitar("+canasto[i].id+")' class='canastoQuitar'>Quitar</a></td>";

tablaCanasto+="</tr></table>";

filaCanasto+=tablaCanasto+"</div>";

contenido+=filaCanasto;

total+=canasto[i].cantidad*canasto[i].precio;

}

//se muestra el total

contenido+=generarFilaTotal(total);

//boton finalizar

contenido+="<input type='button' id='btnFinalizar' value='Finalizar Pedido' onClick='finalizar()'/>";

}

$("listaCanasto").innerHTML=contenido;

}

function generarFilaTotal(total){

var filaCanasto="<div class='totalCanasto'>"

var tablaCanasto;

tablaCanasto="<table width='100%'><tr>";

tablaCanasto+="<td class='canastoNombre'>TOTAL</td>";

tablaCanasto+="<td class='canastoCantidad'></td>";

tablaCanasto+="<td class='canastoPrecio'>$"+total+"</td>";

tablaCanasto+="<td><a href='javascript:vaciar()' class='canastoQuitar'>Vaciar</a></td>";

tablaCanasto+="</tr></table>";

//alert(tablaCanasto);

filaCanasto+=tablaCanasto+"</div>";

return filaCanasto;

}

//quita un producto del canasto

function quitar(id){

//alert('bien');

var i=0;

var encontrado=false;

while((i<canasto.length)&&(!encontrado)){

//alert(i);

if(canasto[i].id==id){

//alert('encontrado');

encontrado=true;

//lo eliminamos de la lista con prototype

canasto=canasto.without(canasto[i]);

}

else{

i++;

}

actualizarCanasto();

}

//aumenta la cantidad de un producto seleccionado

function subir(id){

var i=0;

var encontrado=false;

while((i<canasto.length)&&(!encontrado)){

if(canasto[i].id==id){

encontrado=true;

//aumentamos la cantidad

canasto[i].cantidad++;

}

else{

i++

}

actualizarCanasto();

}

//disminuye la cantidad de un producto seleccionado

function bajar(id){

var i=0;

var encontrado=false;

while((i<canasto.length)&&(!encontrado)){

if(canasto[i].id==id){

encontrado=true;

//aumentamos la cantidad

canasto[i].cantidad--;

//si cantidad==0 eliminamos el producto de la lista

if(canasto[i].cantidad==0){

quitar(id);

}

else{

i++

}

actualizarCanasto();

}

//borra todos los productos que hay en el carrito

function vaciar(){

canasto=[];

actualizarCanasto();

}

//se ejecuta cuando se suelta un producto en el canasto

function sueltaProducto(drag,drop,event){

var array=drag.id.toString().split(",");

agregar(array[0],array[1],array[2]);

}

//quita el producto al arrastrarlo al bote de basura

function tiraProducto(drag,drop,evento){

var id=drag.id.substring(8,drag.id.lenght);

//alert(id);

quitar(id);

}

//conforme se muestran las imagenes las hago dragables

function drag(id){

//alert(id);

new Draggable(id,{revert:true});

}

//formulario de finalizar pedido

function finalizar(){

//alert('q');

if(canasto.length==0){

alert('Su pedido no contiene elementos por procesar');

}

else{

//var contiene="Descripción--Cantidad--Precio</br>";

//for(var i=0;i<canasto.length;i++){

//contiene+=canasto[i].nombre+"--"+canasto[i].cantidad+"--"+canasto[i].precio+"<br/>";

//}

$("ventanaModal").style.visibility="visible";

//$("listadoprod").innerHTML=contiene;

}

function cancelar(){

$("ventanaModal").style.visibility="hidden";

}

function enviar(){

$("ventanaModal").style.visibility="hidden";

//$("txtNombre").focus;

$("cargando").style.visibility="visible";

alert("Y AQUI REALIZARIA LA COMPRA...");

$("cargando").style.visibility="hidden";

//alert(parametros);

vaciar();

}

Nuestra pequeña página nos permitirá hacer lo siguiente:

Si arrastramos la imagen de un producto y la soltamos en el área del carrito de compras, automáticamente la agregará al canasto:

Si deseamos aumentar la cantidad del producto, solo es necesario hacer clic en las flechitas..

Bueno pues eso es todo, creo que el código no merece tanta explicación, cualquier duda, comentario escríban a mi correo o en mi facebook. Se me olvidaba, de esta manera hice parte de mi proyecto de residencia.

domingo, 21 de noviembre 12:45:24 a.m.

El código fuente lo pueden encontrar aquí: http://bit.ly/93uYYr

4 comentarios:

P€P€x €cca5 de junio de 2013, 0:14
Excelente post...tendrias uno con clases y base de datos. Te agradeceria, pues me han dejado un trabajo.Gracias

Atte.

PePe Ecca --> email : pepex_ecca@hotmail.com
ResponderEliminar
Respuestas
Unknown25 de junio de 2015, 9:49
no manejas base de datos en este??
ResponderEliminar
Respuestas
Bers25 de junio de 2015, 15:12
En este ejemplo no, el contenido fue generado de forma estática, ilustra la funcionalidad del lado del cliente. El código es ya obsoleto(fue diseñado hace mas de 4 años).
ResponderEliminar
Respuestas
Bernardo12 de julio de 2017, 17:10
excelente carrito, gracis por swu ayuda.
Tengo una solicitud:
Mew podrian ayudar a generar una opcion para cobro de envio según la zona; digamos que hay 5 zonas de envío y cada una tiene diferente costo.
ResponderEliminar
Respuestas

Añadir comentario

Cuando no tengo nada que hacer!!!

domingo, 21 de noviembre de 2010

EJEMPLO DE CÓMO HACER UN CARRITO DE COMPRAS (CON POCO DE AJAX)

4 comentarios:

Datos personales

Archivo del blog