12GO Biking
De afgelopen 20 jaar is 12GO Biking gegroeid tot de grootste fietsenwinkel van Nederland en België. Fietsen en accessoires worden aan ruim 500.000 klanten verkocht. Reach Digital realiseerde een volledig vernieuwde Magento 2 webshop die geheel aansluit op de behoeften van sportieve- of recreatieve fietsfanaten.
Stock filters
Door de sterk toegenomen vraag naar fietsen en afname van direct beschikbare grondstoffen, kan de levertijd voor sommige modellen flink oplopen. Om tijdens het navigeren direct inzicht te geven in welke modellen wanneer geleverd kunnen worden, hebben we aan de catalogus pagina stock filters toegevoegd. De bezoeker kan de gebruikelijke filterselectie uitbreiden met lichaamslengte (waarop de maat van de fiets is gebaseerd) en levertijd. We draaien een cronjob om de samenhang tussen lichaamslengte en (toekomstige) voorraadstatus op te halen. De verkregen uitkomsten worden opgeslagen op het configurable product. Vervolgens leest de stock filter deze data uit en toont het de producten die matchen met de ingestelde filterselectie.
Maatspecificatie toegevoegd aan swatches
Net als fietskleding, worden ook fietsen opgeleverd in verschillende maten. In dit geval gaat het om framematen. Voor bezoekers kunnen framematen wat lastig in te schatten zijn als deze zijn gebaseerd op standaard maataanduidingen (S, M, L, XL etc.). Om bezoekers in dit proces te ondersteunen, hebben we de swatches -waarin de framematen op de productdetailpagina worden getoond- uitgebreid met een lichaamslengte specificatie die per fiets kan worden ingesteld. Om dit mogelijk te maken zijn de lichaamslengtes vanuit het configurable product ingeladen en hebben we in de backend een tabel toegevoegd waarin lichaamslengtes aan de juiste framematen worden gekoppeld. De gegevens uit deze tabel worden opgehaald en vervolgens getoond op de frontend.
Skeleton loader
Het selecteren van de juiste productvariant gebeurt op de productdetailpagina door het aanklikken van zogeheten swatches. Standaard worden swatches via JavaScript bestanden ingeladen. Doordat deze JavaScript bestanden echter te laat in de HTML voorkomen, ontstaat layout shifting. Delen van de pagina verspringen dan, omdat de swatches later inladen, reeds gevulde ruimte opeisen en daardoor andere content blocks wegdrukken. Om dit te voorkomen en hierdoor de gebruikerservaring te optimaliseren hebben is een skeleton loader toegevoegd. Een skeleton loader toont de bezoeker gereserveerde ruimtes met daarin een animatie die duidelijk maakt dat de swatches zeer binnenkort worden getoond. De skeleton loader heeft als bijkomend voordeel dat de aandacht van de bezoeker direct naar de swatches wordt getrokken.
Dynamische voorraadstatus
Om de bezoeker bij het selecteren van maten en/of kleuren van een fiets direct inzicht te geven in de beschikbaarheid, hebben we een dynamische voorraadstatus gerealiseerd. Aan de hand van de geselecteerde swatches wordt de voorraadstatus opgehaald uit de backend en eventuele levertijden (bij tijdelijke uitverkocht) via de API uit een extern ERP-systeem. Vervolgens wordt de opgehaalde informatie getoond in een content block onder de in-winkelwagen knop, zodat deze voor de bezoeker niet te missen is. Afhankelijk van de getoonde informatie wordt de in-winkelwagen knop direct bijgewerkt (`in winkelwagen`, `reserveer nu` of `uitverkocht`) en kan de bezoeker het product bestellen of reserveren.
Opvolgende modellen
Regelmatig breidt 12GO Biking het assortiment uit met nieuwe modellen. Als een bezoeker tijdens het navigeren een fiets bekijkt waarvan al een nieuwer model beschikbaar is, stellen we deze bezoeker hier direct van op de hoogte via een notificatie boven de swatches. Hiervoor voegden we een attribuut toe in de backend waarmee we specificeren welke fiets de voorganger is. Als dit veld gespecificeerd is, wordt de notificatie (+ link naar nieuwste pagina) automatisch aangemaakt op de productpagina’s van de oudere modellen. De reviews van de oudere modellen worden ook op de productpagina van het nieuwste model ingeladen. Zo krijgt de bezoeker een zo volledig mogelijk beeld van de (geschiedenis van de) fiets, ook wanneer er misschien nog geen reviews zijn voor het nieuwe model.
Integratie ANWB verzekering
Het afsluiten van een verzekering voor een gloednieuwe fiets is geen overbodige luxe. Om bezoekers direct na aankoop van een fietsverzekering te voorzien, hebben we ANWB fietsverzekeringen geïntegreerd in de swatches op de productdetailpagina. Zo kan de bezoeker tijdens het bestelproces ook direct een verzekering afsluiten voor diefstal, beschadiging en/of pechhulp. De verzekeringen worden aangeboden via Unigarant (service van ANWB) en zijn gebaseerd op het type fiets. De verzekeringsdata (soort en premie) wordt bij het inladen van de pagina via een API call live van de Unigarant server opgehaald. Om dit mogelijk te maken hebben we de ReachDigital_Unigarant module geïmplementeerd, een eigen module die we specifiek voor deze koppeling hebben ontwikkeld. Als de bezoeker vervolgens een fietsverzekering heeft geselecteerd, wordt deze toegevoegd aan de productselectie en ook in de minicart en checkout getoond. In de checkout kan de bezoeker de resterende verzekeringsgegevens invoeren waarna het afsluiten van de fietsverzekering is voltooid.
Performance
De performance scores die met standaard Magento 2 worden behaald zijn doorgaans niet voldoende. Om dit te verbeteren hebben we onder meer onze oplossing voor Advanced Bundling toegepast; een performanceverbetering waarin we Javascript bestanden bundelen op basis van de in te laden pagina. Het Javascript bestand is kleiner en zorgt voor een lagere Total Blocking Time (TTB). Daarnaast hebben we Polymer en Lit geüpdatet naar Lit 2.0 en Webpack vervangen door Rollup. Dankzij deze verbeteringen is de in te laden webcomponent bundle 63% kleiner, en zien we ook aanzienlijke verbeteringen in de user experience en Google Web Vital scores. Een hoge performance is een belangrijke factor in de gebruikerservaring van een webshop. Performance optimalisatie blijft daarom een doorlopend aandachtspunt in onze sprints. Bovendien monitoren we na elke release de scores, zodat we eerdere verbeteringen behouden en van nieuwe verbeteringen direct het resultaat zien.
End to end testing
Het is zelden, maar het kan voorkomen dat de ontwikkeling van een nieuwe feature voor complicaties zorgt elders in de codebase. Om dit voor te zijn wordt tijdens het development proces de werking van de codebase na elke deployment gemonitord middels end-to-end testing. Een automatisch gegenereerd stukje code instrueert Github Action. Deze doorloopt op de testserver de essentiële functionaliteiten van de 12Go Biking webshop. Voorbeelden van deze tests zijn het doorlopen van het volledige bestelproces (van product navigatie tot de Payment Service Provider-pagina) en het vergelijken van de servers (server synchronisatie). Testresultaten worden direct gerapporteerd via Slack. Zo borgen we stabiliteit van de webshop: voor, tijdens en na de livegang van nieuwe features.