Styling
En standardstil kan injiceras på sidan genom att ställa in egenskapen installCSS i widget-konfigurationen eller genom att anropa metoden installCSS på widget-instansen. Källan till den injicerade stilen i form av en SASS-fil kan nås på:
https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout.scss
Användarinteraktion
Det finns två typer av användarinteraktion som påverkar widgeten:
Externa ändringar
När widgeten först skapas och varje gång användaren gör ändringar i en av de inmatningsvariabler som skickas till /delivery-checkouts API bör följande sekvens av åtgärder ske:
- Inaktivera widgeten med ett anrop till disable-metoden.
- Gör en AJAX-förfrågan till /delivery-checkouts API. Webbutikens backend fungerar normalt som en proxy för denna typ av anrop så att en hemlig API-nyckel kan skickas till REST API:et.
- När ett svar anländer, anropa updateList-metoden och aktivera sedan widgeten med ett anrop till enable-metoden.
// Inaktivera widgeten medan AJAX-förfrågan pågår.
widget.disable();
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
//Uppdatera widgeten med nya data.
widget.updateList(data);
}).catch(function() {
//Hantera fel
}).then(function() {
//Aktivera alltid widgeten
widget.enable();
});
Interna ändringar
När användaren väljer ett av leveransalternativen i Delivery Checkout eller uppdaterar något värde kopplat till det valda alternativet kommer funktionen resultCallback i widget-konfigurationen att anropas. Callback-funktionen kommer att få ett enda argument i form av ett JavaScript-objekt med följande egenskaper:
| Egenskap | Beskrivning | Typ | Värde |
|---|---|---|---|
| valid | Anger om de aktuella värdena i widgeten är giltiga. Endast om detta är true bör användaren kunna fortsätta med kassan. | boolean | true, false |
| deliveryCheckoutId | Delivery Checkout-ID inklusive version. | string | |
| selectedOptionId | ID för det för närvarande valda leveransalternativet. | string | |
| optionIds | En array av valda Delivery Checkout-alternativs ID:n från högsta till lägsta nivå. | string[] | |
| price | Det totala priset för alla valda leveransalternativ och tillägg | number | |
| agent | Det valda agent-ID:t. | string | |
| selectedAddons | En array av valda tillägg. | AddonResult[] | |
| fields | En array med värden för ytterligare inmatning kopplat till det valda leveransalternativet. | FieldResult[] |