U kunt de Delivery Checkout-widget installeren om de leveringsopties in uw webshop grafisch te presenteren.
Installatie
Om de widget op een pagina te gebruiken, moet het javascript-bestand met de widget-code worden opgenomen. Er zijn twee mogelijke javascript-bestanden om op te nemen. Beide zijn UMD-modules, wat betekent dat ze kunnen worden opgenomen met een eenvoudig script-tag of via een modulelaadsysteem zoals RequireJS. Het verschil tussen de bestanden is dat het ene geen ReactJS bevat en in plaats daarvan globale variabelen window.React en window.ReactDOM verwacht om respectievelijk naar de react- en react-dom-modules te verwijzen.
Het javascript-bestand zonder ReactJS is toegankelijk via:
https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout.min.js
Het javascript-bestand met alle afhankelijkheden gebundeld is toegankelijk via:
https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout-all.min.js
Zodra een van de bestanden op de pagina is opgenomen, kunt u er toegang toe krijgen afhankelijk van uw methode van opname. Als u een modulelaadsysteem gebruikt, raadpleegt u de standaardmanier om modules in dat systeem te benaderen. Als u de module opneemt met een script-tag, is de module toegankelijk via de globale variabele window.UnifaunCheckout.
Gebruik
Om de widget op een pagina weer te geven en een melding te ontvangen wanneer een koper keuzes maakt in de widget, moet een instantie van de widget worden aangemaakt. Een instantie wordt aangemaakt met de functie createAt die uit de module wordt geëxporteerd.
var widget = UnifaunCheckout.createAt(containerElement, config;)
Geef als argument voor containerElement een elementselector als string of een DOM-element op. De widget-gebruikersinterface wordt als onderliggend element in het containerElement geïnjecteerd.
Het argument config moet een javascript-object zijn met een of meer van de volgende sleutels:
| Sleutel | Beschrijving | Type | Waarde |
|---|---|---|---|
| language | Taalcode voor de taal die in de gebruikersinterface moet worden gebruikt | string | bg, da, de, cs, en, es, et, fi, fr, it, nl, no, pl, pt, ru, sv |
| useIcons | Vervoerderlogo-iconen gebruiken of niet | boolean | true, false |
| iconsInFront | Vervoerderlogo-iconen vóór de titel en beschrijving van de leveringsoptie plaatsen. Anders erna. | boolean | true, false |
| iconsBaseUrl | Basis-URL voor vervoerderlogo-afbeeldingen. | string | Logo's van nShift: https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/logos |
| installCSS | Installeer standaard CSS-regels voor de widget. De CSS-regels worden ingevoegd als een style-tag aan het begin van de head-tag. Om de kaartwidget in te schakelen moet u de waarde "nshift" of "nshift-mp" gebruiken. | boolean⎮string | false = Geen ontwerp true = Ontwerp 1 nshift = Ontwerp 2 nshift-mp = Ontwerp 3 nshift-v2 = Ontwerp 4 |
| narrowDisplay | Smalle weergavemodus inschakelen. Wanneer ingeschakeld, stapelt de widget-indeling sommige gebruikersinterface-elementen verticaal om beter te werken op schermen met een lage horizontale resolutie. | boolean | true, false |
| narrowBreakpointWidth | De minimale breedte van het widget-element waarbij de smalle modus wordt geactiveerd. Als deze waarde wordt opgegeven, wordt een gebeurtenisluisteraar aan het venster toegevoegd om groottewijzigingen bij te houden. | number | |
| ultraNarrowBreakpointWidth | De minimale breedte van het widget-element waarbij de ultrasmalle modus wordt geactiveerd. | number | |
| resultCallback | Callback-functie die wordt aangeroepen telkens wanneer een koper een selectie maakt of gegevens invoert in de widget-gebruikersinterface. | function | |
| enableMap | Schakel een interactieve kaart in waar de gebruiker een afhaalpunt kan selecteren via een kaartinterface. Alleen zichtbaar als afhaalpunten met geldige breedte- en lengtegraadcoördinaten beschikbaar zijn voor de geselecteerde optie. Voor het functioneren van de kaart moet u de CSS-waarde "nshift" of "nshift-mp" gebruiken in de parameter installCSS. Verouderd: "unifaun" en "unifaun-mp" | boolean | true, false (standaard) |
Zodra een widget-instantie is aangemaakt, kan deze worden gebruikt om de widget te beheren. De beschikbare methoden op de widget zijn:
| Methode | Beschrijving |
|---|---|
| installCSS() | Roep deze methode aan om de CSS-regels te installeren. |
| uninstallCSS() | Roep deze methode aan om de CSS-regels van de pagina te verwijderen. |
| changeNarrowDisplay(narrow) | Roep deze methode aan met een booleaans argument om de gebruikersinterface naar of van de smalle modus te schakelen. |
| changeNarrowBreakpointWidth(narrowWidth, ultraNarrowWidth) | Roep deze methode aan met de pixelbreedte van het widget-element waarop de widget-gebruikersinterface naar de smalle modus moet overschakelen. Een tweede optioneel argument stelt de pixelbreedte van het widget-element in waarop de ultrasmalle modus moet worden geactiveerd. |
| checkWidthBreakpoints() | Roep deze methode aan om de widget de breedte van zijn element te laten controleren en bij te werken naar of van de smalle/ultrasmalle modus. |
| enable() | Roep deze methode aan om de widget-gebruikersinterface in te schakelen en gebruikers toe te staan opties te wijzigen. |
| disable() | Roep deze methode aan om de widget-gebruikersinterface uit te schakelen en te voorkomen dat gebruikers wijzigingen aanbrengen. |
| updateList(optionsList) | Roep deze methode aan met het resultaat van een aanroep naar de REST API /delivery-checkouts. Het object optionsList moet de gegevens bevatten die door de widget worden weergegeven. |
| getResult | Roep deze methode aan om het resultaatobject op te halen dat het laatst naar de resultCallback is verzonden. |
| setResult(result) | Roep deze methode aan met een resultaatobject als parameter voor de resultCallback. De widgetstatus wordt bijgewerkt om de selecties in het resultaatobject weer te geven. |
| popupContainerElement | Wordt gebruikt om het HTML-element op te geven waar de PUDO-selector-popup moet worden geplaatst. |