Logga in

nShift Help Center

nShift Checkout-widget användarinteraktion

Avatar
Malene Tidemann
Uppdaterad

nshift-checkout-label.png

 

Två olika typer av förändringar kan påverka widgeten: externa och interna. Båda måste hanteras på olika sätt av webbsidan.

Lär dig om:

 

Viktig notering: nShift Checkout-widgeten kan inte användas med Delivery Checkout (gammal version). Läs mer om den gamla widgeten här. 

 

Externa förändringar

En extern förändring sker när parametrar ändras som kan påverka vilka fraktalternativ som visas i widgeten. Vanliga parametrar är mottagarens postnummer eller det totala priset för de varor som köps. Det viktiga med dessa parametrar är att de är externa för widgeten. När någon av dem ändras bör nya fraktalternativ hämtas från servern. När datan är tillgänglig ska widget-metoden updateOptions anropas för att visa de nya fraktalternativen. För att begära fraktalternativsdata, använd koden från avsnittet Fyll widgeten med fraktalternativ.

 

 

Interna förändringar

En intern förändring sker när användaren interagerar med widgeten. Detta inkluderar händelser som att välja ett fraktalternativ eller skriva text i ett inmatningsfält. När en förändring sker kommer funktionen resultCallback från widgetSettings att anropas med ett resultatobjekt. Om egenskapen valid i resultatobjektet är true kan informationen i resultatobjektet användas för att skapa en försändelse. Om valid är false är informationen ofullständig och mer användarinteraktion krävs. Informationen i resultatobjektet kan fortfarande användas för att uppdatera webbsidan för att återspegla användarens val hittills. Till exempel för att uppdatera totalpriset baserat på det nuvarande valet i widgeten.


Observera att interna förändringar inte ska trigga en förfrågan om nya fraktalternativ. Informationen som anges eller väljs av användaren i widgeten kommer inte att ändra vilka fraktalternativ som är tillgängliga.

 

Resultatobjektet

Detta är strukturen för resultatobjektet. Det är tillgängligt antingen som argumentet result i resultCallback eller från egenskapen result på widget-instansen.

 

