Met opvallende fietsdesigns en innovative smart-bikes verovert VanMoof al een aantal jaar de harten van fietsfans over de hele wereld. Het nieuwste product; een e-bike voor de Japanse markt. Reach Digital realiseerde de uitdagende functionaliteit die de lancering in Japan mogelijk maakten.
De lancering van de nieuwe e-bike van VanMoof ging gepaard met de wens van het bedrijf om te werken met preorders. Met preorders (reserveringen) kunnen klanten een deel van de betaling doen bij het plaatsen van hun bestelling en een deel bij levering. We bouwden een Magento module die deze functionaliteit verweeft in het het afrekenproces, de backend van Magento uitbreidt met de nodige functionaliteit en integreert met het ERP systeem Odoo.
Om gedeeltelijke betaling mogelijk te maken, haken we in op functionaliteit van payment service provider Adyen. Direct bij de betaling van het eerste (deel)betaling, maken we een recurring contract aan. We ontvangen een payment token en slaan deze op in het systeem. In Magento wordt een bestelling aangemaakt met twee orderregels; één voor de deelbetaling, de ander voor het product. De status van deze bestelling is 'preorder'. De bestelling wordt doorgezet naar Odoo en er wordt in Odoo een conceptfactuur aangemaakt voor de volledige bestelling.
Wanneer het product verzonden kan worden, klikt een klantenservicemedewerker op de valideerknop in Odoo. Via een API call naar Magento wordt het resterende bedrag afgeschreven van de creditcard. Hiervoor gebruiken we de payment token. Alleen bij een succesvolle tweede transactie, wordt de conceptfactuur in Odoo omgezet naar een factuur en wordt de status van de bestelling in Magento aangepast naar 'processing'. Er kan nu een verzending worden aangemaakt. Mocht de afschrijving niet lukken, dan zal de klantenservice een email sturen met een payment link.
Het samenstellen van een fiets kunnen bezoekers doen via de maatwerk productconfigurator. De productconfigurator is opgebouwd uit verschillende webcomponents, waardoor het geheel aanvoelt als een app. 60fps animatie en realtime feedback bij iedere gekozen optie dragen bij aan deze user experience.
Alle nieuwe Magento webshop ontwikkelingen voor VanMoof zijn gebouwd als webcomponents. We bouwden functionaliteit als custom HTML elementen, waarin behaviour en design zijn vastgelegd en geïsoleerd. Er hoeft alleen data in, die via een custom REST api client side wordt ingeladen. Ze gedragen zich op iedere pagina of plaats hetzelfde en kunnen dus letterlijk overal geplaatst worden. Door component-based development hadden de betrokken design- en ontwikkelpartners volledige vrijheid op grafisch en UX gebied en maken we de eerste stappen naar een PWA (progressive web app) voor VanMoof.
De custom options van de configurable products zijn gekoppeld aan een simple product via SKU. Voorraad wordt op de Magento standaard manier gemuteerd, waardoor er geen maatwerk nodig is in de koppeling met het voorraadsysteem of andere extern gekoppelde systemen. De combinatie van configurable products en product options kunnen samen 1 productafbeelding rendereren. Een funtionaliteit die normaal beperkt is tot combinaties van de eigenschappen van een configurable product.
Wanneer een dure optie wordt gekozen, dan veranderen de prijzen van overige opties om het prijsverschil realtime weer te geven. Een goedkopere optie toont dan als een mindering in de totaalprijs. De volgorde waarin opties worden gekozen is vrij, daar waar Magento standaard een bepaalde volgorde forceert. Een bestelling wordt verwerkt als een configurable product met verschillende simple products.
De VanMoof webshop is een combinatie van brand experience en praktische webshop. Door het verhaal heen zijn op sommige plaatsen call to actions verwoven. Om op bepaalde plaatsen de maximale kortingsprijs van een fiets te kunnen tonen, realiseerden we een speciaal component. Dit component rekent op basis van een door VanMoof in te stellen productconfiguratie de normale prijs uit en de optelsom van alle onderliggende simple products kortingsprijzen. Het 'self contained' component kan op iedere pagina worden getoond en haalt client-side de benodigde data op via de custom REST api.
Bij het samenstellen van een fiets kunnen bezoekers verschillende opties kiezen zoals de kleur, een slot of type bagagedrager. De voorraadstatus van een optieproduct heeft invloed op de levertijd. Bij de lancering in Japan was voorraadinformatie niet gespecificeerd op productniveau, maar was er afhankelijkheid van de totale productiecapaciteit. We bouwden een levertijdindicatie die op basis van de totale productiecapaciteit in combinatie met de gekozen opties real-time de juiste levertijdindicatie biedt.
Om de eerste fietsen prijstechnisch extra interessant aan te bieden, realiseerden we een early bird of vroegboekkortingssysteem in Magento bekend van bijvoorbeeld crowdfunding platformen. De eerste honderd bezoekers krijgen een hoge korting (super early bird), de opvolgende honderd bezoekers een iets minder hoge korting (early bird) en de allerlaatste staffel de allerlaagste korting (late bird.) Het eindproduct is een uitbreiding op Magento's catalog price rules. Iedere 'kortingsstaffel' is in te richten als catalogus prijsregel met een onderlinge relatie, waardoor bij het bereiken van het maximaal aantal uit te geven kortingen het systeem automatisch doorschakelt naar een lagere kortingsstaffel. De kortingen en de sequentie zijn door VanMoof zelf te configureren. Alle regelgebaseerde filters die standaard in Magento zitten zijn functioneel, dus early bird of vroegboek kortingen zijn bijvoorbeeld geldend voor een select aantal producten of juist uit te sluiten voor bepaalde producten.