Tässä artikkelissa selitetään, kuinka nShift Checkout -widget lisätään verkkosivullesi, jotta voit graafisesti esittää eri toimitusvaihtoehdot verkkokaupassasi.

 

Tämän artikkelin sisältö:

• Lisää linkit widget-tiedostoihin
• Luo widget sivulle
• Näytä widget
• Täytä widget toimitusvaihtoehdoilla

Lisää linkit widget-tiedostoihin

Kaksi tiedostoa on sisällytettävä verkkosivulle widgettiä varten: JavaScript-tiedosto, joka sisältää widget-koodin, ja CSS-tiedosto, joka lisää widgetin tyylityksen.

Linkitä JavaScript-tiedostoon script-tagin avulla:

<script src="https://www.nshiftportal.com/checkout/widget/nshift-checkout-widget.js"></script>

JavaScript-tiedosto sisältää pyynnöstä lisä-JavaScript-tiedostoja, kun widget lisätään sivulle. Jos tämä aiheuttaa ongelmia, vaihtoehtona voidaan käyttää tiedostoa nshift.checkout-widget.all.js. Se sisältää kaiken widgetin koodin yhdessä tiedostossa.

Linkitä CSS-tiedostoon link-tagin avulla:

<link rel="stylesheet" href="https://www.nshiftportal.com/checkout/widget/nshift-checkout-widget.css">

Widgetin tyylityksen yksinkertaistamiseksi voi olla hyödyllistä sijoittaa linkki CSS-tiedostoon ennen muita CSS-tiedostoja, jotka sisältävät sääntöjä, jotka ohittavat widgetin tyylityksen.

Tiedostojen isännöinti paikallisesti

Vaihtoehtona linkittämiselle nShiftin palvelimilla sijaitseviin widget-tiedostoihin on isännöidä tiedostot paikallisesti. Tällöin tulisi käyttää nshift-checkout-widget-all.js -tiedostoa yhdessä tavallisen nshift-checkout-widget.css -tiedoston kanssa.

Huomaa, että suurin haittapuoli tiedostojen paikallisessa isännöinnissä on se, että nShiftin tekemät widget-päivitykset eivät tule saataville ennen kuin isännöidyt tiedostot päivitetään. Etuna on, että widget on saatavilla verkkosivulla myös, jos tiedostojen lukemisessa nShiftin palvelimilta on ongelmia. Vararatkaisuna tämä voi olla tärkeä seikka.

Luo widget sivulle

Kun widgetin JavaScript-koodi on ladattu sivulle, varsinainen widget voidaan luoda näin:

var widget = nShiftCheckoutWidget.createWidget(containerElement, widgetSettings);

Säiliöelementti
Säiliöelementti-parametri createWidget-funktioon on joko todellinen HTML DOM -elementtiobjekti, joka toimii widgetin vanhempana, tai se voi olla merkkijono, joka sisältää valitsimen HTML DOM -elementille. Valitsinmerkkijono käytetään kutsussa document.querySelector elementin löytämiseksi.

Widgetin asetukset
Widgetin asetukset-parametri createWidget-funktioon on JavaScript-objekti, jonka rakenne on seuraava:

{
  "widgetVersion": "2",
  "theme": "nshift-theme1",
  "themeOverride": {
    "showLogos": true,
    "showMap": true,
    "showPickupPointInfo": true,
    "showCategories": true,
    "showOriginalPrices": true,
    "showDeliveryTime": true,
    "selectFirstAvailableOption": true,
    "numberOfAlwaysVisibleTextLines": 1,
    "numberOfInitiallyVisibleOptions": 1
  },
  "mode": "standard",
  "widthBreakpoints": {
    "narrow": 400,
    "ultra-narrow": 300
  },
  "popupContainerElement": "document.querySelector('#root')",
  "resizeCallback": "(function(size) {
  })",
  "resultCallback": "(function(result) {
  })",
  "accessibilityChangeCallback": "(function(diff) {
  })",
  "accessibilityValidationCallback": "(function(message) {
  })"
}

• widgetVersion - Tämän ominaisuuden on tällä hetkellä aina oltava merkkijono "2", joka ilmaisee, mitä widgetin versiota odotetaan.
   
• theme - Tyyliteeman nimi on valinnainen, ja tällä hetkellä ainoa kelvollinen teema on "nshift-theme1"
   
