Webshop met oneindig aantal configuraties.

Projectbeschrijving.

PromoBee is medio 2018 een belangrijke leverancier van promotionele artikelen en relatiegeschenken op de Nederlandse- en Belgische markt. Zij beschikte over een slecht opgebouwde Magento webshop met veel belemmeringen en waren aan toe een een vernieuwde site. Op opdracht van Team Koen mocht ik een compleet nieuw en op maat website ontwikkelen in WordPress met WooCommerce. De producten die verkocht werden beschikte over diverse en complexe variaties. Van kleurkeuze tot aantal opdrukkleuren. Deze variaties zitten niet standaard in het WooCommerce systeem. Het was dus belangrijk om binnen de webshop een oplossing hiervoor te integreren.

Configuratie-systeem + filter.

Op basis van bepaalde richtlijnen was het design bij dit project direct tijdens de ontwikkeling bedacht en d.m.v. Bootstrap in een rap tempo opgebouwd op basis van de huisstijl van Promobee. WooCommerce is er vervolgens ingebouwd met de componenten en opmaak van de thema. Voor de complexe product variaties is er een op maat configuratie-systeem ontwikkeld waarmee de klant flexibel en dynamisch de configuraties per product kan instellen met verschillende input velden die een gebruiker kan invullen om het product te configureren. Voor de configuraties is er vervolgens voor de overzichtspagina een filter systeem op maat gebouwd waarmee je producten kunt filteren o.b.v. de waardes van de configuraties.

Vergelijk- en sorteringssysteem.

De producten worden in bulk verkocht, dus bij het overzicht hebben we een sortering functie gebouwd waarmee je een totaalprijs of een prijs per stuk kunt laten tonen. Daarnaast kun je in het overzicht op ‘aantal’ en ‘budget’ de producten vergelijken met een vergelijkssyteem op maat. Onderling kun je in het overzicht ook de kleuren switchen van een product, hierdoor hoef je het product niet te openen en biedt je de gebruiker een directe vergelijkingtool.

Multi-step checkout + Offerte systeem.

In het webshop is ook een multi-step checkout process op maat ingebouwd met een mogelijkheid om een bestand mee te geven voor een proefdruk en is er een offerte systeem ingebouwd om een offerte aan te vragen i.p.v. te bestellen. De bestellingen komen in de back-end vervolgens als offerte aanvraag binnen en worden er andere e-mails uitgestuurd en een andere process gehanteerd.

Google Shopping Feed.

Door alle maatwerk en complexe variaties moest er ook een oplossing bedacht worden voor de Google Shopping Feed waarmee er vanuit een feed op de website de producten met het juiste configuraties opgehaald kunnen worden voor weergave in Google Shopping. Hiervoor is een feed op maat gebouwd waarmee er voor bepaalde configuraties opsplitsingen kunnen worden gemaakt tussen producten en worden de juiste data meegegeven zodat de producten in het meest optimaal weergave in Google Shopping komen te staan.

Optimalisaties.

Tijdens het ontwikkelen worden alle script libraries beheerd via Node.JS/NPM waardoor altijd gemakkelijk het laatste versie kan worden opgehaald (denk bijv. aan Bootstrap, Fontawesome etc.) en wordt er aan hand van ‘task runners’ met Gulp.js alle SASS en JavaScript code ‘gecompiled’ naar ‘geminified’ en ‘combined’ scripts.  Daarnaast wordt er binnen het scripts gezorgd dat afbeeldingen ‘ge-lazyload’ worden en waar mogelijk worden scripts in de footer geladen. Dit zorgt ervoor dat een minimum aantal requests wordt behouden wat het snelheid flink ten goede komt. Aangezien de website responsive en ‘mobile first’ ontwikkeld is, werkt de site optimaal op iedere device en is hij ook voor elk device en potentiële klant te bewonderen.