Carrito de la compra con Ajax
El diseño web se ha rendido definitivamente a las funcionalidades de AJAX, no sólo porque nos permite actualizar nuestra página sin refrescar la pantalla, si no también por la gran ayuda que supone para el diseñador a la hora de diseñar un sitio usable.
Existen cientos de ejemplos que respaldan su uso, en este blog ya hemos hablado en varias ocasiones de ejemplos muy útiles realizados con Ajax. En esta ocasión, vamos a ver un ejemplo en el que la usabilidad de una tienda online se hace infinitamente más clara y visual para el usuario.
Se trata de usar el drag and drop para arrastrar aquellos artículos que queremos comprar a nuestra “cesta de la compra”. El usuario además de interactuar en la web de forma novedosa y vistosa, ve en todo momento el resultado de sus acciones, pudiendo rectificar o consultar sus compras sin necesidad de volver a cargar la página o de abandonarla, con un sólo echar un vistazo a su cesta.
En este ejemplo, además, se mantiene actualizado el precio total de sus compras, tanto cuando añade como cuando elimina un producto, pero como siempre una imagen vale más que mil palabras, os recomiendo que echéis un vistazo a la web y veáis cómo además se ha sabido tratar muy acertadamente la gráfica de la funcionalidad.
Ver ejemplo en http://icondock.com/
Ver ejemplos de código y descargar en http://demos111.mootools.net/Drag.Cart
Por qué no publican el codigo fuente para poder estudiarlo
septiembre 30th, 2009 at 22:08Tienes un enlace que dice ver ejemplo y código, una vez que entras en la página una pestaña que pone code.
octubre 1st, 2009 at 9:26Buenas ya copie el codigo y me baje el plugin en estos momentos tengo unarchivo llamado carrito.html el cual tiene el script javascript y los elementos html y el archivo css, en esa misma carpeta tengo el plugin de mootools, pero no las funcionalidades de excel no las esta realizando
adjunto el codigo por si ven algun error
Carrito Compras
window.addEvent(‘domready’, function() {
// HERE IS WHAT YOU READ IN JS CODE
var drop = $(‘cart’);
var dropFx = drop.effect(‘background-color’, {wait: false}); // wait is needed so that to toggle the effect,
$$(‘.item’).each(function(item){
item.addEvent(‘mousedown’, function(e) {
e = new Event(e).stop();
var clone = this.clone()
.setStyles(this.getCoordinates()) // this returns an object with left/top/bottom/right, so its perfect
.setStyles({‘opacity’: 0.7, ‘position’: ‘absolute’})
.addEvent(‘emptydrop’, function() {
this.remove();
drop.removeEvents();
}).inject(document.body);
drop.addEvents({
‘drop’: function() {
drop.removeEvents();
clone.remove();
item.clone().inject(drop);
dropFx.start(’7389AE’).chain(dropFx.start.pass(‘ffffff’, dropFx));
},
‘over’: function() {
dropFx.start(’98B5C1′);
},
‘leave’: function() {
dropFx.start(‘ffffff’);
}
});
var drag = clone.makeDraggable({
droppables: [drop]
}); // this returns the dragged element
drag.start(e); // start the event manual
});
});
});
Shirt 1
Shirt 2
Shirt 3
Shirt 4
Shirt 5
Shirt 6
Drag Items Here
octubre 21st, 2009 at 19:14yo creo que esta bueno solo abrica que ponerles varias carateiristicas o detalles por ejemplo en detalle de la cantidad
en caso de que sea 100 unidades tendre que hacer 100 veces.. gg abrica que ver bien yo creo chicos..
estudiar el codigo..
y creo que no esta envano el codigo
de todas maneras gracias.. viejo
diciembre 13th, 2010 at 18:59Interesante trabajo gracias por el aporte.
Saludos…
enero 25th, 2011 at 0:16[...] El contenido de este Post, ahora está en el Blog de Diseño Web Gloobs [...]
junio 20th, 2011 at 14:46This blog is not only well-organized but also very interesting.
febrero 12th, 2012 at 10:48I appreciate the time you put in this work or in this post. Although u have interesting ideas, I really can’t agree with them. I’m sure there are better ways to walk through this bad situation. Not trying to flame or troll or anything .
febrero 18th, 2012 at 3:48