Kirjaudu sisään

nShift Help Center

nShift Checkout -widgetin käyttäjävuorovaikutus

Avatar
Malene Tidemann
Päivitetty

nshift-checkout-label.png

 

Kaksi erilaista muutostyyppiä voivat vaikuttaa widgetiin: ulkoiset ja sisäiset. Molemmat tulee käsitellä eri tavoin verkkosivulla.

Lisätietoja:

 

Tärkeä huomautus: nShift Checkout -widgettiä ei voi käyttää Delivery Checkoutin (vanha versio) kanssa. Lue lisää vanhasta widgetistä tästä. 

 

Ulkoiset muutokset

Ulkoinen muutos tapahtuu, kun parametrit muuttuvat ja ne voivat vaikuttaa siihen, mitkä toimitusvaihtoehdot näytetään widgetissä. Yleisiä parametreja ovat vastaanottajan postinumero tai ostettavien tuotteiden kokonaishinta. Tärkeää näissä parametreissa on, että ne ovat widgetin ulkopuolisia. Kun jokin niistä muuttuu, tulee pyytää uudet toimitusvaihtoehtojen tiedot palvelimelta. Kun tiedot ovat saatavilla, tulisi kutsua widgetin metodia updateOptions näyttämään uudet toimitusvaihtoehdot. Käytä toimitusvaihtoehtojen tietojen pyytämiseen koodia Täytä widget toimitusvaihtoehdoilla -osiosta.

 

 

Sisäiset muutokset

Sisäinen muutos tapahtuu, kun käyttäjä vuorovaikuttaa widgetin kanssa. Tämä sisältää tapahtumat kuten toimitusvaihtoehdon valinnan tai tekstin kirjoittamisen syöttökenttään. Aina kun muutos tapahtuu, kutsutaan widgetSettings-asetusten resultCallback-funktiota tulosobjektin kanssa. Jos tulosobjektin valid-ominaisuus on true, tulosobjektin tietoja voidaan käyttää lähetyksen luomiseen. Jos valid on false, tiedot ovat puutteelliset ja tarvitaan lisää käyttäjän vuorovaikutusta. Tulosobjektin tietoja voidaan kuitenkin käyttää verkkosivun päivittämiseen heijastamaan käyttäjän tähänastista valintaa. Esimerkiksi päivittää kokonaishinta nykyisen valinnan perusteella widgetissä.


Huomaa, että sisäiset muutokset eivät saa laukaista pyyntöä uusista toimitusvaihtoehdoista. Käyttäjän widgetissä antamat tai valitsemat tiedot eivät muuta saatavilla olevia toimitusvaihtoehtoja.

 

Tulosobjekti

Tässä on tulosobjektin rakenne. Se on saatavilla joko resultCallback-funktion result-argumenttina tai widget-instanssin result-ominaisuutena.

 

