Sisältösivuille taustakuvat

Sisältösivuille voi nyt määrittää yhden taustakuvan. Ohjeet templatessa käyttöön löytyvät täältä:
http://ovelakauppa.blogspot.fi/p/sisalto.html

Asiakkaiden käsittely sivupohjissa

Asiakastietojen käsittely sivupohjissa dokumentaatio aloitettu osoitteessa http://ovelakauppa.blogspot.fi/p/asiakkaat-sivupohjissa.html

Dokumentaatiota

Tämä sivusto palvelee pääasiassa Ovela-alustan dokumentaationa sivupohjien luomiseen.

Juuri valmistunut: Älykäs haku

Saimme juuri valmiiksi uuden älykkään haun kauppa-alustaan, jota pääsee testailemaan referenssikaupallamme osoitteessa toimistotarviketukku.fi

Tällä hetkellä haku on käytössä vain Ajax-pohjaisessa Typeahead-tyylisessä haussa, mutta tarkoitus on tuoda älykkäät hakuominaisuudet myös varsinaiseen hakutulos-sivulle.

Vaikka haku voi ensisilmäyksellä näyttää melko simppeliltä, niin hakumoottorin tekemiseen on kuitenkin käytetty paljon kehitysaikaa. Tässä lyhyt lista hakukoneen uusista ominaisuuksista:

• Nopea: indeksiin perustuva haku suoriutuu 7000 tuotteen valikoimasta n. 0,08 sekunnissa
• Osuva: mitä useammin hakusana toistuu tuotteessa, sen ylemmäs se sijoittuu
• Oppiva: tutkii käyttäjien klikkauksia tarjoten parempia hakutuloksia
• Oikolukeva: lukee tuotetiedot ja tarjoaa niiden perusteella oikoluvun
• Markkinoiva: antaa enemmän painoarvoa kampanjatuotteille 
• Värejä hakeva: analysoi tuotekuvat ja antaa tuotteelle keskiarvoinen väriarvon
• Muokattava: hakutulos annetaan JSON formaatissa ja käsitellään kokonaan Javascriptillä kaupan ulkoasupohjassa. Eli hakutuloksen voi muotoilla miten haluaa.

Oppiva hakumoottori seuraa mitä tuotteita milläkin hakusanalla klikataan ja yhdistää kyseisen tuotteen vahvemmin hakusanaan. Toisinsanoen mitä enemmän ihmiset käyttävät hakukonetta, sen parempia tuloksia se tarjoaa. Oppiva haku on myös suojattu väärinkäytöiltä, eli hakukonetta ei voi opettaa tahallaan "väärin".

Hakumoottori osaa myös oikolukea hakulausekkeita ja pyrkii tarjoamaan oikein kirjotettua vaihtoehtoa käyttäjälle.

Oikoluku on kauppakohtainen, eli oikolukijamme lukee kauppaan syötetyt tuotetekstit, tuoteryhmät ja tuotenimikkeet kerran yössä ja tekee niistä todennäköisyystaulukon. Tämän pohjalta todennäköisyyslaskennalla voidaan päätellä onko käyttäjän kirjoittama sana mahdollisesti väärin kirjoitettu (kaupan näkökulmasta, ei Suomen kielen ;) ja tarjoaa siihen osuvampaa sanaa.

Tällä menetelmällä saadaan 90% todennäköisyydellä oikea hakusana, mikäli kaupassa ylipäätään on jotain "sinnepäin" osuvaa tuotesisältöä. Oikoluku korjaa myös näppärästi yhdyssanavirheet. Esimerkiksi "kopio paperi" tarjoaa oikoluettuna "kopiopaperi"-sanan.

