Noston tuotesuosituksien toteuttaminen MyCashflow-teemassa

Tässä artikkelissa neuvotaan Nosto-palvelun tuotesuosituksien toteuttaminen MyCashflow-teemassa.

Johdanto

Nosto-laajennus poistuu käytöstä.

Palvelun käyttöönottoa verkkokaupassa ei suositella. Nykyiset palvelun asennukset pysyvät edelleen toiminnassa.

Noston toteuttaminen verkkokaupan teemassa vaatii kaksi asiaa:

Noston JavaScript-kirjaston ja datankeruutyökalujen asentamisen ja
suosituslistojen tulostamisen halutuissa kohdissa teemaa.

Nostoa varten on MyCashflow'n vanhasta oletusteemasta oma haaransa, jossa lähes kaikki tuotenostoja tulostavat listat on korvattu Noston vastaavilla tuotelistoilla ja joka sisältää tässä dokumentissa mainitut skriptit. Saat Nosto-oletusteemamme täältä (suora latauslinkki).

Uuteen oletusteemaan Nostoa ei ole lisätty valmiiksi.

Jos tarvitset omaan teemaasi vain tarvittavat skriptit, löydät ne tästä:

Noston skriptien ja datankeruun asennus

Jotta Nosto voi tuottaa asiakkaille personoituja tuotesuosituksia, sen on kerättävä tietoa asiakkaidesi selauskäyttäytymisestä. Tätä varten sinun on asennettava verkkokauppaan Noston JavaScript-kirjasto.

Noston tuotedatan keräys ja tuotenostoja palauttavat skriptit voi tulostaa kauppaan {Extensions}-tagilla, joka tulostaa yleisesti muidenkin laajennusten tarvittavat koodit. Useissa teemoissa tagi on jo valmiiksi paikallaan eikä tämä usein vaadi toimenpiteitä.

{Extensions(for: 'head')} tulostaa Noston JavaScript-kirjaston sekä MyCashflow'n tukiskriptit, joiden avulla Noston palauttamat tuotteet muunnetaan Interface-merkkaukseksi. Tagin tulee sijaita HTML-lähdekoodissa <head></head>-tagien välissä. Vaihtoehtoisesti voit tulostaa pelkät Noston vaatimat skriptit käyttämällä {NostoScript}-tagia.

{Extensions(for: 'body')}-tagi tulostaa sivun metatiedot Nostolle. Tämän tagin tulee sijaita HTML-lähdekoodissa heti avaavan <body>-tagin jälkeen. Vaihtoehtoisesti voit tulostaa pelkät Noston metatiedot käyttämällä {NostoTag}-tagia.

Noston tuotelistojen lisääminen kauppaan

Noston tuotenostolistat tulostetaan {NostoProducts}-tagilla. Tagille pitää antaa attribuutilla slot tieto siitä, minkä tyyppistä tuotesuosittelua Noston hallinnasta halutaan käyttää. Esimerkiksi {NostoProducts(slot: 'nosto-frontpage-3')} palauttaisi nosto-frontpage-3-slotin tuotteet.

Katso myös ohjeet slottien luomiseen Nosto-palvelussa.

Tagi eroaa muista tuotelistatageista siinä, että tagi ei suoraan palauta tuotteiden HTML-merkkausta, vaan seuraavanlaisen HTML-elementin:

<div class="nosto_element" id="nosto-frontpage-3" data-nosto-params="limit=15&type=normal"></div>

Esimerkin mukainen merkkaus on tulostettu seuraavalla tagimerkkauksella:

{NostoProducts(
    slot: 'nosto-frontpage-3',
    limit: 15,
    type: 'normal'
)}

Kaikki normaalit {Products}-tagin attribuutit toimivat myös {NostoProducts}-tagin kanssa.

Koska {NostoProducts}-tagi ei palauta suoraan tuotteiden HTML-merkkausta, täytyy tuotteiden tulostamista varten omaan teemaan lisätä mcf.nosto.js-jQuery-plugin, joka ottaa vastaan Noston palauttamat tuotteet ja tulostaa {NostoProducts} attribuuttien mukaisen HTML-merkkauksen sivulle em. <div>-elementin sisälle.

mcf.nosto.js-plugin

Nosto-plugin on välttämätön {NostoProducts}-tagin toiminnan kannalta. Pluginin tehtävä on muuntaa Noston tarjoamat tuotesuositukset Products-tagin mukaiseksi merkkaukseksi. Skripti on riippuvainen jQuery-kirjastosta.

{NostoProducts}-tagi ja mcf.nosto.js-plugin toimivat yhdessä seuraavasti:

