Sie können das Delivery Checkout-Widget installieren, um die Versandoptionen in Ihrem Webshop grafisch darzustellen.
Installation
Um das Widget auf einer Seite zu verwenden, muss die Javascript-Datei mit dem Widget-Code eingebunden werden. Es gibt zwei mögliche Javascript-Dateien zum Einbinden. Beide sind UMD-Module, was bedeutet, dass sie entweder mit einem einfachen script-Tag oder über ein Modul-Ladesystem wie RequireJS eingebunden werden können. Der Unterschied zwischen den Dateien besteht darin, dass eine kein ReactJS enthält und stattdessen erwartet, dass die globalen Variablen window.React und window.ReactDOM auf die react- bzw. react-dom-Module verweisen.
Die Javascript-Datei ohne ReactJS ist erreichbar unter:
https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout.min.js
Die Javascript-Datei mit allen gebündelten Abhängigkeiten ist erreichbar unter:
https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout-all.min.js
Sobald eine der Dateien auf der Seite eingebunden wurde, können Sie je nach Einbindungsmethode darauf zugreifen. Wenn Sie ein Modul-Ladesystem verwenden, beachten Sie bitte die Standardmethode für den Zugriff auf Module in diesem System. Wenn Sie das Modul mit einem script-Tag einbinden, kann auf das Modul über die globale Variable window.UnifaunCheckout zugegriffen werden.
Verwendung
Um das Widget auf einer Seite anzuzeigen und benachrichtigt zu werden, wenn ein Käufer Auswahlen im Widget trifft, muss eine Instanz des Widgets erstellt werden. Eine Instanz wird mit der Funktion createAt erstellt, die aus dem Modul exportiert wird.
var widget = UnifaunCheckout.createAt(containerElement, config;)
Als Argument für containerElement wird ein Elementselektor als Zeichenkette oder ein DOM-Element übergeben. Die Widget-Benutzeroberfläche wird als untergeordnetes Element in das containerElement eingefügt.
Das Argument config muss ein Javascript-Objekt mit einem oder mehreren der folgenden Schlüssel sein:
| Schlüssel | Beschreibung | Typ | Wert |
|---|---|---|---|
| language | Sprachcode für die in der Benutzeroberfläche zu verwendende Sprache | string | bg, da, de, cs, en, es, et, fi, fr, it, nl, no, pl, pt, ru, sv |
| useIcons | Frachtführer-Logo-Icons verwenden oder nicht | boolean | true, false |
| iconsInFront | Frachtführer-Logo-Icons vor dem Titel und der Beschreibung der Versandoption platzieren. Andernfalls danach. | boolean | true, false |
| iconsBaseUrl | Basis-URL für Frachtführer-Logo-Bilder. | string | Logos von nShift: https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/logos |
| installCSS | Standard-CSS-Regeln für das Widget installieren. Die CSS-Regeln werden als style-Tag am Anfang des head-Tags eingefügt. Um das Karten-Widget zu aktivieren, müssen Sie den Wert "nshift" oder "nshift-mp" verwenden. | boolean⎮string | false = Kein Design true = Design 1 nshift = Design 2 nshift-mp = Design 3 nshift-v2 = Design 4 |
| narrowDisplay | Schmalen Anzeigemodus aktivieren. Wenn aktiviert, stapelt das Widget-Layout einige Benutzeroberflächenelemente vertikal, um auf Bildschirmen mit geringer horizontaler Auflösung besser zu funktionieren. | boolean | true, false |
| narrowBreakpointWidth | Die Mindestbreite des Widget-Elements, bei der der schmale Modus aktiviert wird. Wenn dieser Wert angegeben wird, wird dem Fenster ein Ereignis-Listener hinzugefügt, um Größenänderungen zu verfolgen. | number | |
| ultraNarrowBreakpointWidth | Die Mindestbreite des Widget-Elements, bei der der ultraschmale Modus aktiviert wird. | number | |
| resultCallback | Callback-Funktion, die aufgerufen wird, sobald ein Käufer eine Auswahl trifft oder Daten in der Widget-Benutzeroberfläche eingibt. | function | |
| enableMap | Aktiviert eine interaktive Karte, über die der Benutzer einen Abholpunkt über eine Kartenoberfläche auswählen kann. Nur sichtbar, wenn für die ausgewählte Option Abholpunkte mit gültigen Breiten- und Längengrad-Koordinaten verfügbar sind. Damit die Karte funktioniert, müssen Sie den CSS-Wert "nshift" oder "nshift-mp" im Parameter installCSS verwenden. Veraltet: „unifaun" und „unifaun-mp" | boolean | true, false (Standard) |
Sobald eine Widget-Instanz erstellt wurde, kann sie zur Steuerung des Widgets verwendet werden. Die verfügbaren Methoden des Widgets sind:
| Methode | Beschreibung |
|---|---|
| installCSS() | Rufen Sie diese Methode auf, um die CSS-Regeln zu installieren. |
| uninstallCSS() | Rufen Sie diese Methode auf, um die CSS-Regeln von der Seite zu entfernen. |
| changeNarrowDisplay(narrow) | Rufen Sie diese Methode mit einem booleschen Argument auf, um die Benutzeroberfläche in den oder aus dem schmalen Modus zu wechseln. |
| changeNarrowBreakpointWidth(narrowWidth, ultraNarrowWidth) | Rufen Sie diese Methode mit der Pixelbreite des Widget-Elements auf, bei der die Widget-Benutzeroberfläche in den schmalen Modus wechseln soll. Ein zweites optionales Argument legt die Pixelbreite des Widget-Elements fest, bei der der ultraschmale Modus aktiviert werden soll. |
| checkWidthBreakpoints() | Rufen Sie diese Methode auf, damit das Widget die Breite seines Elements überprüft und den schmalen/ultraschmalen Modus entsprechend aktiviert oder deaktiviert. |
| enable() | Rufen Sie diese Methode auf, um die Widget-Benutzeroberfläche zu aktivieren und Benutzern zu erlauben, Optionen zu ändern. |
| disable() | Rufen Sie diese Methode auf, um die Widget-Benutzeroberfläche zu deaktivieren und Benutzer daran zu hindern, Änderungen vorzunehmen. |
| updateList(optionsList) | Rufen Sie diese Methode mit dem Ergebnis eines Aufrufs der REST-API /delivery-checkouts auf. Das Objekt optionsList sollte die vom Widget anzuzeigenden Daten enthalten. |
| getResult | Rufen Sie diese Methode auf, um das Ergebnisobjekt abzurufen, das zuletzt an den resultCallback gesendet wurde. |
| setResult(result) | Rufen Sie diese Methode mit einem Ergebnisobjekt als Parameter für den resultCallback auf. Der Widget-Status wird aktualisiert, um die im Ergebnisobjekt vorgenommenen Auswahlen widerzuspiegeln. |
| popupContainerElement | Wird verwendet, um das HTML-Element anzugeben, in dem das PUDO-Selektor-Popup platziert werden soll. |