Waardijk
Al ruim 170 jaar sieren de schoenenwinkels van Waardijk het centrum van Alkmaar en Bloemendaal. De afgelopen 10 jaar heeft de webshop een prominente rol in de positionering veroverd. Reach Digital realiseerde een razendsnelle Magento 2 webshop met hoge kwaliteit component based frontend, gekoppeld aan het kassasysteem.
Component gebaseerde frontend
De frontend van Waardijk is opgebouwd uit frontend componenten. Geïsoleerde stukjes functionaliteit, waarin gedrag en opmaak is gedefinieerd. De integriteit van componenten blijft gewaarborgd, onafhankelijk van de plek op de webshop. We bouwden een component framework dat functioneert als communicatielaag (Frontend API's) tussen Magento 2 en de verschillende componenten. Zo gebruiken we het beste van Magento, verrijkt met hoogwaardige frontend functionaliteit componenten waar nodig.
Hero banner en sales banner
De homepagina van Waardijk wordt gesierd met een sfeerbeeld dat de bezoeker direct het familiebedrijf-gevoel geeft dat we willen uitstralen. Deze hero banner bevat een ingang naar de 4 belangrijkste categorieën van de webshop, waardoor de banner twee doelen dient. De berekening van afmetingen van weergave voor mobiel, desktop en alle varianten daartussen zijn vastgelegd in het component. De stijlelementen in de banner komen overeen met ontwerpen van andere marketinguitingen van Waardijk, zoals drukwerk en materiaal in de winkel. Als antwoord op de behoefte voor tijdelijke banners, zoals Sinterklaas of black friday, hebben we onder de hoofdbanner een smalle actie-banner uitgewerkt. Met aangeleverde standaard templates voor deze banners is het voor Waardijk mogelijk om deze banner eenvoudig te vernieuwen.
Navigeren als een App
Een significant deel van de online bestellingen wordt geplaatst door bezoekers die hun telefoon gebruiken. De navigatie bouwden we als icoon-tabs, waarbij zoekfunctie en menu in één tab zijn samengevat. Wanneer de gebruiker navigeert, verandert het logo in een terugknop. Een best practice die veel voorkomt bij mobiele apps. Met 60FPS animatie en de mogelijkheid om tussen de tabs de swipen, is de gebruikerservaring identiek aan die van een app. De door ons ontwikkelde app-shell, de laag die alle componenten bundelt, toont een laadindicatie direct na een actie van een mobiele gebruiker. Er is bij iedere actie reactie binnen het tijdsvenster van 0-100ms, de doelstelling voorgeschreven door Google's RAIL model voor PWA's. Met component based development en de mogelijkheden van de huidige app-shell, hebben we een grote stap gemaakt richting de ontwikkeling van een volwaardige progressive web app.
Maatselectie
Schoenmaten zijn verschillend per leverancier. Zo kan een leverancier bijvoorbeeld US maten hanteren, of een eigen maatvoering hebben. We wilden zowel de Nederlandse maat als dat van de leverancier richting klanten communiceren in één logische maatselectie-interface. Een interface die past binnen de visuele uitstraling, niet teveel ruimte verbruikt (daardoor de CTA naar beneden drukt) en er mooi uitziet bij 1 of 10 beschikbare maten. De oplossing vonden we in een dropdown-component met maatwerk content. Het component bood reeds een perfect schalende dropdown voor mobiel, waarbij rekening wordt gehouden met schermgrootte en verhoudingen. Op mobiel ervaart het als een native dropdown component. We verrijkten dit component met 2 kolommen content voor beide maten én een directe link naar de maattabel. Zowel het label als de waarde van iedere optie is in het component gevat, dus geen zwevende teksten.
Winkels
De 4 sfeervolle winkels zijn onderdeel van het onderscheidend vermogen van Waardijk. We combineerden praktische informatie zoals het adres en de openingstijden van iedere winkel met een passende sfeerfoto, in een galerij die bezoekers kunnen swipen. Een stukje herkenbaarheid vanuit de winkels, op een speelse manier aangeboden aan mobiele gebruikers.
Gedeeltelijke migratie
Een nieuwe webshop wordt door ons ontwikkeld op een afgeschermde testomgeving. Er was behoefte aan de mogelijkheid om op deze testomgeving content zoals tekstvelden, categoriebeschrijvingen en contentpagina's alvast op orde te maken. Het probleem; bij een migratie via de standaard tool van Magento wordt alle data gemigreerd en zouden deze inspanningen verloren gaan. We bouwden een uitbreiding van de Magento migratietool, waarmee het mogelijk is om gedeeltelijke migratie te realiseren. We migreerden bij start van het project de Magento 1 configuratie, categorieën en cms-pagina content. Vanaf dit punt kon de contentverantwoordelijke bij Waardijk aan de slag, met als input de originele content. Bij livegang migreerden we alle historische bestellingen en klantprofielen. Bijkomend voordeel van deze strategie was tevens een minder complexe en minder foutgevoelige livegang.
Productimport uit Kassasysteem
Productinformatie importeren we uit het kassasysteem ACA met de door ons ontwikkelde open source Magento 2 module magento2-Ho_Import. ACA stelt een .CSV feed beschikbaar, waarop we bewerkingen doen zoals het mappen van categorieën, het automatisch aanmaken van productattributen (filters), het sorteren op seizoen en het koppelen van leveranciermaten aan Nederlandse maten. Het proces genereert automatisch configureerbare producten voor de productvarianten die bij elkaar horen.