• themeOverride - Alikohde, joka sisältää valittuun teemaan tehtävät muutokset, on valinnainen.
  • showLogos - Jos tämä ominaisuus asetetaan arvoon false, widgetissä ei näytetä kuljetusyritysten logoja.
     
  • showMap - Jos tämä ominaisuus asetetaan arvoon false, widgetissä ei näytetä karttaa noutopisteitä valittaessa.
     
  • showPickupPointInfo - Jos tämä ominaisuus asetetaan arvoon false, noutopisteiden lisätietoja ei näytetä.
     
  • showCategories - Jos tämä ominaisuus asetetaan arvoon false, widgetissä ei näytetä kategorioiden otsikoita.
     
  • showOriginalPrices - Jos tämä ominaisuus asetetaan arvoon false, widgetissä ei näytetä alkuperäisiä hintoja normaalin hinnan vieressä.
     
  • showDeliveryTime - Jos tämä ominaisuus asetetaan arvoon false, widgetin omissa toimitusaikakentissä ei näytetä toimitusaikoja.
     
  • selectFirstAvailableOption - Jos tämä ominaisuus asetetaan arvoon false, ensimmäistä vaihtoehtoa ei enää valita automaattisesti.
     
  • numberOfAlwaysVisibleTextLines - On mahdollista asettaa arvo väliltä 1-4, jolloin tekstikenttiä näytetään 1-4 ilman, että vaihtoehto on valittu.
     
  • numberOfInitiallyVisibleOptions - Kaikki tämän vaihtoehtomäärän jälkeiset vaihtoehdot ovat aluksi piilossa. Jos tätä ominaisuutta ei ole tai se on määrittelemätön, ei ole rajaa, ja kaikki vaihtoehdot näytetään aina.
     
• widthBreakpoints - Leveyspisteiden alikohde on valinnainen. Jos se annetaan, sen tulee sisältää avaimia ja leveysarvoja. Valitaan avain, jonka pienin leveysarvo on widgetin leveyttä pienempi. Valittu avain yhdistetään etuliitteellä "nshift-breakpoint-" ja lisätään CSS-luokkana ylimmän tason widget-elementtiin. Tätä voidaan käyttää tyylityksen säätämiseen widgetin leveyden mukaan verkkosivulla.
   
• mode - Tämä ominaisuus voidaan asettaa arvoon "standard" normaalille widgetille tai arvoon "product" saadaksesi vain luku -tuotesivun widgetin.
   
• accessibilityChangeCallback ja accessibilityValidationCallback - Näitä valinnaisia ominaisuuksia voidaan käyttää saavutettavuusviestien koordinointiin koko sivun live-alueella. Jos jompikumpi callback puuttuu, widget luo ja käyttää live-alue-elementtiä widgetin säiliön sisällä.
   
• popupContainerElement - Tämä ominaisuus on valinnainen HTML DOM -elementti, jota tulisi käyttää minkä tahansa widgetin luoman ponnahdusikkunan vanhempana. Jos elementtiä ei anneta, widget-koodi luo div-elementin suoraan body-elementin lapseksi.
   
• resizeCallback - Tämä valinnainen callback-funktio kutsutaan, kun widgetin koko muuttuu. size-parametri on objekti, jolla on ominaisuudet w ja h leveyttä ja korkeutta varten.
   
• resultCallback - Tämä valinnainen callback-funktio kutsutaan aina, kun käyttäjä muuttaa jotain widgetissä. Tämä sisältää toimitusvaihtoehdon valinnan, mutta myös tekstin syöttämisen kenttään, kuten puhelinnumeroon.

Näytä widget

Jotta widget näkyisi verkkosivulla, widget-instanssin install-metodia on kutsuttava. Tämä luo HTML-elementit, jotka muodostavat widgetin säiliöelementin sisälle.

  var widget = nShiftCheckoutWidget.createWidget(containerElement, widgetSettings);
  widget.install();

Jos widget on tarpeen poistaa sivulta, se voidaan tehdä kutsumalla uninstall-metodia.

widget.uninstall();

Täytä widget toimitusvaihtoehdoilla

Kun widget näytetään ensimmäisen kerran, se on tyhjä. Täyttääksesi sen toimitusvaihtoehdoilla widget on päivitettävä nShift Checkout REST API:n toimitusvaihtoehtojen päätepisteen tiedoilla. Widget-instanssin updateOptions-metodi ottaa toimitusvaihtoehtojen tiedot argumenttina ja näyttää ne widgetissä.

// Poista käyttäjän vuorovaikutus widgetin kanssa datapyynnön ajaksi.
widget.disable();
// Hae toimitusvaihtoehtojen tiedot palvelimelta.
fetch(url).then(function(response) {
   return response.json();
}).then(function(data) {
   // Päivitä widget toimitusvaihtoehtojen tiedoilla.
   widget.updateOptions(data);
}).catch(function() {
   // Käsittele virhe.
}).then(function() {
   // Ota käyttäjän vuorovaikutus widgetin kanssa aina uudelleen käyttöön.
   widget.enable();
});

Lue lisää widgetin ulkoisten ja sisäisten muutosten käsittelystä täältä.