Du kan installere Delivery Checkout-widgeten for å presentere leveringsalternativene grafisk i nettbutikken din.
Installasjon
For å bruke widgeten på en side må javascript-filen som inneholder widget-koden inkluderes. Det finnes to mulige javascript-filer å inkludere. Begge er UMD-moduler, noe som betyr at de kan inkluderes enten med en enkel script-tag eller ved hjelp av et modulladesystem som RequireJS. Forskjellen mellom filene er at den ene ikke inneholder ReactJS, men i stedet forventer at globale variabler window.React og window.ReactDOM refererer til henholdsvis react- og react-dom-modulene.
Javascript-filen uten ReactJS er tilgjengelig på:
https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout.min.js
Javascript-filen med alle avhengigheter samlet er tilgjengelig på:
https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout-all.min.js
Når en av filene er inkludert på siden, kan du få tilgang til den avhengig av inkluderingsmetoden din. Hvis du bruker et modulladesystem, se standardmåten for å få tilgang til moduler i det systemet. Hvis du inkluderer modulen med en script-tag, kan modulen nås via den globale variabelen window.UnifaunCheckout.
Bruk
For å vise widgeten på en side og bli varslet når en kjøper gjør valg i widgeten, må det opprettes en instans av widgeten. En instans opprettes med funksjonen createAt som eksporteres fra modulen.
var widget = UnifaunCheckout.createAt(containerElement, config;)
Som argument til containerElement angis en elementselektor som en streng eller et DOM-element. Widget-brukergrensesnittet injiseres som et underordnet element i containerElement.
Argumentet config må være et javascript-objekt med én eller flere av følgende nøkler:
| Nøkkel | Beskrivelse | Type | Verdi |
|---|---|---|---|
| language | Språkkode for språket som skal brukes i brukergrensesnittet | string | bg, da, de, cs, en, es, et, fi, fr, it, nl, no, pl, pt, ru, sv |
| useIcons | Bruk transportørlogoikoner eller ikke | boolean | true, false |
| iconsInFront | Plasser transportørlogoikoner foran tittelen og beskrivelsen av leveringsalternativet. Ellers etter. | boolean | true, false |
| iconsBaseUrl | Basis-URL for transportørlogobilder. | string | Logoer fra nShift: https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/logos |
| installCSS | Installer standard CSS-regler for widgeten. CSS-reglene settes inn som en style-tag i starten av head-taggen. For å aktivere kartwidgeten må du bruke verdien "nshift" eller "nshift-mp". | boolean⎮string | false = Ingen design true = Design 1 nshift = Design 2 nshift-mp = Design 3 nshift-v2 = Design 4 |
| narrowDisplay | Slå på smal visningsmodus. Når den er aktiv, vil widget-layouten stable noen brukergrensesnittelementer vertikalt for å fungere bedre på skjermer med lav horisontal oppløsning. | boolean | true, false |
| narrowBreakpointWidth | Minimumsbredden til widget-elementet når smal modus aktiveres. Hvis denne verdien angis, legges det til en hendelseslytter i vinduet for å spore størrelsesendringer. | number | |
| ultraNarrowBreakpointWidth | Minimumsbredden til widget-elementet når ultrasmal modus aktiveres. | number | |
| resultCallback | Callback-funksjon som kalles hver gang en kjøper gjør et valg eller en dataregistrering i widget-brukergrensesnittet. | function | |
| enableMap | Aktiver et interaktivt kart der brukeren kan velge et hentested fra et kartgrensesnitt. Bare synlig hvis hentestedene med gyldige bredde- og lengdegradskoordinater er tilgjengelige for det valgte alternativet. For at kartet skal fungere, må du bruke CSS-verdien "nshift" eller "nshift-mp" i parameteren installCSS. Foreldet: "unifaun" og "unifaun-mp" | boolean | true, false (standard) |
Når en widget-instans er opprettet, kan den brukes til å styre widgeten. De tilgjengelige metodene på widgeten er:
| Metode | Beskrivelse |
|---|---|
| installCSS() | Kall denne metoden for å installere CSS-reglene. |
| uninstallCSS() | Kall denne metoden for å fjerne CSS-reglene fra siden. |
| changeNarrowDisplay(narrow) | Kall denne metoden med et boolsk argument for å bytte brukergrensesnittet til eller fra smal modus. |
| changeNarrowBreakpointWidth(narrowWidth, ultraNarrowWidth) | Kall denne metoden med pikselbredden til widget-elementet når widget-brukergrensesnittet skal bytte til smal modus. Et andre valgfritt argument angir pikselbredden til widget-elementet når ultrasmal modus skal aktiveres. |
| checkWidthBreakpoints() | Kall denne metoden for å la widgeten kontrollere bredden på elementet sitt og oppdatere til eller fra smal/ultrasmal modus. |
| enable() | Kall denne metoden for å aktivere widget-brukergrensesnittet og gi brukerne mulighet til å endre alternativer. |
| disable() | Kall denne metoden for å deaktivere widget-brukergrensesnittet og hindre brukerne i å gjøre endringer. |
| updateList(optionsList) | Kall denne metoden med resultatet av et kall til REST API-et /delivery-checkouts. Objektet optionsList skal inneholde dataene som skal vises av widgeten. |
| getResult | Kall denne metoden for å hente resultatobjektet som sist ble sendt til resultCallback. |
| setResult(result) | Kall denne metoden med et resultatobjekt som parameter til resultCallback. Widget-tilstanden oppdateres for å gjenspeile valgene som er gjort i resultatobjektet. |
| popupContainerElement | Brukes til å angi HTML-elementet der PUDO-velger-popupen skal plasseres. |