Väri-indeksoija läpikäy kaikki kaupan tuotteet kerran yössä ja katsoo tuotteiden oletuskuvat läpi pikseli kerrallaan. Mikäli kuvapikseli on riittävän värikäs, se lasketaan mukaan tuotteelle ja väripikseleistä koostetaan värikeskiarvo tuotteelle. Tätä arvoa käytetään värihauissa, jolla tuotteita voidaan hakea värin mukaan. Kaikkista tuotteista sievennetään 20 värin "väritaulukko", joka tarjotaan hakumoottorille värivalintojen tekoa varten. Tämä siksi, ettei värihaun vaihtoehtoihin tule tuhansia eri sävyjä :)

Kaikki tiedot ja hakutulokset annetaan ulkoasulle standardissa JSON formaatissa, jota voidaan ulkoasussa käsitellä esimerkiksi Jquerylla. Alla refenssikauppamme lähdekoodi, jolla Ajax-haku tuotetaan. Lisäksi tähän tarvitaan myös HTML/CSS puolet, jossa on haku-input sekä piilotettu <div id="searchresult"></div>, jossa hakutulokset esitetään.

Javascript:

function ajaxSearch(search) {
    
    if(search.length > 2) {
        
        $('#searchresult').html('<div class="text-center"><i class="fa fa-circle-o-notch fa-spin"></i></div>');
        $('#searchField').val(search);
        $('#searchresult').slideDown(700);
       
        $.getJSON( "/ajaxSearch.php", { search: search }, function( data ) {
            
            $('#searchresult').html('');
            
            if(data.suggestion) {
                $('#searchresult').append('<ul class="list-unstyled"><li class="suggestionLI">Tarkoititko: <a href="#" class="suggestion" onclick="ajaxSearch(\''+data.suggestion+'\')">'+data.suggestion+'</a></li></ul>');
            }
            
            $('#searchresult').append('<b>Tulokset tuotteista</b>');

            list = $("#searchresult").append('<ul class="list-unstyled" id="productsSearch"></ul>');
            
            i = 0;
            for (producti in data.product) {
                thisitem = data.product[producti];
                
                $('#productsSearch').append('<li><a href="/'+ thisitem.Alias +'" title="'+ thisitem.Name +'">'+ thisitem.Name +'</a></li>');
                i++;

            }
            
            if(i == 0) {
                $('#productsSearch').append('<li><p class="text-center">Ei tuloksia</p></li>');
            }
            
            
               if(i != 0) {
                $('#productsSearch').append('<li><a class="searchAll" href="catalog?searchFrom=all&search='+search+'">&raquo; Katso kaikki tuotteet</a></li>');
            }
            
            $('#searchresult').append('<b>Tulokset tuoteryhmistä</b>');
            
            list = $("#searchresult").append('<ul class="list-unstyled" id="categorySearch"></ul>');
            
            i = 0;
            for (categoryi in data.category) {
                thisitem = data.category[categoryi];
                
                $('#categorySearch').append('<li><a href="/'+ thisitem.Alias +'" title="'+ thisitem.Name +'">'+ thisitem.Name +'</a></li>');
                i++;

            }
            
            if(i == 0) {
                $('#categorySearch').append('<li><p class="text-center">Ei tuloksia</p></li>');
            }
            
            
        });
    } else {
        $('#searchresult').hide();
    }
    
}

Tervetuloa Ovelakaupan kehitysblogiin!

Tämän blogin tarkoitus on tarjota tietoa uusista Ovelakaupan ominaisuuksista ja kehitysidoista tekniikkavetoisesti :)

Lisäksi Blogin kautta otetaan vastaan käyttäjien kehitysideoita ja neuvotaan kauppa-alustan käyttäjiä ulkoasupohjien tekemiseen. Tarkoituksena on myös lisätä tänne esimerkkejä käyttöliittymätoteutuksista sekä kattava kuvaus template-rajapinnan muuttujista sekä funktioista.

Eli tervetuloa tutustumaan! Pistäkää rohkeasti kommenteihin ideoita ja mitä nyt mieleen sattuukaan tulemaan!

Yhteistyöterveisin,
Tero Ojala