Aanmelden

nShift Help Center

nShift Checkout widget gebruikersinteractie

Avatar
Malene Tidemann
Bijgewerkt

nshift-checkout-label.png

 

Twee verschillende soorten wijzigingen kunnen de widget beïnvloeden: extern en intern. Beide moeten anders worden afgehandeld door de webpagina.

Leer over:

 

Belangrijke opmerking: De nShift Checkout widget kan niet worden gebruikt met Delivery Checkout (legacy versie). Lees meer over de legacy widget hier. 

 

Externe wijzigingen

Een externe wijziging vindt plaats wanneer parameters veranderen die kunnen beïnvloeden welke verzendopties in de widget worden getoond. Veelvoorkomende parameters zijn de postcode van de ontvanger of de totale prijs van de te kopen artikelen. Het belangrijkste bij deze parameters is dat ze extern zijn aan de widget. Wanneer een van deze verandert, moeten nieuwe verzendopties worden opgevraagd van de server. Zodra de gegevens beschikbaar zijn, moet de widgetmethode updateOptions worden aangeroepen om de nieuwe verzendopties te tonen. Gebruik de code uit de sectie Vul de widget met verzendopties om verzendopties op te vragen.

 

 

Interne wijzigingen

Een interne wijziging vindt plaats wanneer de gebruiker interactie heeft met de widget. Dit omvat gebeurtenissen zoals het selecteren van een verzendoptie of het typen in een invoerveld. Wanneer een wijziging plaatsvindt, wordt de functie resultCallback van de widgetSettings aangeroepen met een resultaatobject. Als de eigenschap valid in het resultaatobject true is, kan de informatie in het resultaatobject worden gebruikt om een zending aan te maken. Als valid false is, is de informatie onvolledig en is meer gebruikersinteractie nodig. De informatie in het resultaatobject kan nog steeds worden gebruikt om de webpagina bij te werken om de selectie van de gebruiker tot nu toe weer te geven. Bijvoorbeeld om de totale prijs bij te werken op basis van de huidige selectie in de widget.


Let op dat interne wijzigingen geen verzoek voor nieuwe verzendopties mogen triggeren. De informatie die door de gebruiker in de widget wordt ingevoerd of geselecteerd, verandert niet welke verzendopties beschikbaar zijn.

 

Het resultaatobject

Dit is de structuur van het resultaatobject. Het is beschikbaar als het result-argument in de resultCallback of via de result-eigenschap op de widgetinstantie.

 

{
   "valid":true,
   "sessionId":"00000000-0000-0000-0000-000000000000",
   "checkoutId":"00000000-0000-0000-0000-000000000000",
   "checkoutVersion":1,
   "optionId":"00000000-0000-0000-0000-000000000000",
   "pickupPointId":"12345",
   "timeSlotId":"2345",
   "addons":[
      {
         "addonId":"NOTIFY",
         "price":1.0,
         "originalPrice":0.0,
         "fields":[
            {
               "fieldId":"EMAIL",
               "value":"info@example.com"
            }
         ],
         "additionalValues":{
            "key1":"value1"
         }
      }
   ],
   "fields":[
      {
         "fieldId":"PHONE",
         "value":"1234567890"
      }
   ],
   "totalPrice":1.0,
   "totalOriginalPrice":0.0,
   "taxRate":0.0,
   "additionalValues":{
      "key2":"value2"
   },
   "resultsVersion":"2",
   "widgetVersion":"2"
}

 

  • valid - Deze eigenschap is waar als het resultaat geldig is en kan worden gebruikt om een zending aan te maken.

     
  • sessionId - Deze eigenschap is de UUID van de sessie die is gebruikt om de verzendopties op te vragen. Het is vereist om een zending aan te maken.

     
  • checkoutId - Deze eigenschap is de UUID van de checkoutconfiguratie die is gebruikt om de verzendopties te genereren.
  • checkoutVersion - Deze eigenschap is het versienummer van de checkoutconfiguratie die is gebruikt om de verzendopties te genereren. Dit zal het daadwerkelijke versienummer van de checkoutconfiguratie zijn, zelfs wanneer de sessie alleen is aangemaakt met de actieve checkoutconfiguratie-ID.

     
  • optionId - Deze eigenschap is de UUID van de verzendoptie die is geselecteerd in de widget. Het is vereist om een zending aan te maken.

     
  • pickupPointId - Deze eigenschap is de vervoerderspecifieke ID van het afhaalpunt dat in de widget is geselecteerd. Het is alleen vereist als de verzendoptie gebruikmaakt van afhaalpunten. Let op dat het formaat en de lengte van de ID vervoerderspecifiek zijn.

     
  • timeSlotId - Deze eigenschap is de vervoerderspecifieke ID van het tijdslot dat in de widget is geselecteerd. Het is alleen vereist als de verzendoptie gebruikmaakt van tijdslots. Let op dat het formaat en de lengte van de ID vervoerderspecifiek zijn.

     
  • addons - Deze eigenschap is een array met addons die geselecteerd zijn onder de geselecteerde verzendoptie. Elke invoer in de array is een object met deze eigenschappen:
     
    • addonId - Deze eigenschap is de ID van de addon.
    • price - Deze eigenschap is de prijs die is toegevoegd aan de totale prijs omdat deze addon is geselecteerd.
    • originalPrice - Deze eigenschap is de oorspronkelijke prijs die is toegevoegd aan de totale oorspronkelijke prijs omdat deze addon is geselecteerd.
    • fields - Deze eigenschap is een array van veldinvoeren onder de geselecteerde addon. Elke invoer in de array is een object met deze eigenschappen:
      • fieldId - Deze eigenschap is de veld-ID.
      • value - Deze eigenschap is de waarde van het veld als string.
    • additionalValues - Deze eigenschap is een object met sleutels en waarden gedefinieerd door de sectie “Additional return values” van de checkoutconfiguratie.
  • fields - Deze eigenschap is een array van veldinvoeren onder de geselecteerde verzendoptie. Elke invoer in de array is een object met deze eigenschappen:
     
    • fieldId - Deze eigenschap is de veld-ID.
    • value - Deze eigenschap is de waarde van het veld als string.
  • totalPrice - Deze eigenschap is de totale prijs van de geselecteerde verzendoptie en eventuele geselecteerde addons.

     
  • totalOriginalPrice - Deze eigenschap is de totale oorspronkelijke prijs van de geselecteerde verzendoptie en eventuele geselecteerde addons.

     
  • taxRate - Deze eigenschap is het belastingtarief dat is ingesteld in de checkoutconfiguratie.

     
  • additionalValues - Deze eigenschap is een object met sleutels en waarden gedefinieerd door de sectie “Additional return values” van de checkoutconfiguratie.

     
  • resultsVersion - Deze eigenschap is de versie van het resultaatobject. Dit is momenteel altijd de string "2".

     
  • widgetVersion - Deze eigenschap is de versie van de widget die het resultaatobject heeft gegenereerd. Dit is momenteel altijd de string "2".

 

