Creación de una tienda online para la libreria de antiguedades Antiquària Maldà siguiendo un diseño proporcionado por el cliente.
Toda la programación de la tienda online esta hecha en Drupal, utilizando el módulo ecommerce para la parte del carrito de la compra. La tienda está disponible en tres idiomas y existen funcionalidades programadas desde cero como un sistema de exportación personalizada de los datos que ha introducido el cliente en la tienda.
El principal reto de este proyecto era renovar completamente una tienda online que funcionaba bajo OsCommerce. Dada nuestra experiencia con Drupal le propusimos al cliente utilizar este gestor de contenidos como software para la tienda. De esta forma se daría un salto cualitativo dotando de una serie de funciones sociales al proyecto
Ama Tu Salud es un grupo de terapeutas de la salud, que se dedica desde hace más de 20 años, a ayudar a las personas a mejorar su calidad de vida. Además de disponer de una tienda física dónde vende productos dietéticos, herboristería, alimentación ecológica y comercio justo también imparten cursos, enseñanzas y terapias alternativas, como acupuntura, naturopatía, kinesiología, reiki, dietas, etc.
Por qué Drupal
Oscommerce es un buen script para gestionar tiendas online debido a su madurez ya que dispone de muchas funcionalidades específicas para este tema. Como desventaja realizar otro tipo de funcionalidades es mucho más complicado y su código mezcla php y html.
Con Drupal se pueden usar una gran cantidad de módulos que nos ayudan a añadir funcionalidades en un tiempo récord además de permitir una integración y comunicación entre los módulos casi absoluta. Esto nos permitió disponer de funcionalidades de comunidad desde un primer momento sólo siendo necesario la personalización y adaptación a nuestro proyecto. Para Drupal existen dos módulos de ecommerce: ecommerce y ubercart. Escogimos ubercart finalmente porque creimos que tiene un código más limpio y evoluciona mucho más rápido. Con ecommerce ya desarrollamos una tienda online de libros antiguos (con Drupal 4.7) y tenía algunas cosas que no nos gustaron demasiado. Además queríamos probar Ubercart para tener una visión personal de ambos módulos.
Punto de partida
Tal como hemos comentado la tienda funcionaba con un oscommerce lo cual dificultaba añadir las nuevas funcionalidades de comunidad además de tener un diseño ya anticuado:
Proceso
Análisis de requisitos
Una vez el cliente aceptó el presupuesto hicimos un mapa mental del contenido de la página web. En este mapa se pueden ver las diferentes secciones que ha de tener la página web y las diferentes acciones que se pueden hacer.
Prototipado
A partir del mapa mental se crearon una serie de prototipos de las páginas más importantes en papel para decidir que saldría en cada página y más o menos en que posición saldría. Estos documentos sólo se usaron de manera interna como primera aproximación a la estructura de las páginas.
Una vez tuvimos claro que iría en cada página web se pasaron estos prototipos a un formato digital para enviarselo al cliente. Con las modificaciones propuestas por el cliente se fueron creando nuevas versiones hasta llegar a la versión definitiva. Para crear los wireframes se usó software libre.
Una vez estos prototipos fueron confirmados por el cliente se empezó por la programación por una parte y el diseño por otra.
Diseño
Partiendo de un prototipo se creó una propuesta y a partir de allí se trabajó sobre el diseño general. Una vez el cliente estuvo contento con este diseño se hicieron las propuestas concretas para cada prototipo.
Programación y módulos
Con la información que tenemos en los prototipos se creó un diagrama del contenido y sus relaciones.
A partir de los prototipos se pudieron detallar las funcionalidades que debía incorporar la página web. Con este estudio se valoró que módulos eran útiles para dotar a la página web de las funcionalidades previstas.
Modificaciones en los módulos
Algunos de lo módulos utilizados sufrieron modificaciones de importancia. Las más destacables son las siguientes:
Ubercart:
El proceso de "checkout" que usa ubercart muestra todas las opciones en una sóla página. Como se muestra demasiada información se dividió el proceso en varios pasos usando Javascript.
Modificaciones en el modulo descuentos: Se corrigieron varios bugs y se generó una versión nueva del módulo que ha sido utilizada para generar un nuevo proyecto en drupal.org a partir de nuestra versión ()
Search: La búsqueda original sólo procesa los nodos, de este modo se quedaban fuera de la búsqueda cosas tan importantes como las taxonomias. Se modificó la búsqueda para que recorriera todos los tipos de contenido. Para realizar una búsqueda que incluyera las taxonomías se utilizó el módulo Taxonomy Search y el Search All para que los resultados se mostraran en una sola página. En ambos módulos se hicieron pequeñas modificaciones que se han propuesto a los responsables de los mismos http://drupal.org/node/303407 y http://drupal.org/node/262827. Para obtener el resultado final se utilizó también el Search Autocomplete modificado para que muestre las sugerencias de los nombres de los nodos y un módulo personalizado de búsqueda para combinar todo, que utiliza el hook_search para personalizar la búsqueda.
Live search: El comportamineto del "live search" precisa un doble enter para empezar a búscar. Uno sirve para confirmar el resultado aparecido y el otro para ejecutar la búsqueda. Con Javascript se modificó para que con un sólo click se buscara directamente. Además se modificó para que indexara títulos ya que originalmente sólo busca palabras sueltas. De este modo cuando introduces el principio de un título se muestra al autocompletar esta búsqueda. Issue relacionada: http://drupal.org/node/309088
También desarrollamos un pequeño módulo para mostrar sugerencias de compra a los usuarios, del estilo de "los clientes que han comprado este producto, también compraron.." utilizando el módulo CRE como base, este plugin para ubercart no ha sido publicado porque requiere que se apliquen algunos cambios en el módulo CRE que ya han sido sugeridos.
Se creó un módulo para insertar de forma fácil imágenes dentro de texto de los artículos y las páginas. El módulo se llama Easy Image Insert y permite usando un campo imagefield de cck insertar una imagen o un preset de imagecache dentro de un campo tipo text que sea un textarea. De esta manera se tiene la flexibilidad de poner la imagen en el lugar que se quiera del texto pero a la vez poder usar el campo imagefield de manera independiente (en views, por ejemplo)
El módulo todavía está en desarrollo (la versión final es un error) y ya dispone de más funcionalidades de las que salen en el vídeo, la principal es que puedes decirle que te añada una imagen enlaza a otra normalmente a la misma pero con un preset de una imagen más grande. Además ya funciona para Drupal 6.
Modificaciones en los temas
Además de los módulos, se hicieron otras modificaciones en los temas para conseguir determinados comportamientos. Por defecto cuando tienes una lista y creas columnas flotando los elementos de la lista aparecen ordenados alfabéticamente de izquierda a derecha. Para evitar esto se modificó el tema para creara tantas listas cómo columnas con los elementos necesarios para cada lista y así poderlos ordenar alfabéticamente de abajo arriba.
Se creó un desplegable mediante Javascript para que en cada categoría se mostrara un desplegable con las subcategorías a mostrar. De este modo se evita tener que recargar otra página para acceder a la subcategoría deseada.
El breadcrumb sólo muestra por defecto una ruta y si es un producto ubercart añade todas las categorías una detrás de otra. Como existe contenido que pertenece a varias categorías a la vez se creo un sistema de breadcrumb múltiple para que muestre todas las categorías a las que pertenece.
Benchmarks
A pesar de utilizar gran variedad de modulos para llegar a obtener una funcionalidad de comunidad y tienda online, tan solo fueron necesarios un par de retoques que mejoraron el rendimiento, en concreto se utilizaron los módulos block cache que ayudó a cachear la mayoría de bloques utilizados y javascript aggregator para agrupar los fichero javascript.
Pasado el periodo de pruebas se hizo una migración de los usuarios a la nueva página web y una redirección de todas las URL de la antigua tienda al nuevo proyecto. Se usaron redirecciones 301 mediante modrewrite para evitar perder visitas y posicionamiento. En el blog de Carlos Rincón se explica cómo hicimos las redirecciones 301.
Primeros resultados
Los primeros resultados estan siendo muy positivos. De hecho antes de la publicación oficial de la nueva página web ya estaba obteniendo mejores resultados de posicionamiento (e incluso más visitas) que la tienda anterior. Esto es un indicativo de la buena base que te da drupal para conseguir un buen posicionamiento. Después de dos semanas de publicar la web esta tiene unas 4 veces más de visitas.
