Styling
Een standaard stijlblad kan in de pagina worden geïnjecteerd door de installCSS-eigenschap in de widgetconfiguratie in te stellen of door de installCSS-methode op de widgetinstantie aan te roepen. De bron van het geïnjecteerde stijlblad in de vorm van een SASS-bestand is toegankelijk via:
https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout.scss
Gebruikersinteractie
Er zijn twee soorten gebruikersinteractie die de widget beïnvloeden:
Externe wijzigingen
Wanneer de widget voor het eerst wordt gemaakt en elke keer dat de gebruiker wijzigingen aanbrengt in een van de invoervariabelen die naar de /delivery-checkouts API worden gestuurd, moet deze reeks acties plaatsvinden:
- Deactiveer de widget met een oproep naar de disable methode.
- Maak een AJAX-verzoek naar de /delivery-checkouts API. De backend van de webshop fungeert normaal gesproken als proxy voor dit type oproep zodat een geheime API-sleutel naar de REST API kan worden gestuurd.
- Wanneer een antwoord binnenkomt, roep dan de updateList methode aan en activeer vervolgens de widget met een oproep naar de enable methode.
// Widget uitschakelen terwijl AJAX-verzoek bezig is.
widget.disable();
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
// Widget bijwerken met nieuwe gegevens.
widget.updateList(data);
}).catch(function() {
// Fout afhandelen
}).then(function() {
// Widget altijd inschakelen
widget.enable();
});
Interne wijzigingen
Telkens wanneer de gebruiker een van de Delivery Checkout-opties selecteert of een waarde bijwerkt die verbonden is aan de geselecteerde optie, wordt de resultCallback functie in de widgetconfiguratie aangeroepen. De callback-functie ontvangt één argument in de vorm van een JavaScript-object met de volgende eigenschappen:
| Eigenschap | Beschrijving | Type | Waarde |
|---|---|---|---|
| valid | Geeft aan of de huidige waarden in de widget allemaal geldig zijn. Alleen als dit true is mag de gebruiker doorgaan met de checkout. | boolean | true, false |
| deliveryCheckoutId | De Delivery Checkout ID inclusief versie. | string | |
| selectedOptionId | De ID van de momenteel geselecteerde leveringsoptie. | string | |
| optionIds | Een array van geselecteerde Delivery Checkout optie-ID’s van hoogste naar laagste niveau. | string[] | |
| price | De totale prijs van alle geselecteerde leveringsopties en addons | number | |
| agent | De geselecteerde agent-ID. | string | |
| selectedAddons | Een array van geselecteerde addons. | AddonResult[] | |
| fields | Een array van waarden voor aanvullende invoer gerelateerd aan de geselecteerde leveringsoptie. | FieldResult[] |