Tagi tulostaa elementin, johon Noston tuotesuositukset ladataan.
Plugin pyytää Interfacelta {Products}-tagin merkkausta tuotesuosituksille.
<div>-elementin sisältö korvataan pyydetyllä {Products}-tulostuksella.
Suoritetaan valinnainen callback-funktio (error tai success riippuen kutsujen onnistumisesta).

mcf.nosto.js-pluginin käyttöönotto tapahtuu yksinkertaisimmillaan seuraavasti:

$('.nosto_element').mcfNosto();

Älä muuta .nosto_element-luokkavalitsinta, koska kyseinen luokkanimi tulee {NostoProducts}-tagilta.

Kuva 1. Callback-funktiot

Koska Noston tuotesuositukset ladataan asynkronisesti, on tärkeää, että plugin tarjoaa mahdollisuuden ajaa JavaScriptiä ladatuille tuotteille. Tämä on toteutettu callback-funktioiden avulla. Callback-funktiosta on hyötyä esimerkiksi tuotekarusellille, jota ei voida alustaa ennen kuin Noston tuotesuositukset on ladattu.

Pluginille voi alustusvaiheessa antaa kaksi callback-funktiota; error ja success:

$('.nosto_element').mcfNosto({
    success: function() {
        // Nosto-elementti on saatavilla this.$elem-muuttujan kautta.
        // Esimerkki tuotekarusellin alustamisesta Nosto-tuotteille:

        var $crossSaleScroller = this.$elem.find('.CrossSaleScroller');
        if ($crossSaleScroller.length) {
            $crossSaleScroller.cycle();
        }
    },

    // Error-funktiota kutsutaan jos Nosto ei palauta kyseiselle
    // slotille tuotesuosituksia tai Interface-kutsu epäonnistuu.
    error: function(msg) {
        // msg-muuttuja sisältää pluginin ilmoittaman virheviestin.
        if (typeof console === 'object') { console.log(msg); }
    }
});

Useiden Nosto-tilien käyttäminen samassa verkkokaupassa

Nosto laajennus on toteutettu siten, että laajennuksen asetuksista voidaan valita tai luoda uusi tili jokaiselle kaupan versiolle.

Jos käytetään {Extensions}-tageja skriptien tulostamiseen, eri tilien käyttäminen eri versioissa toimii automaattisesti. Muuten täytyy käyttää {NostoScript}-tagia ja antaa account-attribuuttiin Nosto-tilin tunnus, esim. {NostoScript(account: 'mcf-kauppa-fi')}.

Sijoita {NostoScript}-tagi teemassa ennen {Extensions(for: 'head')}-tagia, jotta tilin muutos otetaan huomioon laajennuksen tietoja tulostaessa.

Miksi MyCashflow ei käytä Noston omia templateja?

Koska uskomme että Interface-merkkaus on suunnittelijoille parempi työkalu, kun halutaan integroida Noston palauttamat tuotesuositukset olemassa olevaan verkkokaupan ulkoasuun.

Normaalisti Nosto palauttaisi tuotesuositusten mukana myös niiden HTML-merkkauksen, tyylit ja JavaScript-koodit, joita muokataan Noston hallintatyökalusta. Tällöin MyCashflow-kaupan suunnittelijan pitäisi opetella uusi työkalu ja Noston oma syntaksi jos hän haluaa muokata tulostusta verkkokaupan ulkoasun mukaiseksi.

Ratkaisimme tilanteen siten, että MyCashflow-kaupoille avattaviin Nosto-tileihin luodaan oma tuotesuositus-template, joka ei sisällä muuta kuin tuotteiden ID:t jotka Noston tuotesuosituslogiikka palauttaa käyttäjän selaustietojen pohjalta. Tämä ID-lista voidaan MyCashflow-kaupan teemassa antaa {Products}-tagille joka tulostaa tuotteiden mukaisen listan. Tämän ansiosta suunnittelijan ei tarvitse opetella Noston työkalua, vaan hän voi luottaa Interface-merkkaukseen Noston tuotteita tulostaessa.

Lisähyötynä tästä seuraa myös se, että Noston palauttamia tuotesuosituksia on mahdollista filtteröidä kaupan teemassa. Esimerkiksi jos haluttaisiin näyttää muiden selailuhistoriaan perustuvia suosituksia, mutta vain alennettuja tuotteita, voitaisiin käyttää seuraavaa merkkausta:

{NostoProducts(
    slot: 'nosto-navigation-2',
    filters: 'discounted'
)}

{NostoProducts}-tagilla on käytössä pääasiassa kaikki samat attribuutit kuin {Products}-tagilla, joten voit käyttää sillä tuotelistojen yleisiä suodattimia.

Teemaopas