Voit asentaa Delivery Checkout -widgetin esittääksesi toimitustapoja graafisesti verkkokaupassasi.
Asennus
Widgetin käyttämiseksi sivulla tulee sisällyttää widget-koodin sisältävä javascript-tiedosto. Sisällytettäviä javascript-tiedostoja on kaksi. Molemmat ovat UMD-moduuleja, mikä tarkoittaa, että ne voidaan sisällyttää joko yksinkertaisella script-tagilla tai moduulien latausjärjestelmällä, kuten RequireJS. Tiedostojen ero on siinä, että toinen ei sisällä ReactJS:ää vaan odottaa sen sijaan globaalien muuttujien window.React ja window.ReactDOM viittaavan vastaavasti react- ja react-dom-moduuleihin.
Javascript-tiedosto ilman ReactJS:ää on saatavilla osoitteessa:
https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout.min.js
Javascript-tiedosto kaikki riippuvuudet sisältävänä pakettina on saatavilla osoitteessa:
https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout-all.min.js
Kun toinen tiedostoista on sisällytetty sivulle, voit käyttää sitä sisällyttämistapasi mukaan. Jos käytät moduulien latausjärjestelmää, noudata kyseisen järjestelmän standarditapaa moduulien käyttämiseksi. Jos sisällytät moduulin script-tagilla, moduuliin pääsee käsiksi globaalin muuttujan window.UnifaunCheckout kautta.
Käyttö
Widgetin näyttämiseksi sivulla ja ilmoitusten saamiseksi, kun ostaja tekee valintoja widgetissä, tulee luoda widget-instanssi. Instanssi luodaan moduulista viedyllä funktiolla createAt.
var widget = UnifaunCheckout.createAt(containerElement, config;)
Anna argumentiksi containerElement elementin valitsin merkkijonona tai DOM-elementtinä. Widget-käyttöliittymä lisätään alirakenteeeksi containerElement-elementtiin.
Argumentin config tulee olla javascript-objekti, jossa on yksi tai useampi seuraavista avaimista:
| Avain | Kuvaus | Tyyppi | Arvo |
|---|---|---|---|
| language | Kielikoodi käyttöliittymässä käytettävälle kielelle | string | bg, da, de, cs, en, es, et, fi, fr, it, nl, no, pl, pt, ru, sv |
| useIcons | Käytetäänkö kuljetusliikkeen logokuvakkeita vai ei | boolean | true, false |
| iconsInFront | Sijoita kuljetusliikkeen logokuvakkeet toimitustavan otsikon ja kuvauksen eteen. Muussa tapauksessa niiden jälkeen. | boolean | true, false |
| iconsBaseUrl | Perus-URL kuljetusliikkeen logokuville. | string | nShiftin logot: https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/logos |
| installCSS | Asenna widgetin vakio-CSS-säännöt. CSS-säännöt lisätään style-tagina head-tagin alkuun. Karttawidgetin käyttöönottoa varten sinun tulee käyttää arvoa "nshift" tai "nshift-mp". | boolean⎮string | false = Ei ulkoasua true = Ulkoasu 1 nshift = Ulkoasu 2 nshift-mp = Ulkoasu 3 nshift-v2 = Ulkoasu 4 |
| narrowDisplay | Ota kapea näyttötila käyttöön. Kun se on käytössä, widget-asettelu pinoo joitakin käyttöliittymäelementtejä pystysuuntaisesti toimiakseen paremmin näytöillä, joiden vaakasuuntainen resoluutio on matala. | boolean | true, false |
| narrowBreakpointWidth | Widget-elementin vähimmäisleveys, jolla kapea tila aktivoituu. Jos tämä arvo annetaan, ikkunaan lisätään tapahtumankuuntelija koon muutosten seuraamiseksi. | number | |
| ultraNarrowBreakpointWidth | Widget-elementin vähimmäisleveys, jolla erittäin kapea tila aktivoituu. | number | |
| resultCallback | Takaisinkutsufunktio, jota kutsutaan aina, kun ostaja tekee valinnan tai syöttää tietoja widget-käyttöliittymässä. | function | |
| enableMap | Ota käyttöön interaktiivinen kartta, josta käyttäjä voi valita noutopisteen karttaliiittymän kautta. Näkyy vain, jos valitulle vaihtoehdolle on saatavilla noutopisteitä, joilla on kelvolliset leveysaste- ja pituusastekoordinaatit. Kartan toimintaa varten sinun tulee käyttää CSS-arvoa "nshift" tai "nshift-mp" parametrissa installCSS. Vanhentunut: "unifaun" ja "unifaun-mp" | boolean | true, false (oletus) |
Kun widget-instanssi on luotu, sitä voidaan käyttää widgetin hallintaan. Widgetissä käytettävissä olevat metodit ovat:
| Metodi | Kuvaus |
|---|---|
| installCSS() | Kutsu tätä metodia CSS-sääntöjen asentamiseksi. |
| uninstallCSS() | Kutsu tätä metodia CSS-sääntöjen poistamiseksi sivulta. |
| changeNarrowDisplay(narrow) | Kutsu tätä metodia booleaanis-argumentilla vaihtaaksesi käyttöliittymän kapeaan tilaan tai siitä pois. |
| changeNarrowBreakpointWidth(narrowWidth, ultraNarrowWidth) | Kutsu tätä metodia widget-elementin pikselileveyden kanssa, jolloin widget-käyttöliittymän tulisi vaihtaa kapeaan tilaan. Toinen valinnainen argumentti asettaa widget-elementin pikselileveyden, jolloin erittäin kapea tila aktivoituu. |
| checkWidthBreakpoints() | Kutsu tätä metodia antaaksesi widgetin tarkistaa elementtinsä leveyden ja päivittää kapea/erittäin kapea tila päälle tai pois. |
| enable() | Kutsu tätä metodia ottaaksesi widget-käyttöliittymän käyttöön ja salliaksesi käyttäjien muuttaa asetuksia. |
| disable() | Kutsu tätä metodia poistaaksesi widget-käyttöliittymän käytöstä ja estääksesi käyttäjiä tekemästä muutoksia. |
| updateList(optionsList) | Kutsu tätä metodia REST API:n /delivery-checkouts kutsun tuloksella. Objektin optionsList tulee sisältää widgetin näyttämät tiedot. |
| getResult | Kutsu tätä metodia hakeaksesi viimeksi resultCallback-funktioon lähetetyn tulosobjektin. |
| setResult(result) | Kutsu tätä metodia tulosobjektilla, joka toimii parametrina resultCallback-funktiolle. Widgetin tila päivittyy heijastamaan tulosobjektissa tehtyjä valintoja. |
| popupContainerElement | Käytetään määrittämään HTML-elementti, johon PUDO-valitsimen ponnahdusikkuna sijoitetaan. |