Blog de sonicbyte
Opinión y tendencias sobre negocios, diseño y avances en Internet
Formulario por pasos usando Mootools
En nuestro último proyecto e-commerce para el proceso de finalización de compra optamos por utilizar un formulario por pasos. Esta decisión fue tomada para no cansar al visitante con extensos e interminables formularios con un sinfín de campos que no alientan a ser rellenados. Además la interfaz queda bonita y el efecto al ir rellenando los pasos también es agradable para el visitante.
Pero una de las mayores ventajas es que la validación del formulario se realiza en cada etapa, por lo que el visitante puede corregir algún campo mal ingresado sin tener que esperar a rellenar todos los pasos. Esto le da una agilidad al proceso y genera confianza en el visitante.
Para la validación del formulario, en realidad cada etapa es un formulario en si, utilizamos el FormCheck de la librería MooFloor. Éste validador se ha convertido en nuestro favorito a lo largo de los proyectos. Esta librería requiere el core de Mootools 1.2.4 y del more 1.2.4.4 sólo la clase Fx.Scroll. También incluímos un archivo con las frases del validador en castellano salvo que se quiera que aparezcan los avisos en inglés, el idioma default. Es necesario incluir un archivo CSS para mostrar correctamente los avisos del validador. Este archivo se descarga junto con el plugin javascript en la misma página. Por lo tanto la inclusión de archivos para que funcione nuestro formulario por pasos de momento queda de la siguiente manera:
<script type="text/javascript" src="js/mootools-1.2.5.1-more.js"></script>
<script type="text/javascript" src="js/formcheck/lang/es.js"></script>
<script type="text/javascript" src="js/formcheck/formcheck.js"></script>
Para el efecto de transición entre los pasos utilizamos el plugin SlideShow de Ryan Florence. Un plugin para hacer carruseles bastante fácil de implementar y muy extendible. La clase requiere del core de Mootools y la clase Fx.Elements del more, también la clase Loop que se descarga en el mismo sitio del SlideShow. Por lo tanto dos nuevas línea se agrega a la inclusión de archivos:
<script type="text/javascript" src="ruta-archivos-js/slideshow/SlideShow.js"></script>
El siguiente paso es crear las estructura del formulario. Para ello creamos un DIV contenedor que va a contener a las distintas etapas. Cada etapa va a ser un FORM que a su vez va a estar contenido en un DIV. Quedando una estructura así:
<div id="etapa_1">
<form id="form_1" action="#">
....
</form>
</div>
<div id="etapa_2">
<form id="form_2" action="#">
....
</form>
</div>
.
.
<div id="etapa_n">
<form id="form_n" action="#">
....
</form>
</div>
</div>
En esta entrada no explicaremos como validar los distintos tipos de campos, para ello pueden visitar los documentos de la librería MooFloor.
El siguiente paso es instanciar un validador para cada paso, por lo que cada formulario tendrá su propia instancia del validador. Las opciones de la clase deberán ser cambiadas un poco a las de una validación tradicional ya que no queremos que se envíe el formulario, sino pasar al siguiente paso.
Por lo tanto las instancias del validador tendrán la siguiente forma:
submit: false
});
new FormCheck('form_2', {
submit: false
});
Al instanciar de este modo cada validador el formulario no es enviado pero sí le realiza el chequeo para comprobar que cada campo es correcto.
El siguiente paso es el de darle el efecto de transición para pasar al siguiente formulario cuando el chequeo es válido. Para ello debemos primero instanciar la clase SlideShow y luego decirle que hacer a cada formulario cuando el chequeo es válido:
new FormCheck('form_1', {
submit: false,
onValidateSuccess: function () {
slideshow.show($('etapa_2'), {
transition: 'pushLeft'
});
}
});
new FormCheck('form_2', {
submit: false,
onValidateSuccess: function () {
slideshow.show($('etapa_3'), {
transition: 'pushLeft'
});
}
});
Instanciamos todos los pasos del formulario hasta llegar al último, en nuestro ejemplo el formulario ‘n’. Al validar el formulario ‘n’ se deben enviar todos los datos de los distintos pasos/formularios, para nuestro ejemplo los enviaremos mediante una llamada ajax. Recogemos la información de los distintos pasos para enviarlo como parámetro DATA en la llamada:
new FormCheck('form_1', {
submit: false,
onValidateSuccess: function () {
slideshow.show($('etapa_2'), {
transition: 'pushLeft'
});
}
});
new FormCheck('form_2', {
submit: false,
onValidateSuccess: function () {
slideshow.show($('etapa_3'), {
transition: 'pushLeft'
});
}
});
..
new FormCheck('form_n', {
submit: false,
onValidateSuccess: function () {
var datos = $('form_1').toQueryString() + '&' + $('form_2').toQueryString() + '&'...'&' + $('form_n').toQueryString();
new Request({
url: 'url_de_la_accion',
data: datos,
onSuccess: function (result) {
// acción resultado de el envío
}
}).send();
}
});
Puedes ver todo el código en github.
Espero que les guste el post. Hasta la próxima.
-
ajay
