Styling
Et standard stilark kan injiseres på siden ved å sette installCSS-egenskapen i widget-konfigurasjonen eller ved å kalle installCSS-metoden på widget-instansen. Kilden til det injiserte stilarket i form av en SASS-fil kan nås på:
https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout.scss
Brukerinteraksjon
Det finnes to typer brukerinteraksjon som påvirker widgeten:
Eksterne endringer
Når widgeten først opprettes og hver gang brukeren gjør endringer i en av inputvariablene som sendes til /delivery-checkouts API, bør denne sekvensen av handlinger skje:
- Deaktiver widgeten med et kall til disable metoden.
- Utfør en AJAX-forespørsel til /delivery-checkouts API. Nettbutikkens backend vil normalt fungere som en proxy for denne typen kall slik at en hemmelig API-nøkkel kan sendes til REST API-et.
- Når et svar mottas, kall updateList-metoden og aktiver deretter widgeten med et kall til enable metoden.
// Deaktiver widget mens AJAX-forespørsel pågår.
widget.disable();
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
//Oppdater widgeten med nye data.
widget.updateList(data);
}).catch(function() {
//Håndter feil
}).then(function() {
//Alltid aktiver widget
widget.enable();
});
Interne endringer
Hver gang brukeren velger et av leveringsutsjekkingsalternativene eller oppdaterer en verdi knyttet til det valgte alternativet, vil resultCallback funksjonen i widget-konfigurasjonen bli kalt. Tilbakekallingsfunksjonen vil motta ett argument i form av et JavaScript-objekt med følgende egenskaper:
| Egenskap | Beskrivelse | Type | Verdi |
|---|---|---|---|
| valid | Indikerer om de nåværende verdiene i widgeten alle er gyldige. Bare hvis dette er true skal brukeren kunne gå videre med utsjekking. | boolean | true, false |
| deliveryCheckoutId | Leveringsutsjekkings-ID inkludert versjon. | string | |
| selectedOptionId | ID-en til det for øyeblikket valgte leveringsalternativet. | string | |
| optionIds | En liste med valgte leveringsutsjekkingsalternativ-IDer fra høyeste til laveste nivå. | string[] | |
| price | Den totale prisen for alle valgte leveringsalternativer og tillegg | number | |
| agent | Den valgte agent-IDen. | string | |
| selectedAddons | En liste med valgte tillegg. | AddonResult[] | |
| fields | En liste med verdier for ekstra input knyttet til det valgte leveringsalternativet. | FieldResult[] |