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:

Amatusalud.com Home

Amatusalud.com categories page

Amatusalud.com product page

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.

analysis of requirements

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.

Paper Wireframe

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.

Frontpage Wireframe

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.

Design version 1

Design version 2

Design version 6

Amatusalud.es design - final version

Development and modules

The content diagram and the relationship model was created with the prototype information.

Content diagram

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.

Product categories page

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.

Expandable Menu

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.

Multiple Breadcrumb

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

Comments

delineas’s picture

Congratulations neurotic team! Great work and great explanation :)
Spanish version of this case study here: http://www.neurotic.es/es/ama-tu-salud

http://5lineas.com
Spain loves Drupal!

Carlitus’s picture

Thankyou Daniel

seutje’s picture

scrolled around the site a bit and it looks pretty slick if you ask me, ofc I didn't actually try to order something ;)

but 1 thing though: when I turned off javascript, the submenus didn't work anymore, I can understand that pure CSS rollover menus can be tricky in IE, but in FF u can just set div#menu_productos ul li:hover div.uno { display:block }

no?

but still, people can just click the main item and they'll be presented with the options of the submenu, so I guess it doesn't really matter

and I did notice that the dropdown list gets a button when JS is disabled, nice 1 ;)

good job!

Carlitus’s picture

Thanks for your comments :)

robertDouglass’s picture

Nicely done.

- Robert Douglass

-----
my Drupal book Twitter

stephthegeek’s picture

Wow, this is gorgeous! And a fantastic writeup. Thank you for sharing. Truly an inspirational Ubercart site!

___________________________________________________________________________

{ Drupal Themes by TopNotchThemes }
Gorgeous, 100% original themes for Drupal 5 & 6, plus Ubercart themes

Manuel Garcia’s picture

Outstanding work!

Very nice and colourful design too, and I must add, very interesting information on the site !

Last but not least, many thanks for taking the time to write the case study =)

vkr11’s picture

Great writeup !!. I am also currently considering doing a ecommerce site and and going back and opting for ubercart. However I think it will be a little longer before there is more support for D6 modules.
This article of yours certainly helps. BTW great site !!

- Victor
Search Drupal.org | Lamingo | Tax India | Drupal Jobs | FPGA

params’s picture

fantastic... congratulation to Neurotic team, I specially like multiple breadcrumbs and menu / path navigation.

phdhiren’s picture

Congrats Neurotic team

Migration of old data from oscommerce to new drupal tables, I think, is a big deal. Did you write any module or done by some custom query directly to MySql?

pcambra’s picture

Thanks phdhiren, we didn't migrate the products between sites, the client wasn't interested.
User data, including profile info and newsletter subscriptions was migrated through a custom php function that executed some queries to get all the data.

jmaties’s picture

Very nice work!!

hectorplus’s picture

Buen trabajo, el sitio esta padre!

HectorPlus.com

luisortizramos’s picture

Desde la competencia, aprovecho para poner algo de marketing, Atenea tech (http://ateneatech.com).

Muchas felicidades primero por el post en Drupal.org y segundo por el trabajo.

Saludos y besos

Jorge Campo’s picture

Technically delightful....alghought I respectfully disagree with adding positive (or negative) comments on web page contents themselves as:

health therapists that have been helping people to improve their life quality for more than 20 years

.

Anyway, Excellent page an excellent showcase.

Jorge Campo
http://autismoaba.org

rezvani63’s picture

I couldn't find any point about which version of Drupal Ama Tu Salud used for its new website?
Is it Drupal 5.x or 6.x??

pcambra’s picture

It is built over Drupal 5.x as when we started the project there was no Ubercart for Drupal 6.x

ghumpley’s picture

Great site and writeup, thanks!

I was wondering how you handled VAT Tax issues for this site. It looks like VAT is included in the prices. Are you entering each price with VAT or adding on taxes afterwards? Is there any reporting on the back end that shows how much VAT has been charged to customers? Is your modified discounts module producing correct prices with VAT?

Sorry for all the questions but I'm currently developing a store for a business in the UK and I've run into issues with VAT reporting, display and basically overall implementation of VAT as a whole.

Thanks!

G

pcambra’s picture

Thanks ghumpley!

There is no VAT or Taxes because the client didn't want to divide the taxes information. Otherwise, discounts, shipping and COD were divided.

Jordi Bufí’s picture

I want to thank you for your comments as a Neurotic team member too.

Jordi Bufí Caballero

rszrama’s picture

Excellent job, guys. And of course, thank you for using and contributing to Ubercart! : )

----------------------
Drupal by Wombats | Current Drupal project: http://www.ubercart.org

pcambra’s picture

Thanks to you too Ryan, the Ubercart support we have received was excellent!!

gmak’s picture

The site looks great!

I am wondering if you could give a little more information on how you built your menu/submenu system? Is there a specific module that you've used or is it just javascript?

Thanks

Carlitus’s picture

Just Javascript and a custom theme function

gmak’s picture

any chance of getting a look at the code?

alexandreracine’s picture

Nice showcase and good job!

What I like about these showcase is we can discover new modules :) Like the Logintoboggan module witch is pretty nice!

Alexandre Racine

www.alexandreracine.com - mon site perso
www.salsamontreal.com La référence salsa à Montréal

Abilnet’s picture

What an excellent site, congrats! ...and very helpful write up, thanks so much, gracias!

James125’s picture

excellent work!

3lite’s picture

WOW... How long did it take to complete such a project?

cloudmine’s picture

One of the best Ubercart implementations I have ever seen! Great job guys!

Could you post somewhere the solution to enable one-click autocomplete search?

Thanks in advance

khanz’s picture

Nice work...
subscribing for future reference.

------------
Volvo, Video, Velcro. (I came, I saw, I stuck around.)