Tyylittely
Oletustyylitiedosto voidaan lisätä sivulle asettamalla installCSS-ominaisuus widgetin konfiguraatiossa tai kutsumalla installCSS-metodia widget-instanssissa. Lisätyn tyylitiedoston lähde SASS-tiedostona on saatavilla osoitteessa:
https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout.scss
Käyttäjän vuorovaikutus
Widgettiin vaikuttavia käyttäjän vuorovaikutuksen tyyppejä on kaksi:
Ulkopuoliset muutokset
Kun widget luodaan ensimmäistä kertaa ja aina kun käyttäjä tekee muutoksia johonkin /delivery-checkouts API:lle lähetetyistä syötearvoista, tulisi tapahtua seuraava toimintajärjestys:
- Poista widget käytöstä kutsumalla disable metodia.
- Suorita AJAX-pyyntö /delivery-checkouts API:lle. Verkkokaupan taustajärjestelmä toimii yleensä tällaisen kutsun välittäjänä, jotta salainen API-avain voidaan lähettää REST API:lle.
- Kun vastaus saapuu, kutsu updateList-metodia ja ota widget käyttöön kutsumalla enable metodia.
// Poista widget käytöstä AJAX-pyynnön aikana.
widget.disable();
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
// Päivitä widget uusilla tiedoilla.
widget.updateList(data);
}).catch(function() {
// Käsittele virhe
}).then(function() {
// Ota widget aina käyttöön
widget.enable();
});
Sisäiset muutokset
Aina kun käyttäjä valitsee jonkin Delivery Checkout -vaihtoehdoista tai päivittää minkä tahansa valittuun vaihtoehtoon liittyvän arvon, kutsutaan widgetin konfiguraatiossa määriteltyä resultCallback funktiota. Callback-funktio saa yhden argumentin JavaScript-objektina, jolla on seuraavat ominaisuudet:
| Ominaisuus | Kuvaus | Tyyppi | Arvo |
|---|---|---|---|
| valid | Ilmaisee, ovatko widgetin nykyiset arvot kaikki kelvollisia. Vain jos tämä on true, käyttäjän tulisi voida jatkaa kassalle. | boolean | true, false |
| deliveryCheckoutId | Delivery Checkout -tunnus mukaan lukien versio. | string | |
| selectedOptionId | Nykyisen valitun toimitusvaihtoehdon tunnus. | string | |
| optionIds | Taulukko valituista Delivery Checkout -vaihtoehtojen tunnuksista korkeimmasta alimpaan tasoon. | string[] | |
| price | Kaikkien valittujen toimitusvaihtoehtojen ja lisäosien kokonaishinta | number | |
| agent | Valitun agentin tunnus. | string | |
| selectedAddons | Taulukko valituista lisäosista. | AddonResult[] | |
| fields | Taulukko lisäsyötteiden arvoista, jotka liittyvät valittuun toimitusvaihtoehtoon. | FieldResult[] |