The main challenge for this project was to build from scratch an online store that originally was running on OsCommerce. Our proposal to the client was to use Drupal for managing his online shop, which would mean a big quality improve, as we included some social functionalities to the project.
Ama Tu Salud is a group of health therapists that have been helping people to improve their life quality for more than 20 years. In their physical shop, they sell dietetic products, herbalist, health food and fair trade, but they also teach courses about alternative therapies, acupuncture, naturopathy, kinesthesiology, reiki, diets and so on.
Starting Point
The design was old-fashioned and Oscommerce does not provide the social features we wanted to implement on the site:
Why Drupal
Oscommerce is a good script for managing online shops as it's a sofware especialized and mature, otherwise, adding new features is a complex work and its code is a mix of html and php.
Drupal has a lot of modules that make easy the task of adding new features and reduce the timing of the developing process. It also provides a great integration and communication between these modules. Using some of the Drupal community modules allow us to have a social site from the first moment with only some customization and adaptation to the client needs. We had to choose one of the modules that are used to build ecommerce sites: ecommerce and ubercart. We finally chose Ubercart because it has a cleaner code and the progress of the development seemed faster. We have developed an online bookshop that sells antique books using ecommerce in the past (Drupal 4.7) and there were some aspects of the software that we didn't like. Getting experience in both modules was also a influence point.
The process
Analysis of requirements
Once the invoice was accepted by the client, we built a mind map of the website's content. In this map you can see the different sections of the web and all the actions that you can do.
Prototype
Based in the mind map, the prototypes of the main pages were created in paper format. The content of the pages and its position was determined using these prototypes. All these documents were used internally as a first approach to the definitive structure of the website.
All these prototypes were transferred to a digital format and sent to the client after they were revised. The final version was built after the proposal of some modifications by the client. We used open source software for creating the wire-frames.
Once the prototypes were accepted by the client, both design and development of the site started in parallel.
Design
The main part of the design was created based in the wire-frames and prototypes. Each prototype was personalised using the general design and the client's suggestions.
Development and modules
The content diagram and the relationship model was created with the prototype information.
Module modifications
Some of the modules that we used suffered big modifications in the process. We can remark some of them:
Ubercart: Ubercart's checkout process show all options in a one-page way. This was separated into several steps using javascript.
Discounts module for Ubercart was heavily modified, several bugs were corrected and the final version is being used as the basis for the new project Uc_discounts in drupal.org.
Using Shipping & quotes API, we have built a custom interface for the shipping of the products that fits the client needs.
Two more contributions have been added to Ubercart project, the first one is the module that allows make payments through the Spanish's bank Caixa Catalunya and the second one is a listing of Andorra regions for shipping purposes.
Search: The original search only looks for nodes and users, but we had to include taxonomies here, so we customised the search process. To include taxonomies, we have installed Taxonomy Search that fits quite well with Search All module, so we could show all the search results in the same page. Both modules were modified slightly and the corrections made were posted as an issue for both modules (http://drupal.org/node/303407 and http://drupal.org/node/262827)
The final changes included the Search Autocomplete module that allows auto completion for the search block, and the seed query was altered so only node and taxonomy titles are included. We finally added a custom module that customised some more the search process using hook_search for calling our own do_search process.
The Live search behaviour requires that the user press the enter key twice for searching. The first enter confirms the result autocompleted and the second calls the search. With some javascript we have modified this so only one enter is needed. It also searches for whole titles of the items instead of loose words. Related issue: http://drupal.org/node/309088
We also developed a little module for suggesting products to the customers, like "customers who bought this product also bought..." using CRE module. But this Ubercart plugin has not been published yet because there are some modifications that should be done to CRE module before, these modifications have been suggested here.
We created a new contributed module: Easy Image Insert which will be mantained and supported by us. This module allows to use an imagefield cck field to insert an image or imagecache preset inside a textarea. This way you can attach an image to the desired place inside any textarea and you have the same field available to use with views module.
The modules is still under development (the stable version was a mistake) and you can see all the features in the attached video, it has an additional feature now, you can specify a link in the inserted image that points to another preset of the image, working as a thumbnail that links to a bigger version of the image. The module is now ported to Drupal 6 too.
Theme modifications
We have not only developed modules, some theming was required as well. Next we have detailed the most important changes:
We themed some lists of elements modifying the default order so the list is shown in 3-column format with a consistent alphabetical order.
A submenu with the subcategories is shown using javascript when the main category is selected thus, users save one step to select the desired subcategory.
When there is complex taxonomy, the breadcrumb shown by default is a little weird, we have modified the way it looks by dividing the different paths in one line each, so the user can see all the information in a tidier way.
Performance
Even though we used a lot of modules to reach a community site and an online store either, only a few performance tweaks were needed. Block Cache module helped a lot with block caching and Javascript Aggregator is used for grouping javascript files.
Once the test period was successfully over, all the users of the old system were migrated to the new website. The Logintoboggan module was used to keep te old identifying system based on the email of the user. For the redirections, a custom method using 301 redirections was implemented, keeping a record of the product's old urls and redirecting to the new url. As the project was developed in a new domain, the old store was online until the migration was finished.
First Results
The first impression is being very encouraging. Even before the official opening of the new website, the SEO results were so much better than the old system, and the visits had increased. This points out how SEO-friendly is the join Drupal-Ubercart compared with other ecommerce solutions. After two weeks running, the new website has multiplied by four the number of visitors of the old one.
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.
