Drupal

Tuinkussenwinkel.nl is een niche webshop, uitgevoerd in Drupal en Ubercart. Er worden uitsluitend tuinstoelkussens en aanverwante accessoires als parasols, kussenhoezen en tafellopers verkocht. Het assortiment bestaat uit een aantal betere merken, als Benetton, Summerset en Cinderella, aangevuld met de mogelijkheid om kussens op maat te bestellen. Een van de doelen was een Drupal/Ubercart shop te bouwen met een heel eigen look.

Drupal + Ubercart

Het betreft een redelijk standaard configuratie met Drupal 6.x en Ubercart 6.x-2.x. Voor een project als dit zijn Drupal en Ubercart een ideale combinatie. In vergelijking met b.v. OScommerce of Magento is er wel wat meer inspanning nodig in de vorm van het downloaden en installeren van alle benodigde modulen, het configureren hiervan, het verkrijgen en importeren van de juiste vertaling etc.

Waarom

Een open source systeem was een vereiste van de opdrachtgever voor dit project.

Het grote voordeel van de Ubercart ten op zichte van andere open source e-commerce oplossingen zit in de schaalbaarheid en flexibiliteit. Door de cache-mogelijkheden die Drupal biedt is het mogelijk grote hoeveelheden content aan veel gebruikers aan te bieden. Omdat Drupal an sich geen e-commerce-systeem is en zich daartoe dus niet beperkt, is het toevoegen van de meest uiteenlopende functionaliteit mogelijk en vaak eenvoudig. Daarnaast is er veel meer vrijheid om de vormgeving op maat neer te zetten.

Product catalogus

De standaard catalogus van Ubercart is vervangen door Views, voornamelijk vanwege de mogelijkheid te filteren in het heel smalle maar vrij diepe assortiment tuinstoelkussens.

Waar de standaard Ubercart catalogus mogelijkheden genoeg heeft om producten op veel manieren in het overzicht weer te geven, b.v. onder elkaar, in een grid, met/zonder bestelknop etc. mist het de mogelijkheid producten uit meerdere categorien in één overzicht weer te geven. Per blad worden standaard de producten uit de geselecteerde categorie getoond, waarbij de verschillende categorien als links hierarchisch worden weergegeven:

Voor veel projecten is dit een prima methode om producten te ontsluiten.

Views geven veel meer mogelijkheden, waaronder het groeperen en sorteren van producten uit verschillende categorien. Met een filter kan de bezoeker optioneel de productkeuze verkleinen.

Verder zijn wat kleine stukjes maatwerk geschreven in de vorm van theme en form overrides om de beoogde vormgeving en functionaliteit te kunnen realiseren.

Categorisatie

De groepering van de tuinkussens op merk/kleur/set/stoel type wordt gedaan door standaard vocabularies, middels Views wordt er een filtermogelijkheid geboden. De mogelijkheid te sorteren op prijs is een tweede page van dezelfde view, maar dan gesorteerd op prijs uiteraard.

Uitleg voor Drupal techneuten:

Omdat de "sell price" eigenschap binnen Views alleen als sorteer optie beschikbaar is bij keuze voor tabelweergave van de gegenereerde pagina van Views (op het moment van bouwen), is voor deze oplossing gekozen.

Backend automatisering

Om met zo min mogelijk maatwerk de verwerking van orders efficient te laten verlopen is slim gebruik gemaakt van een aantal opties die Ubercart biedt.

Order workflow

Zo zijn de aanwezige order statussen uitgebreid om alle beheerders maar ook de klant centraal een gedetailleerd inzicht te geven in het verloop van een order. Ook worden alle berichten aan klanten behorend bij een order via Ubercart verzonden, zodat alle betrokkenen op de hoogte zijn van wat er gecommuniceerd is over een bepaalde order.

Facturatie

De facturatie is geheel geautomatiseerd. De factuur die naar de beheerder wordt verzonden van iedere bestelling is zo opgemaakt en samengesteld dat deze direct op briefpapier kan worden afgedrukt, met de verzend gegevens voor het venster van de enveloppe.

Gebruikte modulen

• Views
• Ubercart 6.x-2.x + benodigde modulen (zie http://drupal.org/project/ubercart "Module dependencies")
• iDEAL lite
• Frequently Asked Questions
• Dynamic Persistant Menu
• Search config
• Wysiwyg
• IMCE
• Menutrails
• Sitemap
• Taxonomy Menu
• Pathauto
• Webform

Maatwerk

• Theme
• Lightbox 2 hack om schaduwrand weer te geven.*
• Dynamic Persistant Menus kleine hack tbv minder HTML code en fadeout animatie*
• Eenvoudige form alters om advanced search, add to cart en login block forms te manipuleren. Dit was nodig om deze formulieren aan het beoogde ontwerp aan te passen, zo staan de labels van bijvoorbeeld het login formulier in de velden in plaats van er boven.
• jQuery javascript om een aantal formulier velden van een "intern label" te voorzien, dat wegvalt op het moment dat het veld actief wordt.

*Hacks: We zijn geen voorstander van hacks. In deze gevallen was het niet mogelijk op een andere manier het beoogde doel te bereiken:

• De Lightbox2 module is aangepast in het javascript deel van Lightbox2 zelf. Dit is dus geen Drupal code die makkelijk te "overrulen" is door bijvoorbeeld theme hooks.
• Dynamic Persistant Menus is een betrekkelijk eenvoudige module die geen theme hooks bevat (op moment van project uitvoering) om netjes maatwerk te implementeren. De idiale situatie zou zijn dat wij theme hooks hadden ingebouwd en deze als patch aan de module maintainer hadden aangeboden, helaas is voor zulke idealen wel vaak, maar niet altijd gelegenheid.

Vormgeving

Het ontwerp en de theming had een groot aandeel in de gehele ontwikkeling. Het ontwerp is gedaan door onze eigen ontwerper, die volgens opdracht niet specifiek rekening heeft gehouden met Drupal of Ubercart. Dit geeft wat uitdagingen, zoals het login boxje bovenin het scherm, maar het resultaat is er dan ook naar. Het is een originele site geworden die gemakkelijk navigeert.

Problemen en oplossingen

Omdat dit niet bepaald onze eerste Ubercart klus is zijn we niet heel veel problemen tegen gekomen. Zowel de Ubercart als Views waren bij de ontwikkeling nog niet als stabiel uitgegeven, daar zijn we als verwacht tegen een paar bugs aangelopen. De meeste waren al gemeld en bij een enkele hebben we een oplossing voorgedragen.

De meeste uitdagingen hadden te maken met de implementatie van het ontwerp, dat dus niet specifiek voor Ubercart of Drupal is gemaakt. Zie ook de paragraaf "Vormgeving" hierboven.