The challenge

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.

(This video has English & Spanish subtitles. If you can't see subtitles or they are in the wrong language, you can configure them by clicking in the MENU icon on the bottom right and select the subtitles you want)

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.

(This video has English & Spanish subtitles. If you can't see subtitles or they are in the wrong language, you can configure them by clicking in the MENU icon on the bottom right and select the subtitles you want)

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.

We tried to use additional modules for improving the performance, as memcache or boost, but our current configuration, that uses multisites, gave us some troubles we have detailed in these related issues: http://drupal.org/node/266007 , http://drupal.org/node/244595 y http://drupal.org/node/262083

Migration of old data and redirections

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.

The team

The team of Neurotic was made up by Jordi Bufi, Carlos Rincón and Pedro Cambra, with the special guest star Sandra Morante who made the graphic design.

Finally, we want to give thanks to Kieran and Joe Bachana for the help to make this showcase.

AttachmentSize home.png552.32 KB