{
   "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 - Tämä ominaisuus on true, jos tulos on kelvollinen ja sitä voidaan käyttää lähetyksen luomiseen.

     
  • sessionId - Tämä ominaisuus on UUID istunnolle, jota käytettiin toimitusvaihtoehtojen pyytämiseen. Se tarvitaan lähetyksen luomiseen.

     
  • checkoutId - Tämä ominaisuus on UUID kassakonfiguraatiolle, jota käytettiin toimitusvaihtoehtojen luomiseen.
  • checkoutVersion - Tämä ominaisuus on kassakonfiguraation versio, jota käytettiin toimitusvaihtoehtojen luomiseen. Tämä on todellinen versio kassakonfiguraatiosta, vaikka istunto olisi luotu käyttämällä vain aktiivisen kassakonfiguraation ID:tä.

     
  • optionId - Tämä ominaisuus on UUID valitulle toimitusvaihtoehdolle widgetissä. Se tarvitaan lähetyksen luomiseen.

     
  • pickupPointId - Tämä ominaisuus on kuljetusyrityksen spesifinen ID noutopisteelle, joka on valittu widgetissä. Se tarvitaan vain, jos toimitusvaihtoehto käyttää noutopisteitä. Huomaa, että ID:n muoto ja pituus ovat kuljetusyrityskohtaisia.

     
  • timeSlotId - Tämä ominaisuus on kuljetusyrityksen spesifinen ID aikavälille, joka on valittu widgetissä. Se tarvitaan vain, jos toimitusvaihtoehto käyttää aikavälejä. Huomaa, että ID:n muoto ja pituus ovat kuljetusyrityskohtaisia.

     
  • addons - Tämä ominaisuus on taulukko valituista lisäosista valitun toimitusvaihtoehdon alla. Jokainen taulukon alkio on objekti, jolla on nämä ominaisuudet:
     
    • addonId - Tämä ominaisuus on lisäosan ID.
    • price - Tämä ominaisuus on hinta, joka on lisätty kokonaishintaan, koska tämä lisäosa on valittu.
    • originalPrice - Tämä ominaisuus on alkuperäinen hinta, joka on lisätty kokonaishintaan, koska tämä lisäosa on valittu.
    • fields - Tämä ominaisuus on taulukko lisäosan alla olevista kenttätiedoista. Jokainen taulukon alkio on objekti, jolla on nämä ominaisuudet:
      • fieldId - Tämä ominaisuus on kentän ID.
      • value - Tämä ominaisuus on kentän arvo merkkijonona.
    • additionalValues - Tämä ominaisuus on objekti, jonka avaimet ja arvot määritellään kassakonfiguraation "Lisäpalautusarvot" -osiossa.
  • fields - Tämä ominaisuus on taulukko valitun toimitusvaihtoehdon alla olevista kenttätiedoista. Jokainen taulukon alkio on objekti, jolla on nämä ominaisuudet:
     
    • fieldId - Tämä ominaisuus on kentän ID.
    • value - Tämä ominaisuus on kentän arvo merkkijonona.
  • totalPrice - Tämä ominaisuus on valitun toimitusvaihtoehdon ja valittujen lisäosien kokonaishinta.

     
  • totalOriginalPrice - Tämä ominaisuus on valitun toimitusvaihtoehdon ja valittujen lisäosien alkuperäinen kokonaishinta.

     
  • taxRate - Tämä ominaisuus on kassakonfiguraatiossa asetettu verokanta.

     
  • additionalValues - Tämä ominaisuus on objekti, jonka avaimet ja arvot määritellään kassakonfiguraation "Lisäpalautusarvot" -osiossa.

     
  • resultsVersion - Tämä ominaisuus on tulosobjektin versio. Se on tällä hetkellä aina merkkijono "2".

     
  • widgetVersion - Tämä ominaisuus on widgetin versio, joka generoi tulosobjektin. Se on tällä hetkellä aina merkkijono "2".

 

Käyttäjän valinnan palauttaminen

Joissain tapauksissa voi olla tarpeen palauttaa widgetissä tehdyt valinnat ja syötteet. Esimerkiksi jos käyttäjä poistuu verkkosivulta, widgetin nykyinen tulos voidaan tallentaa johonkin pysyvään tallennustilaan. Kun käyttäjä palaa verkkosivulle, tallennettu tulos voidaan lukea ja soveltaa widgettiin.

On kaksi tapaa palauttaa tulos widgettiin: setResult-metodi tai toinen valinnainen argumentti updateOptions-metodissa. Kumpaa tahansa menetelmää käytetään, widget yrittää valita samat vaihtoehdot, lisäosat, noutopisteet tai aikavälit tulosobjektista. Jos jokin kohteista puuttuu, valitaan sen sijaan ensimmäinen järkevä kohde.

 

  // Jos widget täytetään toimitusvaihtoehdoilla
  widget.setResult(result);
  
  // tai jos uusia vaihtoehtoja sovelletaan tuloksen kanssa
  widget.updateOptions(options, result);

 

Huomaa, että updateOptions-metodille ei tarvitse antaa result-argumenttia, ellei tulosta haluta muuttaa. Widget pitää sisäisesti kirjaa nykyisestä tuloksesta ja soveltaa sitä saatavilla oleviin toimitusvaihtoehtoihin.

 

 

Widget-instanssi

Widget-instanssi, joka palautetaan kutsusta nShiftCheckoutWidget.createWidget(), sisältää nämä ominaisuudet ja metodit:

{
   enabled: true,
   result: {},
   setResult(result),
   install(),
   uninstall(),
   enable(),
   disable(),
   updateOptions(options, result)
}
  • enabled - Tämä on ominaisuus, joka sisältää widgetin käytössä / pois käytöstä -tilan.

     
  • result - Tämä on ominaisuus, joka sisältää viimeisimmän widgetin tuloksen. Katso lisätietoja Tulosobjekti -osiosta.

     
  • setResult(result) - Tämä metodi ottaa argumenttina widgetin tuloksen ja päivittää widgetin heijastamaan tuloksessa tehtyjä valintoja. Tämän pääasiallinen käyttötarkoitus on palauttaa käyttäjän valinta, jos widgetiä sisältävä verkkosivu ladataan uudelleen. Katso lisätietoja Tulosobjekti -osiosta.

     
  • install() - Tämä metodi lisää widgetin verkkosivulle. HTML-elementit luodaan kontti-elementtiin, kun tätä metodia kutsutaan. Katso lisätietoja Näytä widget -osiosta.

     
  • uninstall() - Tämä metodi poistaa widgetin verkkosivulta. Kaikki widgetin luomat HTML DOM -elementit ja tapahtumankuuntelijat poistetaan. Katso lisätietoja Näytä widget -osiosta.

     
  • enable() - Tämä metodi mahdollistaa käyttäjän vuorovaikutuksen widgetin kanssa. Katso lisätietoja Täytä widget toimitusvaihtoehdoilla -osiosta.

     
  • disable() - Tämä metodi estää käyttäjän vuorovaikutuksen widgetin kanssa. Katso lisätietoja Täytä widget toimitusvaihtoehdoilla -osiosta.

     
  • updateOptions(options, results) - Tämä metodi päivittää widgetissä näytettävät toimitusvaihtoehdot. Se voi myös päivittää käyttäjän valinnan samanaikaisesti, jos valinnainen results-argumentti annetaan. Katso lisätietoja Täytä widget toimitusvaihtoehdoilla -osiosta.

 

 

Aiheeseen liittyvät artikkelit