MyCashflow'n hakukoneen avulla on mahdollista toteuttaa AJAX-pohjainen livehaku, joka esittää hakutuloksia samalla kun kävijä syöttää hakusanaa.

MyCashflow'n uudessa Barebones-oletusteemassa livehaku on valmiiksi toteutettu helppokäyttöisen search.js-pluginin avulla.

Jos teemasi ei käytä pohjana Barebones-teemaa, voit myös lisätä pluginin omaan teemaasi.

Uuden oletusteeman työkalujen vaihtoehtona voit käyttää omassa kaupan teemassasi MyCashflow'n vanhan oletusteeman LiveSearch-luokkaa, jonka käyttö neuvotaan tässä artikkelissa. Suosittelemme kuitenkin käyttämään Barebones-teeman työkaluja.

Livehaun käyttöönotto teemassa

Tässä osiossa neuvotaan livehaun toteuttaminen MyCashflow'n vanhan oletusteeman hakupluginilla.

Livehaku on toteutettu MyCashflow'n oletusteeman tiedostossa /js/mcf.main.js (rivit 79–290). Jos teemasi ei sisällä kaikkia MyCashflow'n omia JavaScript-tiedostoja, kopioi luokka oman teemasi tiedostoihin.

Kun luokka on sisällytetty teemaan, voit ottaa livehaun käyttöön luomalla siitä objektin teemassa (esitetty alla). Livehaulla on seuraavat asetukset:

new LiveSearch({
    // Hakulomakkeen sisältävä elementti
    $searchForm: $('#SearchForm'),

    // Hakutuloslistan sisältävä elementti
    $liveSearchResults: $('#LiveSearch'),

    // Hakukentän input-elementti
    $searchInput: $('#SearchInput'),

    // Hakusuodatin- ja -suosituselementit
    $results: $('.SearchSuggestions li')
});

Livehaku tulee automaattisesti käyttöön, kun objekti on luotu. Varmista, että se on käytettävissä kaikilla sivuilla, joilla on hakukenttä sekä hakutulossivulla.

Hakusuodattimien päivittäminen AJAX-pyynnöillä

Kun livehaku on käytössä teemassa, ja käytössä on MyCashflow'n edistynyt hakukone, hakusuodattimia voidaan päivittää verkkokaupan hakutulossivulla AJAX-pyyntöjen avulla. Näin hakutuloslistan päivittäminen on asiakkaille erittäin nopeaa.

Hakusuodattimien AJAX-päivitys on toteutettu livehakuluokan onSearchFilterResultClick()-funktiossa (katso funktioiden kuvaukset alla).

Livehaun automaattisten funktioiden kuvaukset

Livehaku suorittaa automaattisesti useita funktioita eri tapahtumien yhteydessä. Alla on esitelty kaikki livehaun funktiot ja niihin liittyvät tapahtumat.

Voit tarvittaessa muokata funktioita omassa teemassasi, jos haluat esim. muokata tapahtumien viiveitä tai liittää joihinkin tapahtumiin erilaisia toiminnallisuuksia.

onSearchInputFocus()

Suoritetaan kun käyttäjä aktivoi hakukentän.

Lisätään hakukentälle luokkanimi, joka ilmaisee kentän aktivoinnin.

onSearchInputBlur()

Suoritetaan kun fokus viedään pois hakukentästä.

Poistetaan hakukentältä aktiivisuuden ilmaiseva luokkanimi.

onSearchInputKeyDown()

Suoritetaan kun käyttäjä painaa näppäimistöllä painikkeen pohjaan ja hakukenttä on aktiivinen.

Ylös/alas-nuolinäppäimillä liikutaan hakutuloslistan tuloksesta toiseen.

onSearchInputKeyUp()

Suoritetaan kun käyttäjä päästää näppäimistön painikkeen ylös ja hakukenttä on aktiivinen.

Ylös/alas-nuolinäppäimillä liikutaan hakutuloslistan tuloksesta toiseen. Muilla painikkeilla haetaan syötetyn hakusanan perusteella hakutulokset.

onSearchInputChange()

Suoritetaan kun hakukentän arvo muuttuu.

Jos muutoksen jälkeen kentän arvo on tyhjä, mahdolliset aiemmat hakutulokset tyhjennetään.

onSearchResultMouseEnter()

Suoritetaan kun hiiren osoitin viedään hakutuloslistalla tulosrivin päälle.

Lisätään tulosriville aktiivisuuden ilmaiseva luokka.

onSearchResultMouseLeave()

Suoritetaan kun hiiren osoitin viedään hakutuloslistalla pois tulosrivin päältä.

Poistetaan rivin aktiviisuudesta kertova luokkanimi.

onSearchFilterResultClick()

Suoritetaan kun käyttäjä painaa hakutulossivulla hakusuodatinlinkkiä.

Haetaan ja päivitetään hakutulokset uudestaan ja otetaan huomioon käyttäjän tekemä muutos hakusuodattimissa.