Du kan installera Delivery Checkout-widgeten för att grafiskt presentera leveransalternativen i din webbutik.
Installation
För att använda widgeten på en sida måste javascript-filen som innehåller widget-koden inkluderas. Det finns två möjliga javascript-filer att inkludera. Båda är UMD-moduler, vilket innebär att de antingen kan inkluderas med en enkel script-tagg eller med hjälp av ett modulinläsningssystem som RequireJS. Skillnaden mellan filerna är att den ena inte innehåller ReactJS utan i stället förväntar sig att de globala variablerna window.React och window.ReactDOM refererar till respektive react- och react-dom-modulerna.
Javascript-filen utan ReactJS finns tillgänglig på:
https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout.min.js
Javascript-filen med alla beroenden samlade finns tillgänglig på:
https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout-all.min.js
När en av filerna har inkluderats på sidan kan du komma åt den beroende på din inkluderingsmetod. Om du använder ett modulinläsningssystem, se standardmetoden för att komma åt moduler i det systemet. Om du inkluderar modulen med en script-tagg kan modulen nås via den globala variabeln window.UnifaunCheckout.
Användning
För att visa widgeten på en sida och få ett meddelande när en köpare gör val i widgeten måste en instans av widgeten skapas. En instans skapas med funktionen createAt som exporteras från modulen.
var widget = UnifaunCheckout.createAt(containerElement, config;)
Som argument till containerElement anges en elementselektor som en sträng eller ett DOM-element. Widget-användargränssnittet injiceras som ett underordnat element i containerElement.
Argumentet config måste vara ett javascript-objekt med en eller flera av följande nycklar:
| Nyckel | Beskrivning | Typ | Värde |
|---|---|---|---|
| language | Språkkod för det språk som ska användas i användargränssnittet | string | bg, da, de, cs, en, es, et, fi, fr, it, nl, no, pl, pt, ru, sv |
| useIcons | Använd transportörlogotypikoner eller inte | boolean | true, false |
| iconsInFront | Placera transportörlogotypikoner framför titeln och beskrivningen av leveransalternativet. Annars efter. | boolean | true, false |
| iconsBaseUrl | Bas-URL för transportörlogotypbilder. | string | Logotyper från nShift: https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/logos |
| installCSS | Installera standard-CSS-regler för widgeten. CSS-reglerna infogas som en style-tagg i början av head-taggen. För att aktivera kartwidgeten måste du använda värdet "nshift" eller "nshift-mp". | boolean⎮string | false = Ingen design true = Design 1 nshift = Design 2 nshift-mp = Design 3 nshift-v2 = Design 4 |
| narrowDisplay | Aktivera smalt visningsläge. När det är aktiverat staplar widget-layouten vissa användargränssnittselement vertikalt för att fungera bättre på skärmar med låg horisontell upplösning. | boolean | true, false |
| narrowBreakpointWidth | Minsta bredd på widget-elementet när smalt läge aktiveras. Om det här värdet anges läggs en händelseavlyssnare till i fönstret för att spåra storleksändringar. | number | |
| ultraNarrowBreakpointWidth | Minsta bredd på widget-elementet när ultrasmalt läge aktiveras. | number | |
| resultCallback | Callback-funktion som anropas varje gång en köpare gör ett val eller en datainmatning i widget-användargränssnittet. | function | |
| enableMap | Aktivera en interaktiv karta där användaren kan välja ett upphämtningsställe via ett kartgränssnitt. Visas bara om upphämtningsställen med giltiga koordinater för latitud och longitud är tillgängliga för det valda alternativet. För att kartan ska fungera måste du använda CSS-värdet "nshift" eller "nshift-mp" i parametern installCSS. Föråldrad: "unifaun" och "unifaun-mp" | boolean | true, false (standard) |
När en widget-instans har skapats kan den användas för att styra widgeten. Tillgängliga metoder på widgeten är:
| Metod | Beskrivning |
|---|---|
| installCSS() | Anropa den här metoden för att installera CSS-reglerna. |
| uninstallCSS() | Anropa den här metoden för att ta bort CSS-reglerna från sidan. |
| changeNarrowDisplay(narrow) | Anropa den här metoden med ett booleskt argument för att växla användargränssnittet till eller från smalt läge. |
| changeNarrowBreakpointWidth(narrowWidth, ultraNarrowWidth) | Anropa den här metoden med pixelbredden på widget-elementet när widget-användargränssnittet ska växla till smalt läge. Ett andra valfritt argument anger pixelbredden på widget-elementet när ultrasmalt läge ska aktiveras. |
| checkWidthBreakpoints() | Anropa den här metoden för att låta widgeten kontrollera bredden på sitt element och uppdatera till eller från smalt/ultrasmalt läge. |
| enable() | Anropa den här metoden för att aktivera widget-användargränssnittet och tillåta användare att ändra alternativ. |
| disable() | Anropa den här metoden för att inaktivera widget-användargränssnittet och förhindra användare från att göra ändringar. |
| updateList(optionsList) | Anropa den här metoden med resultatet av ett anrop till REST API:et /delivery-checkouts. Objektet optionsList ska innehålla de data som ska visas av widgeten. |
| getResult | Anropa den här metoden för att hämta det resultatobjekt som senast skickades till resultCallback. |
| setResult(result) | Anropa den här metoden med ett resultatobjekt som parameter till resultCallback. Widget-tillståndet uppdateras för att återspegla de val som gjorts i resultatobjektet. |
| popupContainerElement | Används för att ange det HTML-element där PUDO-väljarens popup ska placeras. |