Shopping List Generator

Naast de Makro ‘Office & Cleaning’ webshop bestonden er toen ik bij Makro kwam een aantal lokale e-commerce initiatieven. Waaronder Makro Dagdeal, Makro Direct en de verkoop van wijn.

Makro Dagdeal was geen lang leven meer beschoren en werd beëindigd, ook een beetje ten gunste van de nieuwe webshop. De andere twee initiatieven bleven, maar waren wel verre van efficiënt. De online verkoop werd namelijk gerealiseerd vanuit de digitale editie van de Makro folder.

Digitale folders

Je kent die digitale folders wel, bijna elke retailer heeft ze wel op hun website staan. Je kan dan de folder lezen en in sommige gevallen ook direct vanuit de folder bestellen (zoals hier bij de BCC folder).

Dat gebeurde dus bij Makro ook. Je kon dan door de folder bladeren en daaruit de wijnen of tuinartikelen (Makro Direct) bestellen. Verder was er geen andere online bestelmogelijkheid: de folder was de interface, geen webshop, niets. De checkout (het afrekenen) vond plaats in een speciaal ingerichte omgeving die ook niets anders dan een checkout was.

Pampers actie

Dat moest anders! Want naast dat het klantonvriendelijk is, is het nogal veel werk. Toen we in de zomer van 2012 een grote Pampers actie online gingen doen vroegen m’n collega’s ‘of dat niet anders kon’. De uitkomst was een handmatig geschreven HTML pagina waarop alle actieproducten stonden. Die pagina misbruikte de bestelfunctionaliteit uit de folder waardoor het mogelijk was om vanuit een pagina op makro.nl direct naar die checkout te gaan.

Pampers Shopping List
Eerste versie van de Pamper shop

Wederkerend actiepunt

Het resultaat was al op de eerste dag overdonderend: nog nooit was er zoveel op een dag online omgezet! Dus dat smaakte naar meer en al snel werd besloten ook ná deze twee weken durende actie Pampers online te blijven verkopen. Maar ja… een handmatig geschreven HTML pagina was niet makkelijk te beheren. Bovendien zou dat dan een wederkerend actiepunt op mijn do-to lijst worden.

Shopping List Generator

Om dat te voorkomen heb ik een WordPress theme geschreven dat een Excelsheet met prijzen en overige productinformatie kon inlezen en valideren op foute invoer. Nadat het bestand ingelezen was kon er in de WordPress-editor een header gedeelte gemaakt worden. Uiteindelijk kon alles geëxporteerd worden als HTML/JS/CSS en weer ingelezen worden in het Makro.nl CMS. Om het een naam te geven heb ik het SLG genoemd: the Shopping List Generator.

Super makkelijk dus, aan de hand van een Excelsheet kon dus een hele voorkant in 1 klap gegenereerd worden, zonder mijn tussenkomst. Na de Pampers gingen ook Wijn en Makro Direct over op deze nieuwe methode.

In de laatste versie was de bezoeker in staat om de producten te sorteren op naam, relevatie en prijs en te filteren op een aantal attributen die in de Excelsheet aangegeven konden worden. Bijvoorbeeld land van herkomst, soort wijn en het smaaktype. Allemaal op een statische HTML pagina zonder server aanroepen, alleen gebruik makend van een razendsnel JavaScript (filteren/sorteren van 200 producten in c.a. 600ms), CSS en JSON data.

Elke selectie (filter + sortering) leverde een unieke URL op (nogmaals: het was dus 1 statische HTML pagina), waarmee dus ook gedeeplinkt kon worden naar een specifieke selectie.

Video van de werking

Screenshots


door Shirley de Jong

Geef een reactie

Geef hier je reactie. Je e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *


De verificatie periode van reCAPTCHA is verlopen. Laad de pagina opnieuw.