Tässä dokumentissa kuvataan tapa, jolla Johku-kaupan tuoteryhmiä ja tuotteita voi helposti näyttää osana verkkosivustoja. Julkaisujärjestelmien tapauksessa tämä yleensä tarkoittaa jonkinlaisen pluginin rakentamista.  

Toimintatapa

Verkkosivustolta valitaan sivu tai osio, jossa Johku-tuotteita näytetään. Tuotteita voidaan tuoda vapaasti yhdelle tai useammalle sivulle. Valituille sivuille liitetään plugin, joka hakee Johku-palvelimelta tuotelistan JSON-muodossa, käsittelee saamansa datan ja näyttää sen sivulla tarkoituksenmukaisessa muodossa. Sivuille liitetään myös Javascript-pohjainen upotuskoodi, joka liittää sivuihin ostoskori- ja ostotoiminnallisuudet ilman, että niitä tarvitsee erikseen ohjelmoida. Tuote- ja ostoskorinäkymien tyylit määritellään CSS:llä sivuston ulkoasua vastaaviksi.

Esimerkki tuotelistauksesta

Johkussa tuotteiden ryhmittely tehdään Ylläpidon tagien kautta. Näin ollen sama tuote voi olla useammassa kuin yhdessä tuoteryhmässä.

Tagiin liitetyt tuotteet saadaan listattua esimerkiksi seuraavalla HTTP GET-kutsulla:

Tässä “tervarumpu” on kaupan tunnus, “fi_FI” on valittu kieli ja “Majoitus” on Johku-tuotteeseen määritelty Ylläpidon tagi. Haku ei edellytä mitään autentikointia, koska kaikki vastauksessa näytettävät tuotetiedot ovat julkisia.
Vastauksena tuleva data sisältää kaikki tuotteen sivustolla näyttämiseen tarvittavat tietokentät. Tietokenttiä voi tulla aikaa myöten lisää.

Esimerkki sivustosta, jolla on käytetty majoituskohdelistoja:

Sivun luontiin on käytetty aineistossa olleista tietokentistä ainakin kenttiä “id”, “name”, “description”, “price”, “type”, “unit_type”, “price_unit”, “file_id”, “file_ext”. Tarkempi kuvaus kentistä toimitetaan tarvittaessa erikseen.

Esimerkissä tuotteiden Varaa-nappia painamalla plugin luo uuden sivun, jossa näytetään tarkemmat tiedot yksittäisestä tuotteesta. Nämä tarkemmattiedot löytyvät osoitteesta:

Tässä kutsussa “32” on tuotteen id edellisestä JSON-listasta.

Tuotesivulle lisätään ainakin “largeembedhtml”, joka sisältää tarvittavan html-koodin tuotetietoineen, sekä “largeembedcode”-kentästä löytyvä script-tagi, joka luo ostotoiminnallisuuden. Data sisältää myös kaikki arvot yksitellen, jos niitä halutaan käyttää jossakin erikseen.

Lisäksi jokaiselle sivuston sivulle, jolla halutaan näyttää ostoskori, täytyy liittää ostoskorin upotuskoodin script-tagi, joka puolestaan löytyy “basketembedcode”-kentästä ja on sama joka paikassa.

Muita huomioita

Johkusta ladattava JSON-data kannattaa kehitysvaiheen jälkeen laittaa tallentumaan välimuistiin. Suositeltava päivitystiheys on tunti. Tällä varmistetaan, että sivuston lataus ei turhaan hidastu Johkusta tehtävien hakujen takia sekä vähennetään Johkuun tulevaa tarpeetonta liikennettä. Tällöin tietokenttiin syötetyt tiedot päivittyvät enintään tunnin viiveellä, mutta saatavuustiedot päivittyvät silti reaaliaikaisesti.

Wordpress-plugin

Meiltä saa tarvittaessa esimerkin vuoksi tehdyn Wordpress-pluginin, joka sisältää minimitoiminnallisuuden Johku-integraation tekemiseksi ilman muotoiluja.