Blue background with pattern

Verbeter je Magento 2 checkout met de Hyvä Checkout

Peter Jaap BlaakmeerOrange dot9 Jun 2023

Waarom genoegen nemen met gemiddeld als je het beste kunt hebben? 🤩

Als laatste stap in de winkelervaring van de klant speelt de conversieratio van de afrekenpagina een cruciale rol. Hyvä Checkout pakt dit aan door het ontwerp en de gebruiksvriendelijkheid van het afrekenproces aanzienlijk te verbeteren, wat kan leiden tot een stijging van maar liefst 35% in conversieratio's.

Hyvä Checkout revolutioneert de afrekenervaring voor alle betrokken partijen. Voor shoppers biedt het een snel, soepel en intuïtief afrekenproces, met een laadtijd die op mobiele apparaten 13 keer sneller is dan de standaard Magento Luma afrekenpagina. Voor handelaren leidt het tot meer verkopen met een betere conversieratio en out-of-the-box configuratieopties. En voor ontwikkelaars vermindert het de tijd en moeite die nodig is om de Magento Checkout aan te passen met minstens een factor tien.

De Hyvä Checkout wordt standaard geleverd met meerdere lay-outopties, zoals een afrekenproces in drie stappen of een "one-step checkout", waarbij alle stappen op één pagina worden weergegeven. Deze lay-outopties kunnen vrij eenvoudig worden gewijzigd en het toevoegen van een aangepaste lay-out is ook eenvoudig.

De Hyvä Checkout is gebouwd bovenop Magewire, een systeem waarmee onze backend-ontwikkelaars de logica voor de afrekenpagina kunnen maken in PHP en XML en deze kunnen verbinden met de frontend zonder grote delen JavaScript te hoeven schrijven. Omdat de logica aan de serverkant wordt geplaatst, is de afrekenpagina erg snel, omdat deze niet afhankelijk is van de prestaties aan de clientzijde.

Integraties

Het toevoegen van functionaliteiten zoals betaalmethoden, verzendmethoden en adresvalidatie gaat vele malen sneller dan het bouwen ervan in de oude Luma afrekenpagina. De Hyvä Checkout is vanaf het begin gebouwd met het idee van eenvoudige aanpasbaarheid, wat echt tot uiting komt.

De momenteel beschikbare integraties voor Hyvä Checkout zijn:

  • Mollie
  • Multisafepay
  • PostNL
  • ShipperHQ
  • EU VAT calculation
  • PayPal
  • Amazon Pay

Intern hebben we ook een integratie gebouwd met Paazl.

Voor een andere klant hebben we een lijst van beschikbare UPS ophaalpunten geïmplementeerd als verzendmethode. Dit kostte slechts enkele uren in plaats van dagen.

Technisch de diepte in

Voor de implementatie hoefden we alleen de gegevens van de winkelwagen via PHP naar een API-eindpunt te sturen en de ophaalpunten terug te krijgen. Met de standaard Hyvä Modal konden we deze gegevens eenvoudig converteren naar een gebruiksvriendelijke interface voor de klant. Wanneer de gebruiker een ophaalpunt selecteert, stuurt Magewire het geselecteerde punt naar de offerte.

Een van de geweldige functies die de afrekenpagina biedt, zijn de validatiemethoden. Met Magewire kunt u eenvoudig de createBlocking-methode gebruiken, die deel uitmaakt van de EvaluationResultFactory, om te controleren of de gebruiker al een ophaalpunt heeft geselecteerd. Zo niet, dan blokkeert het de gebruiker om een bestelling te plaatsen. In combinatie met andere methoden zoals createSucces en createErrorMessage is het heel eenvoudig om de invoer van de gebruiker aan de backend te valideren en automatisch feedback aan hen te geven in de frontend.

Deze methoden maken het ook erg gemakkelijk om het afrekenproces op verschillende manieren op te splitsen. Het is heel eenvoudig om een afrekenproces op één pagina te maken, maar hetzelfde geldt voor een afrekenproces in meerdere stappen.

Voor frontend-validatie gebruikt de afrekenpagina een combinatie van Magewire samen met de standaard Hyvä Form-validatie. Dit maakt het gemakkelijk om berichten weer te geven terwijl de gebruiker het formulier invult op een toegankelijke manier.

Het voordeel van de afrekenpagina die geen grote delen JavaScript bevat en ook geen framework bevat, maakt het ook gemakkelijk om betalings- of verzendopties toe te voegen die werken met iFrames of gebaseerd zijn op standaard JS, zoals Paazl. Normaal gesproken zou je deze in RequireJS moeten "haken" of in een framework zoals React moeten integreren. In de Hyvä Checkout kun je gewoon de standaardscripts gebruiken en misschien wat gebeurtenisluisteraars toevoegen om feedback naar de backend te sturen. Op deze manier kunnen we grote delen van de oorspronkelijke extensie hergebruiken.

Deze eenvoudige methoden die zijn ingebouwd in Magewire maken het echt gemakkelijk om de afrekenpagina uit te breiden en volledig aan te passen in veel minder tijd dan voorheen, zonder concessies te doen aan de vereiste betrouwbaarheid van een afrekenpagina.