{
   "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 - Denna egenskap är sann om resultatet är giltigt och kan användas för att skapa en försändelse.

     
  • sessionId - Denna egenskap är UUID för sessionen som användes för att begära fraktalternativen. Det krävs för att skapa en försändelse.

     
  • checkoutId - Denna egenskap är UUID för checkout-konfigurationen som användes för att generera fraktalternativen.
  • checkoutVersion - Denna egenskap är versionsnumret för checkout-konfigurationen som användes för att generera fraktalternativen. Detta kommer att vara det faktiska versionsnumret för checkout-konfigurationen även när sessionen skapades med endast den aktiva checkout-konfigurations-ID:n.

     
  • optionId - Denna egenskap är UUID för det fraktalternativ som är valt i widgeten. Det krävs för att skapa en försändelse.

     
  • pickupPointId - Denna egenskap är transportörsspecifikt ID för upphämtningsstället som valts i widgeten. Det krävs endast om fraktalternativet använder upphämtningsställen. Observera att formatet och längden på ID:t är transportörsspecifikt.

     
  • timeSlotId - Denna egenskap är transportörsspecifikt ID för tidsluckan som valts i widgeten. Det krävs endast om fraktalternativet använder tidsluckor. Observera att formatet och längden på ID:t är transportörsspecifikt.

     
  • addons - Denna egenskap är en array med tillägg som valts under det valda fraktalternativet. Varje post i arrayen är ett objekt med dessa egenskaper:
     
    • addonId - Denna egenskap är ID för tillägget.
    • price - Denna egenskap är priset som lagts till det totala priset eftersom detta tillägg är valt.
    • originalPrice - Denna egenskap är ursprungspriset som lagts till det totala ursprungspriset eftersom detta tillägg är valt.
    • fields - Denna egenskap är en array av fältinmatningar under det valda tillägget. Varje post i arrayen är ett objekt med dessa egenskaper:
      • fieldId - Denna egenskap är fält-ID.
      • value - Denna egenskap är värdet för fältet som en sträng.
    • additionalValues - Denna egenskap är ett objekt med nycklar och värden definierade av avsnittet “Ytterligare returvärden” i checkout-konfigurationen.
  • fields - Denna egenskap är en array av fältinmatningar under det valda fraktalternativet. Varje post i arrayen är ett objekt med dessa egenskaper:
     
    • fieldId - Denna egenskap är fält-ID.
    • value - Denna egenskap är värdet för fältet som en sträng.
  • totalPrice - Denna egenskap är det totala priset för det valda fraktalternativet och eventuella valda tillägg.

     
  • totalOriginalPrice - Denna egenskap är det totala ursprungspriset för det valda fraktalternativet och eventuella valda tillägg.

     
  • taxRate - Denna egenskap är momssatsen som anges i checkout-konfigurationen.

     
  • additionalValues - Denna egenskap är ett objekt med nycklar och värden definierade av avsnittet “Ytterligare returvärden” i checkout-konfigurationen.

     
  • resultsVersion - Denna egenskap är versionen av resultatobjektet. Det är för närvarande alltid strängen "2".

     
  • widgetVersion - Denna egenskap är versionen av widgeten som genererade resultatobjektet. Det är för närvarande alltid strängen "2".

 

Återställ användarval

I vissa fall kan det vara nödvändigt att återställa de val och inmatningar som användaren gjort i widgeten. Till exempel om användaren navigerar bort från webbsidan kan det aktuella resultatet från widgeten sparas i någon form av beständig lagring. När användaren sedan återvänder till webbsidan kan det sparade resultatet läsas in och appliceras på widgeten.

Det finns två sätt att återställa ett resultat till widgeten: metoden setResult eller ett andra valfritt argument till updateOptions. Oavsett vilken metod som används kommer widgeten att försöka välja samma alternativ, tillägg, upphämtningsställen eller tidsluckor i resultatobjektet. Om något av objekten saknas kommer det första rimliga objektet istället att väljas.

 

  // Om widgeten fylls med fraktalternativ
  widget.setResult(result);
  
  // eller om nya alternativ ska appliceras tillsammans med ett resultat
  widget.updateOptions(options, result);

 

Observera att det inte är nödvändigt att ange argumentet result till metoden updateOptions om inte resultatet ska ändras. Widgeten håller internt reda på det aktuella resultatet och applicerar det på de tillgängliga fraktalternativen.

 

 

Widget-instans

Widget-instansen som returneras från nShiftCheckoutWidget.createWidget() har dessa egenskaper och metoder:

{
   enabled: true,
   result: {},
   setResult(result),
   install(),
   uninstall(),
   enable(),
   disable(),
   updateOptions(options, result)
}
  • enabled - Detta är en egenskap som innehåller widgetens aktiverade / inaktiverade status.

     
  • result - Detta är en egenskap som innehåller det senaste widget-resultatet. Se avsnittet Resultatobjektet för mer information.

     
  • setResult(result) - Denna metod tar ett widget-resultat som argument och uppdaterar widgeten för att återspegla de val som gjorts i resultatet. Huvudanvändningen är att återställa användarens val om webbsidan som innehåller widgeten laddas om. Se avsnittet Resultatobjektet för mer information.

     
  • install() - Denna metod lägger till widgeten på webbsidan. HTML-element kommer att skapas i container-elementet när denna metod anropas. Se Visa widgeten för mer information.

     
  • uninstall() - Denna metod tar bort widgeten från webbsidan. Alla HTML DOM-element och händelselyssnare som skapats av widgeten tas bort. Se Visa widgeten för mer information.

     
  • enable() - Denna metod aktiverar användarinteraktion med widgeten. Se Fyll widgeten med fraktalternativ för mer information.

     
  • disable() - Denna metod inaktiverar användarinteraktion med widgeten. Se Fyll widgeten med fraktalternativ för mer information.

     
  • updateOptions(options, results) - Denna metod uppdaterar de fraktalternativ som visas i widgeten. Den kan också uppdatera användarvalet samtidigt om det valfria argumentet results anges. Se Fyll widgeten med fraktalternativ för mer information.

 

 

Relaterade artiklar