Du kan installere Delivery Checkout-widgetten for grafisk at præsentere leveringsmulighederne i din webshop.
Installation
For at bruge widgetten på en side skal javascript-filen med widget-koden inkluderes. Der er to mulige javascript-filer at inkludere. Begge er UMD-moduler, hvilket betyder, at de enten kan inkluderes med et simpelt script-tag eller ved hjælp af et modulindlæsningssystem som RequireJS. Forskellen mellem filerne er, at den ene ikke indeholder ReactJS, men i stedet forventer globale variabler window.React og window.ReactDOM til at referere til henholdsvis react- og react-dom-modulerne.
Javascript-filen uden ReactJS kan tilgås på:
https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout.min.js
Javascript-filen med alle afhængigheder samlet kan tilgås på:
https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout-all.min.js
Når én af filerne er inkluderet på siden, kan du tilgå den afhængigt af din inkluderingsmetode. Hvis du bruger et modulindlæsningssystem, skal du følge standardmåden for at tilgå moduler i det pågældende system. Hvis du inkluderer modulet med et script-tag, kan modulet tilgås via den globale variabel window.UnifaunCheckout.
Brug
For at vise widgetten på en side og få besked, når en køber foretager valg i widgetten, skal der oprettes en instans af widgetten. En instans oprettes med funktionen createAt, der eksporteres fra modulet.
var widget = UnifaunCheckout.createAt(containerElement, config;)
Som argument til containerElement angives en elementvælger som en streng eller et DOM-element. Widget-brugergrænsefladen injiceres som et underordnet element til containerElement.
Argumentet config skal være et javascript-objekt med én eller flere af følgende nøgler:
| Nøgle | Beskrivelse | Type | Værdi |
|---|---|---|---|
| language | Sprogkode for det sprog, der skal bruges i brugergrænsefladen | string | bg, da, de, cs, en, es, et, fi, fr, it, nl, no, pl, pt, ru, sv |
| useIcons | Brug transportørlogoikoner eller ej | boolean | true, false |
| iconsInFront | Placer transportørlogoikoner foran titlen og beskrivelsen af leveringsmuligheden. Ellers efter. | boolean | true, false |
| iconsBaseUrl | Basis-URL til brug for transportørlogobilleder. | string | Logoer fra nShift: https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/logos |
| installCSS | Installer standard CSS-regler for widgetten. CSS-reglerne indsættes som et style-tag i starten af head-tagget. For at aktivere kortwidgetten skal du bruge værdien "nshift" eller "nshift-mp". | boolean⎮string | false = Intet design true = Design 1 nshift = Design 2 nshift-mp = Design 3 nshift-v2 = Design 4 |
| narrowDisplay | Slå smal visningstilstand til. Når denne er aktiv, vil widget-layoutet stable nogle brugergrænsefladelementer lodret for at fungere bedre på skærme med lav vandret opløsning. | boolean | true, false |
| narrowBreakpointWidth | Den mindste bredde af widget-elementet, når smal tilstand aktiveres. Hvis denne værdi angives, tilføjes en hændelseslytter til vinduet for at spore størrelsesændringer. | number | |
| ultraNarrowBreakpointWidth | Den mindste bredde af widget-elementet, når ultrasmal tilstand aktiveres. | number | |
| resultCallback | Callback-funktion, der kaldes, hver gang en køber foretager et valg eller en dataindtastning i widget-brugergrænsefladen. | function | |
| enableMap | Aktiver et interaktivt kort, hvor brugeren kan vælge et afhentningssted fra en kortgrænseflade. Kun synlig, hvis afhentningssteder med gyldige bredde- og længdegradskoordinater er tilgængelige for den valgte mulighed. For at kortet fungerer, skal du bruge CSS-værdien "nshift" eller "nshift-mp" i parameteren installCSS. Forældet: "unifaun" og "unifaun-mp" | boolean | true, false (standard) |
Når en widget-instans er oprettet, kan den bruges til at styre widgetten. De tilgængelige metoder på widgetten er:
| Metode | Beskrivelse |
|---|---|
| installCSS() | Kald denne metode for at installere CSS-reglerne. |
| uninstallCSS() | Kald denne metode for at fjerne CSS-reglerne fra siden. |
| changeNarrowDisplay(narrow) | Kald denne metode med et boolesk argument for at skifte brugergrænsefladen til eller fra smal tilstand. |
| changeNarrowBreakpointWidth(narrowWidth, ultraNarrowWidth) | Kald denne metode med pixelbredden af widget-elementet, når widget-brugergrænsefladen skal skifte til smal tilstand. Et andet valgfrit argument angiver pixelbredden af widget-elementet, når ultrasmal tilstand skal aktiveres. |
| checkWidthBreakpoints() | Kald denne metode for at lade widgetten kontrollere bredden af sit element og opdatere til eller fra smal/ultrasmal tilstand. |
| enable() | Kald denne metode for at aktivere widget-brugergrænsefladen og give brugerne mulighed for at ændre indstillinger. |
| disable() | Kald denne metode for at deaktivere widget-brugergrænsefladen og forhindre brugerne i at foretage ændringer. |
| updateList(optionsList) | Kald denne metode med resultatet af et kald til REST API'et /delivery-checkouts. Objektet optionsList skal indeholde de data, der skal vises af widgetten. |
| getResult | Kald denne metode for at hente det resultatobjekt, der sidst blev sendt til resultCallback. |
| setResult(result) | Kald denne metode med et resultatobjekt som parameteren til resultCallback. Widget-tilstanden opdateres for at afspejle de valg, der er foretaget i resultatobjektet. |
| popupContainerElement | Bruges til at angive det HTML-element, hvor PUDO-vælger-popup'en skal placeres. |