Gebruikersselectie herstellen

In sommige gevallen kan het nodig zijn om de selecties en invoer die de gebruiker in de widget heeft gedaan te herstellen. Bijvoorbeeld als de gebruiker de webpagina verlaat, kan het huidige resultaat van de widget worden opgeslagen in een persistent opslagmedium. Wanneer de gebruiker terugkeert naar de webpagina kan het opgeslagen resultaat worden uitgelezen en op de widget worden toegepast.

Er zijn twee manieren om een resultaat te herstellen in de widget: de setResult-methode of een tweede optioneel argument voor updateOptions. Ongeacht welke methode wordt gebruikt, zal de widget proberen dezelfde opties, addons, afhaalpunten of tijdslots te selecteren in het resultaatobject. Als een van de items ontbreekt, wordt in plaats daarvan het eerste redelijke item geselecteerd.

 

  // Als de widget is gevuld met verzendopties
  widget.setResult(result);
  
  // of als nieuwe opties moeten worden toegepast samen met een resultaat
  widget.updateOptions(options, result);

 

Let op dat het niet nodig is om het resultaatargument te geven aan de updateOptions-methode tenzij het resultaat moet veranderen. De widget houdt intern het huidige resultaat bij en past dit toe op de beschikbare verzendopties.

 

 

Widget instantie

De widget instantie die wordt teruggegeven door nShiftCheckoutWidget.createWidget() heeft deze eigenschappen en methoden:

{
   enabled: true,
   result: {},
   setResult(result),
   install(),
   uninstall(),
   enable(),
   disable(),
   updateOptions(options, result)
}
  • enabled - Dit is een eigenschap die de ingeschakeld / uitgeschakeld status van de widget bevat.

     
  • result - Dit is een eigenschap die het laatste widgetresultaat bevat. Zie de sectie Het resultaatobject voor meer informatie.

     
  • setResult(result) - Deze methode neemt een widgetresultaat als argument en werkt de widget bij om de gemaakte selecties in het resultaat weer te geven. Het hoofddoel hiervan is om de selectie van de gebruiker te herstellen als de webpagina met de widget wordt herladen. Zie de sectie Het resultaatobject voor meer informatie.

     
  • install() - Deze methode voegt de widget toe aan de webpagina. HTML-elementen worden aangemaakt in het containerelement wanneer deze methode wordt aangeroepen. Zie Toon de widget voor meer informatie.

     
  • uninstall() - Deze methode verwijdert de widget van de webpagina. Alle HTML DOM-elementen en event listeners die door de widget zijn aangemaakt worden verwijderd. Zie Toon de widget voor meer informatie.

     
  • enable() - Deze methode maakt gebruikersinteractie met de widget mogelijk. Zie Vul de widget met verzendopties voor meer informatie.

     
  • disable() - Deze methode schakelt gebruikersinteractie met de widget uit. Zie Vul de widget met verzendopties voor meer informatie.

     
  • updateOptions(options, results) - Deze methode werkt de verzendopties bij die in de widget worden getoond. Het kan ook de gebruikersselectie tegelijk bijwerken als het optionele results-argument wordt meegegeven. Zie Vul de widget met verzendopties voor meer informatie.

 

 

Verwante artikelen