MyCashflow blogi

Johdanto verkkokauppaan -opas

Lataa ilmainen verkkokauppaopas, joka johdattaa sinut verkkokaupan maailmaan ja antaa vinkkejä paremman nettikaupan rakentamiseksi.

Lataa ilmainen opas »

Kirjoitukset aiheesta Interface-merkkaus

Miska kirjoitti 10.3.2011 kategoriaan Markkinointi avainsanoilla Facebook Interface-merkkaus Sosiaalinen media: 0

Facebookin integroiminen osaksi verkkokauppaa

Tämä lähinnä verkkokaupan ulkoasun suunnittelijoille tarkoitettu postaus käsittelee Facebookin integroimista tiiviimmin osaksi verkkokauppaa.

Jos olet kauppias ja haluat nämä toiminnot kauppaasi, ota yhteys ulkoasun suunnittelijaasi ja pyydä häntä lisäämään OpenGraph tiedot kauppaasi. Mikäli käytät MyCashflow’n oletusulkoasua, tulemme lisäämään osan näistä ominaisuuksista oletusulkoasun seuraavaan päivitykseen.

OpenGraphin hyödyt

OpenGraph protokolla mahdollistaa verkkokaupan sivujen integroimisen tiiviiksi osaksi Facebookia. Kun sisällytät OpenGraph tiedot verkkokauppaan, sivun tykkääminen tekee kyseisestä verkkokaupan sivusta Facebook-sivun ja luo yhteyden käyttäjän ja kaupan sivun välille. Tuote näkyy nyt kävijän kiinnostuksen kohteissa ja kauppiaan on mahdollista julkaista päivityksiä näiden käyttäjien profiileissa tuotteen nimissä. Tämän lisäksi tykätyt tuotteet löytyvät nyt Facebookin haulla ja esimerkiksi mainonnan kohdistaminen tuotteesta tykkääville on mahdollista.

Miten lisään OpenGraph tiedot verkkokauppaan?

OpenGraph lisätään html-tiedoston head-tagin sisälle seuraavasti:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
  <meta property="og:title" content="{Title}"/>
  <meta property="og:url" content="{CurrentUrl(before:'http://www.KAUPANOSOITE.fi')}"/>
  <meta property="og:site_name" content="{ShopName}"/>
  <meta property="og:type" content="product"/>
  <meta property="og:image" content="{ProductImageUrl(before:'http://www.KAUPANOSOITE.fi')}"/>
  <meta property="fb:admins" content="KAUPPIAAN FACEBOOK-KÄYTTÄJÄID"/>
  <!-- Valinnaiset sivun ja sovelluksen ID:t
    <meta property="fb:page_id" content="KAUPAN FB-SIVUN ID"/>
    <meta property="fb:app_id" content="KAUPAN FB-SOVELLUKSEN ID"/>
  -->
  <meta property="og:description" content="{MetaDescription}"/>
  ...
</head>

Huomaa myös html-tagille lisätyt xmlns-attribuutit, jotka laajentavat merkkauksen käsittämään myös OpenGraphin tarvitsemat tagit. Kaupan Facebook-sivun ID tai sovelluksen ID ei ole pakollinen, mutta kauppiaan Facebook käyttäjä-ID täytyy löytyä, jotta kauppias voi julkaista päivityksiä tuotteille ja muokata tuotteiden Facebook-sivuja.

Tässä vielä ladattavana pakettina Facebook OpenGraph esimerkki, joka on tehty oletusulkoasun header.html tiedoston päälle. Esimerkissä OpenGraph tiedot tulostetaan verkkokaupan tuotteille, tuoteryhmille, tuotemerkeille, uutisille ja infosivuille hieman eri tavoin, jotta kaikille saadaan asetettua asianmukainen kuva ja tyyppi.

Tykkääminen OpenGraphin avulla

Nyt kun tiedot on saatu lisättyä kauppaan, itse tykkäämisen lisääminen on todella simppeliä:

<script src="http://connect.facebook.net/fi_FI/all.js#xfbml=1"></script>
<fb:like href="{CurrentUrl(before:'http://www.KAUPANOSOITE.fi')}" show_faces="true" width="450" action="recommend"></fb:like>

Voit tehdä haluamasi napin myös Facebookin kehittäjätyökalulla, kunhan vaihdat vain href-attribuutiksi Interface-tagin {CurrentUrl(before:’http://www.KAUPANOSOITE.fi’)} ja vaihdat tarvittaessa kielen suomeksi, hakemalla skriptit “fi_FI” kielikoodilla.

Suosittelen käyttämään aina XFBML-versiota koodista, jotta tykkäyksen kommentointi on kaikissa tilanteissa mahdollista.

Seuraa verkkokaupan tykkäämisiä ja muita Facebook-tapahtumia

Facebook on vasta julkaissut uuden version analytiikkatyökalustaan, jolla verkkokaupan Facebook-tapahtumia voidaan seurata. Kunhan verkkokaupasta löytyy joko kauppiaan Facebook-ID, kaupan Facebook-sivun ID tai kaupan sovelluksen ID, voit yhdistää verkkokaupan tapahtumat Facebook Insights sovellukseen ja seurata kaupan tykkäämisiä ja muita tapahtumia reaaliaikaisesti.

Tykkääminen on vasta alkua

Nyt kun kauppaan on lisätty OpenGraph tiedot, erilaisten Facebook-vimpaimien käyttö helpottuu kummasti. Voit esimerkiksi tehdä kaupan tuotteiden kommentoinnin Facebookin avulla, kunhan perustat kaupalle oman sovelluksen tai voit lisätä kauppaan Facebookin oman suosittelulaatikon, joka suosittelee kävijöille tuotteita, joista kävijän kaverit ja muut FB-käyttäjät ovat tykänneet.

Seuraavassa sosiaalisia vimpaimia käsittelevässä postauksessa käymmekin läpi pari vaihtoehtoa kaupan kommentoinnin toteuttamiseksi.

Miska kirjoitti 24.2.2011 kategoriaan Interface-merkkaus avainsanoilla bannerit Interface-merkkaus: 0

Bannerit ulkoasun suunnittelijan näkökulmasta

Kävimme bannereita hieman läpi viimeisimmässä oletusulkoasun päivitysuutisessamme, mutta se kosketti vain kauppiaita ja nyt aiommekin paikata tämän puutteen ja käsitellä asiaa hieman toiselta kantilta.

Bannerit alkavat olla tehokas työkalu ulkoasun suunnittelijoille. Kyseessä kun ei ole pelkkä anna-kuva-ja-toivo-parasta tyyppinen toteutus, vaan bannereita MyCashflow’ssa voidaan käyttää moninaisilla tavoilla, joista käymme alla läpi vain muutaman.

Kuvakarusellit

Kuvakarusellit ovat hyvä tapa näyttää useita isompia bannereita kerralla uhraamatta tarkoitukseen kokonaista sivua. Karusellin perusperiaate on liu’uttaa isäntäelementin – joka on asetettu piilottamaan ylimenevä sisältö – näkyvään osaan sen sisällä olevaa sisältöä. Tässä tapauksessa yksittäinen banneri.

Oletusulkoasussa menetelmää on käytetty etusivulla bannereiden kanssa hieman monimutkaisemmin, koska bannereiden tiedot ja navigointi näytetään vain jos hiiri on bannereiden päällä. Yksinkertaisimmillaan karusellin toteuttaa esimerkiksi jQueryn SerialScroll tai jQuery Tools scrollable pluginilla ja muutamalla rivillä koodia. Kannattaa ladata uusin oletusulkoasu ja tutkia kuinka asia on siellä tehty ja tehdä oma tulkinta aiheesta noudattamalla valitsemansa pluginin ohjeita.

Bannereiden tekstikentällä ihan mitä vaan

Bannereilla on myös tekstikenttä, johon sisältöä voidaan syöttää rajattomasti, jolloin bannereista voidaan ottaa paljon enemmän irti kuin pelkästä kuvabannerista. Alla muutamia näppäriä asioita joita tekstikentällä voit tehdä.

Tekstinostot

Kuka käskee että bannerin pitää olla kuva? Entä jos haluat etusivulle moniosaisen tekstinostoelementin, jossa otsikoista voidaan avata alla oleva sisältö.

Tämän voisi tehdä kyllä infosivuillakin, mutta bannerit ovat tähän huomattavasti kevyempi työkalu. Banneriryhmän tulostus on kätevä muokata helper attribuutilla, jolloin yksittäisen bannerin tulostuksen saa tehdä juuri kuten haluaa ja tulostuksessa voi käyttää tai olla käyttämättä kuvaa.

Tekstinostojen käyttöliittymää voi piristää vaikka jQueryUI:n mukana tulevalla haitari-pluginilla.

Tyylimäärittelyjä bannereiden läpi

Tätä tekniikkaa hyödynnetään tovi sitten julkaistussa oletusulkoasussa seuraavasti:

<style type="text/css" media="all">
  {BannerText(name:'head-styles')}
</style>

Kun hallintaan syötetään oletusulkoasua käytettäessä banneri jonka koodinimi on head-styles, niin tämän bannerin tekstikentän sisältö kirjoitetaan style tagien sisään teeman head elementtiin. Tällä voidaan muokata teemaa kevyesti ilman, että sitä täytyy asentaa omaan kauppaan muokattavaksi. Muista kuitenkin bannerin tekstikentän alkuun kirjoittaa notextile.. komento, jottei sekaan tule Textilen tekemiä <p> tageja.

Ulkoasun elementit kokonaan bannereilla

Yksi vaihtoehto on toteuttaa ulkoasun osia suoraan bannereiden läpi, jolloin asiakas voi järjestellä bannereita oman ryhmänsä sisällä tai vaihtaa niiden ryhmiä ja tämä heijastuu suoraan ulkoasun rakenteeseen. Suunnittelija voisi tehdä esimerkiksi banneriryhmät Vasen palsta ja Oikea palsta, joiden sisällä on bannereita, kuten Ostoskori, Tuotenosto, Suositut tuotteet, Kategorianavigaatio ja niin edelleen. Esimerkiksi Kategorianavigaatio bannerin tekstikenttä voisi näyttää tältä:

notextile..
<div id="CategoryNav" class="LayoutModule">
  {Categories(before:'<h2 class="LayoutModuleHeader">Tuoteryhmät</h2>')}
</div>

Tyylitiedostossa voisi olla sitten tarvittavat säännöt, jotta kaikki LayoutModule elementit toimivat missä järjestyksessä tahansa sivupalstoissa. Tällön asiakas saisi itse järjestellä ja muutella ulkoasua mielensä mukaan. Toiminto on tässä mainittu lähinnä kuriositeettina, koska saavutettu hyöty tästä jää hyvin minimaaliseksi ellei olla myymässä ulkoasuja valmistemplate-tyyliin, eikä asiakasta varten suunniteltuna.

Esimerkissä oleva “notextile..” on tärkeä rivi silloin, kun kirjoitetaan html-merkkausta MyCashflow’n tekstikenttiin tai muuten Textile käärii sisällön <p> tagin sisälle. Lisätietoa html-merkkauksen kirjoittamisesta Textilen sekaan löytyy Textilen kattavasta ohjeesta.

Siinäpä muutamia käyttötapoja bannereille, joilla pääsee kyllä alkuun, mutta ei bannereiden käyttö näihin vielä rajoitu. Työkalu on yksinkertaisuudessaan kuitenkin erittäin monikäyttöinen ja sille varmasti ajan mittaan tullaan keksimään mitä mielikuvituksellisimpia käyttötarkoituksia.

Miska kirjoitti 22.2.2011 kategoriaan Interface-merkkaus avainsanoilla Interface tagit Interface-merkkaus: 0

Kuinka toteuttaa livehaku omassa teemassa

Tässä ulkoasun suunnittelijoille tarkoitetussa ohjeessa käymme läpi kuinka on mahdollista toteuttaa livehaku omaan MyCashflow teemaan. Uusimmassa ladattavassa oletusulkoasussa tulee kyseinen ominaisuus mukana ja käytämmekin oletusulkoasun skriptejä esimerkissä ja puramme ne osiin.

Livehaku on äärimmilleen yksinkertaistettuna Interface-tagille lähetetty Ajax-kutsu muutamalla parametrillä. Jos tagi palauttaa onnistuneesti jotain, niin tämä palautus sitten tulostetaan listaan ja näytetään. Tietystihän todellisuus on aina hieman monimutkaisempi, mutta käydään oletusteeman koodi pala palalta läpi, niin huomaatte, ettei se kovin hankalaa ole.

Esimerkkikoodi vaatii toimiakseen jQueryn lisäksi myös typeWatch nimisen pluginin, joka on näppärä pikku skripti, jolla pidämme huolen ettei hakua aloiteta turhaan, vaan vasta sitten kun käyttäjä on lopettanut kirjoittamisen.

Esimerkkikoodi

var mcfLiveSearchResultsWidth = $("#SearchForm").css("width");
$("#SearchForm").append($('<ul id="LiveSearchResults" style="width: '+ mcfLiveSearchResultsWidth +'"></ul>').hide());

Alussa kaappaamme hakulomakkeen lomakkeen leveyden muuttujaan, sekä luomme hakukentän perään tyhjän listan, joka samalla piilotetaan ja jonka leveydeksi asetetaan hakulomakkeen lomakkeen leveys, jotta hakutulokset asettuvat kyseisen elementin kanssa nätisti linjaan.

$("#SearchInput").typeWatch({
  highlight:true,
  wait: 500,
  callback: function(txt) {

Seuraavaksi asetamme typeWatch pluginin tarkkailemaan muutoksia hakukentässä siten, että kun 500ms on kulunut viimeisimmästä näppäimen painalluksesta, suoritetaan asettamamme callback-funktio ja käyttäjän hakukenttään kirjoittama teksti asetetaan muuttujaan txt.

    $("#AjaxMsg").text("Haetaan");

Tulostamme ilmoitukseen tiedon kävijälle siitä, että jotain tapahtuu. Oletusulkoasussa on käytetty jQueryn globaalia ajaxStart tapahtumaa siten, että AjaxMsg elementti näytetään aina Ajax-pyynnön käynnistyessä ja teksti vaihtuu tapahtuman mukaan.

    $.ajax({
      url: "/interface/SearchProducts",
      data: {
        query: txt,
        limit: 5,
        helper: "helpers/livesearchresults"
      },

Tässä ovat Ajax-pyyntömme parametrit, joista pakollisia ovat vain url, joka on osoite jonne Ajax-pyyntö lähetetään ja data objektin query parametri, jonne haemme hakukenttään kirjoitetun tekstin. Livehaku pyytää hakutuloksia osoitteesta, jota voidaan käyttää myös Interface-tagien käyttämiseen MyCashflow’n ulkopuolella ja tästä löytyykin lisätietoa ohjeestamme.

Lisäksi asetamme tässä parametrin limit, joka rajaa tulostettavien tuotteiden määrän viiteen (vastaa Interface tagien limit attribuuttia), sekä helper parametrillä kerromme kutsulle, että haluamme käyttää tuotteiden tulostukseen helpers/livesearchresults.html tiedostoa (vastaa helper attribuuttia).

      beforeSend: function() {
        $(".SearchIndicator","#SearchForm").fadeIn(500);
      },

BeforeSend on funktio joka suoritetaan juuri ennen kuin Ajax-pyyntö lähetetään. Tässä tapauksessa funktio näyttää hakulomakkeen sisälle tulostetun hakuindikaattori elementin, jolle on CSS-tiedostossa asetettu taustakuvaksi latausanimaatio.

      success: function(results) {
        $('#AjaxMsg').slideUp(250);
        $("#LiveSearchResults").html(results).fadeTo(500,0.9);
        $(".SearchIndicator","#SearchForm").addClass("CloseSearchResults").click(function() {
          $("#SearchInput").val("").blur();
          $("#LiveSearchResults").html("");
          $(this).hide().removeClass("CloseSearchResults");
        });
      }

Success on funktio, joka suoritetaan, kun ajax-kutsu on mennyt onnistuneesti läpi. Funktion ensimmäinen argumentti sisältää palvelimen palauttaman tulostuksen ja tässä asetamme argumentin muuttujaan nimeltä results.

Ensimmäiseksi funktion sisällä liu’utamme AjaxMsg ilmoituksen pois näkyvistä, koska emme lataa enää tuotteita. Seuraavaksi tulostamme luomamme LiveSearchResults listan sisälle results muuttujan sisällön, eli itse hakutulokset sekä häivytämme hakutuloslistan näkyviin.

Lopuksi lisäämme hakuindikaattorille luokkanimen CloseSearchResults, joka vaihtaa elementin taustakuvan latausanimaatiosta ruksiksi, sekä liitämme elementin klikkaus tapahtumaan funktion, jolla voidaan piilottaa hakutulokset, tyhjentää hakukenttään kirjoitetut hakusanat ja piilottaa hakuindikaattori eli käytännössä perua haku.

    })
  }
}).attr("autocomplete","off").after('<span class="SearchIndicator"></span>').keyup(function() {
  if ($(this).val()==="") {
    $("#LiveSearchResults").html("");
    $(".SearchIndicator","#SearchForm").hide().removeClass("CloseSearchResults");
  };
});

jQueryn kätevän ketjutuksen avulla lisäämme vielä lopuksi aivan ketjun alussa valitulle SearchInput hakukenttäelementille attribuutin, joka estää selainten omat automaattiset täydennystoiminnot, sekä tulostamme tässä kohtaa hakuindikaattorielementin, jota aiemmin koodissa jo käytettiin.

Lisäksi lopussa tarkistamme jokaisen näppäimen vapautuksen yhteydessä onko hakukenttä kokonaan tyhjä ja mikäli on, niin piilotamme hakuindikaattorin, sekä poistamme siltä mahdollisen CloseSearchResults luokkanimen, joka määräsi onko hakuindikaattorin taustakuva latausanimaatio vai ruksi, jolla hakukentän voi piilottaa. Tämä sitä varten, että kun käyttäjä hakee heti uudestaan, ja luokkanimeä ei olisi poistettu, niin latausanimaation tilalla näkyisi ruksi.

Tässäpä se livehaku sitten olisi levällään kuin Jokisen eväät. Toivottavasti tästä julkisesta levittelystä joku oppikin jotain ja mikäli joku kohta tuntuu sekavalta, niin se johtuu todennäköisesemmin kirjoittajan sekavasta ulosannista, kuin lukijan käsityskyvyn rajallisuudesta. Tässä tapauksessa kannattaa laittaa kysymystä rohkeasti kommentteihin, niin pyrin auttamaan mahdollisten ongelmien kanssa.

Ismo kirjoitti 17.2.2011 kategoriaan Interface-merkkaus avainsanoilla Interface tagit Interface-merkkaus Ristiinmyynti: 0

Kaikille Interface tageille before- ja after-attribuutit

Tämä on merkittävä päivitys, joka tekee ulkoasun suunnittelusta helpompaa. Kaikille Interface tageille on lisätty before- ja after-attribuutit, jotka toimivat siten, että mikäli tagi palauttaa jotain, niin ennen before-attribuutin sisältö lisätään tulostuksen eteen ja after-attribuutin sisältö tulostuksen perään.

Mitä väliä tällä sitten on? Annan esimerkin. Tuotenäkymässä käytettynä {CrossSaleProducts} tulostaa tuotteet, joita kyseisen tuotteen ostaneet asiakkaat ovat myös ostaneet. Ilman otsikkoa tuotelistaus ei kerro asiakkaalle paljoakaan, joten normaalisti sivupohjaan laitetaan otsikko ja tagi erikseen:

<h2>Tämän tuotteen ostaneet ostivat myös</h2> {CrossSaleProducts}

Tämä toimii hienosti niin pitkään kun tuotteella on myyntihistoria, jonka kautta se linkittyy muihin tuotteisiin. Käytännössä kaikilla tuotteilla sitä ei ole – esimerkiksi uutuuksilla. Tästä seuraa, että tuotesivulla on yksinäinen otsikko ilman sisältöä. Tästä otsikosta pääsee eroon käyttämällä before-attribuuttia:

{CrossSaleProducts(before:'<h2>Tämän tuotteen ostaneet ostivat myös</h2>')}

Nyt otsikko näkyy vain silloin, kun ristiinmyytäviä tuotteita on. Kätevää.

After-attribuutti toimii, muuten samalla tavalla, mutta attribuutin sisältö lisätään tagin tulostuksen loppuun. Se on hyödyllinen esimerkiksi silloin, kun avaat before-attribuutissa uuden <div> elementin ja haluat luonnollisesti sulkea sen.

{CategoryHotPicks(before:’<div class=”KuumatTuotteet”><h2>Kuumat tuotteet tästä tuoteryhmästä</h2>’,after:’</div>’)}

Ja nämä tagit toimivat kaikilla tuotteilla, joten ehkä haluat tehdä esimerkiksi näin:

{News(before:'<h2>Ajankohtaista</h2>')}

Miska kirjoitti 17.2.2011 kategoriaan Interface-merkkaus avainsanoilla Interface tagit Interface-merkkaus: 1

Uusi näkymä: Tuotemerkki

Olemme joku tovi sitten lisänneet uuden näkymän tuotemerkeille MyCashflow’n Interface-merkkauksen kanssa käytettäväksi. Tuotemerkin näkymä käyttää sivupohjatiedostoa brand-list.html ja se mahdollistaa muutamia uusia asioita verrattuna normaaliin tuotelistan näkymään verrattuna.

Logo ja fiiliskuva erikseen

Näkymässä on mahdollista käyttää normaalia fiiliskuvaa ja sen lisäksi myös tulostaa tuotemerkille asetettu logo erikseen tagilla {BrandLogo}. Tämä mahdollistaa tuotemerkkisivujen “brändäämisen” juuri kyseiselle tuotemerkille sopivaksi.

Tuotemerkkinavigaatio logoilla

Tuotemerkkinavigaatio on mahdollista tulostaa helper-attribuuttia käyttäen, jolloin voi muokata navigaation näyttämään juuri siltä kuin haluat. Navigaatioon voi poimia kaikki tuotemerkin tiedot, kuten kuvauksen, logon tai vaikka tuotenostot kyseiseltä tuotemerkiltä.

Tuotemerkin nostot

Tuotemerkeille on myös tehty omat nostolistansa, joilla tuotemerkin myydyimmät, uudet, alennuksessa olevat ja mainostettavat tuotteet saadaan näkyviin.

Ismo kirjoitti 27.9.2010 kategoriaan Interface-merkkaus Markkinointi Verkkokaupan kehittäminen avainsanoilla Interface tagit Interface-merkkaus template-tiedostot: 1

Kuitin ja muiden dokumenttien muokkaaminen

Kuitti on yksi harvoja nettikaupan fyysisiä kosketuspintoja asiakkaaseen paketin ja varsinaisen tuotteen lisäksi. Ensisijaisesti kuitti on dokumentti, joka tekee kaupasta virallisen, mutta sitä voi hyödyntää markkinoinnissa. Esimerkiksi laadukas paperi ja tyylikäs ilme auttaa brändin rakennuksessa tai ostaneita asiakkaita voi houkutella tilaamaan lisää tarjoamalla alennuskoodia kuitissa. Luonnollisesti kuitti on vain yksityiskohta koko asiakaskokemuksessa eikä hienoinkaan kuitti pelasta mielipahalta, jos tuote on rikkoontunut postissa. Kuitenkin yksityiskohdat tekevät kokonaisuuden ja esimerkin tilanteeseen on omat ratkaisunsa, mm. laadukkaat pakkaustarvikkeet sekä asianmukaiset palautuslomakkeet ja -ohjeet.

MyCashflowssa dokumentit, kuten kuitit, lähetyslistat, laskut ja pakettien osoitekortit luodaan samalla Interface merkkauksella kuin verkkokaupan varsinainen ulkoasu. Dokumenttien sivupohjat toimivat muuten samaan tapaan kuin muut MyCashflow teeman näkymät, mutta sisältö tarjotaan selaimeen PDF-muodossa. MyCashflow muuttaa standardin (X)HTML/CSS-koodin oikein muotoilluksi PDF-tiedostoksi. PDF:n etuina HTML-muotoiseen kuittiin ovat mm. tarkempi asettelu (esim. sivun alatunnisteet), helpompi jaettavuus (esim. sähköpostitse) sekä varmuus siitä, että dokumentti näyttää aina samalta riippumatta millä selaimella sitä katsotaan. PDF myös näyttää aina tulostettuna samalta mitä ei voi sanoa HTML-sivuista.

Kuittia voit muokata teeman receipt.html-, laskua invoice.html- ja lähetyslistaadispatchnote.html-tiedostoa muokkaamalla. Jos sivupohjia ei löydy valmiina teemastasi, niin voit hakea oletus-tiedostot oman kauppasi /templates/ osoitteen alta:

Lähetyslistan dispatchnote.html tiedosto on hyvä pohja omalle muokkaukselle, koska siinä tuotteiden listaus on toteutettu helper-tiedostoa käyttämällä (dispatchnotehelper.html). Helper-tiedostoa käyttäen voit muokata tuotetaulukon sisällön mieleiseksi. Esimerkiksi voit tehdä helper-tiedoston, joka tulostaa erikseen verottoman ja verollisen hinnan sekä veron osuuden.

Ismo kirjoitti 18.8.2010 kategoriaan Automaattiset päivitykset Interface-merkkaus Yleinen avainsanoilla Automaattiset päivitykset Interface-merkkaus Konversio: 16

Tiedote tulevasta päivityksestä: Nopeampi kassa Checkout™ maksutapojen käyttäjille

Seuraava ohjelmistopäivitys sisältää

uusia ominaisuuksia (näistä lisää myöhemmin),
ostoprosessia nopeuttavia muutoksia kassalla
HTML-lähdekoodi muuttuu, jos käytät Checkout™ maksutapoja (vaatii muutoksen teemaan)

Uusi päivitys sisältää muutoksen kassan HTML-lähdekoodiin, kun maksutapana on Checkout™. Nykyisessä versiossa oleva Siirry maksamaan -nappi korvautuu suorilla pankkien logoilla, joista pääsee kirjautumaan verkkopankkiin. Maksun jälkeen asiakas siirtyy suoraan verkkokaupan kiitos sivulle. Tämä tarkoittaa, ettei asiakas näe ostoprosessin aikana yhtään sivua checkout.fi -osoitteesta ja ostoprosessissa on kaksi vaihetta vähemmän.

Uusi kassa sisältää vähemmän vaiheita myös silloin kun käytössä on vain yksi maksutapa. Tällöin maksutavan valintasivu (/checkout/payment/) jää kokonaan pois. Tällöin myöskään {CheckoutNavigation} ei tulosta linkkia maksutavan valintaan. MyCashflown valmiiden ulkoasujen osalta tämä ei aiheuta ongelmia, mutta jos sinulla on itse suunniteltu teema, niin kannattaa tarkistaa elementin käyttäytyminen.

Uuden malliseen kassaan voit tutustua Pakkaustarvikkeita.fi verkkokaupassa

Muutos aiheuttaa HTML-lähdekoodien muuttumisen sivulla /checkout/process/ silloin, kun asiakas maksaa Checkout™ palvelua käyttäen. Alla on esimerkit uudesta lähdekoodista sekä valmis css-koodi, jonka liittämällä saat tyylit käyttöösi. Liitä alla oleva koodi teemasi master.css tai vastaavaan tiedostoon.

/* Checkoutin maksuunsiirtymissivu
-------------------------------------------------------------- */

.CheckoutTransferToPayment { width: 31.3%; float: left; height: 120px; clear: none; text-align: center; margin: 0 2% 10px 0; padding: 0; }
.CheckoutTransferToPayment button {
	vertical-align: middle; height: 120px; width: 100%;
	padding: 0 10px; text-align: center; background: #FFF;
	border: 1px solid #aaa; cursor: pointer; color: #666;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	-moz-box-shadow: 0 1px 2px #aaa; -webkit-box-shadow: 0 1px 2px #aaa; box-shadow: 0 1px 2px #aaa;
}
.CheckoutTransferToPayment button:hover { background: #e1eef5; border-color: #09f; }
.CheckoutTransferToPayment button img {
	display: block; padding: 4px; background: #FFF;
	border: 1px solid #aaa; margin: 0 auto 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.CheckoutTransferToPayment button:hover img { border-color: #09f; }

Miska kirjoitti 31.3.2009 kategoriaan Interface-merkkaus avainsanoilla helper Interface tagit Interface-merkkaus: 0

Yksi mahdollinen käyttökohde helper-attribuutille

Aina Interface-komentojen oletustulostus ei ole sitä mitä haluat. Silloin voit komennon helper-attribuutilla kutsua helper-tiedostoa, joka sisältää haluamasi listauksen yksittäisen elementin tulostuksen. Tallenna helper-tiedosto html-muodossa MyCashflow-teeman hakemistoon, ja ota helper käyttöön asettamalla helper-attribuutti haluamallesi komennolle. Helper-attribuutti toimii suurimmassa osassa Interface-komentoja, joilla listataan jotain, kuten nosto- ja tuotelistoissa, sekä tuoteryhmänavigaatiossa.

Kuinka helper-attribuutti toimii?

Helper-attribuutin toimintaperiaate on yksinkertainen. Kun helper-tiedostoa kutsutaan listaukselle, niin tiedoston sisältöä käytetään listauksen yksittäisen elementin tulostuksena. Helper-tiedosto käyttäytyy kuten listauksen yksittäinen elementti käyttäytyisi, eli esimerkiksi {Products(helper:'listhelper')} komennolla navhelper.html tiedoston sisältö vastaa yhtä tuotelistan tuotetta ja tiedoston sisällä toimivat kaikki komennot, jotka toimivat tuotekortissakin.

Käytännön esimerkki helper-tiedoston käytöstä

Lähtöasetelma

Käymme tässä läpi kuvitteellisen kaupan etusivun toteuttamisen helper-attribuuttia hyödyntäen. Alkuasetelmana toimii kauppa, jossa tulee olemaan kolme päätuoteryhmää, joilla ei tule olemaan alakategorioita.

Kaupan tilaaja haluaisi nostaa jokaisesta päätuoteryhmästä yhden suosituimman, uusimman ja itse määräämänsä tuotteen etusivulle. Lisäksi asiakas on toivonut, että tuotteista näytetään nimen ja kuvan lisäksi lyhyt kuvaus ja ostaminen olisi mahdollista suoraan etusivulta. Tuotteet ovat sen laatuisia, ettei niillä ole variaatioita eikä varastosaldoja.

Esimerkissä käytetyt tiedostot

Helper-demon ulkoasusuunnitelma

Esimerkissä käytetyt tiedostot saat haettua tästä ja itse toimiva demo löytyy täältä. Alla olevassa oppaassa on selvennetty lähinnä Interface-komentojen ja -attribuuttien toimintaa, joten itse css- ja html-osaaminen täytyy löytyä lukijalta ennestään. Tyylitiedostoa on kommentoitoitu kuitenkin selkeyden vuoksi tavanomaista enemmän niiltä osin kuin se on nähty tarpeelliseksi.

Suunnitelma

Kauppiaan toiveiden pohjalta kaupan etusivun suunnitteleminen on hyvin suoraviivainen prosessi. Tarkoituksena on jakaa sisältöalue kolmeen palstaan, joista jokaisessa on ylhäällä tuoteryhmän nimi, kuva ja esittelyteksti, joiden alle tuotteet listataan allekkain. Ohessa kuva luonnoksesta, jonka pohjalta toteuttaminen aloitetaan.

Tuotenostoja jokaisesta tuoteryhmästä

Koko etusivu tulee toimimaan {Categories} komennon sisällä, jotta saisimme tulostettua etusivun tuotteet tuoteryhmittäin. Päätuoteryhmät saamme listattua etusivulle {Categories(levels:1,helper:'maincategories')} komennolla, jossa levels-attribuutti rajaa tulostettavien tuoteryhmätasojen määrän yhteen ja kutsumme komennolle helper-tiedostoa “maincategories.html”. Tämän helper-tiedoston sisällä voimme sitten käyttää kaikkia tuotelistanäkymässä käytettäviä komentoja. Otamme mukaan tuoteryhmän fiiliskuvan: {CategoryImage}; kuvauksen: {CategoryDescription}; sekä tarvittavat tuotenostot: {CategoryNewProducts}, {CategoryTopSellers} ja {CategoryHotPicks}.

Limit-attribuutti

Kaikilla tuotenostokomennoilla käytämme attribuuttia limit: 1, joka rajaa listauksen vain yhteen tuotteeseen, sekä kutsumme komennoille “featuredproducts.html” nimisen helper-tiedoston, joka vastaa kaikkien tuotteiden tulostuksesta. Tämän helper-tiedoston sisällä toimivat kaikki tuotekorttinäkymässäkin toimivat komennot, joten voimme helposti toteuttaa asiakkaan toiveen lyhyen kuvauksen ja ostotoimintojen tuomisesta etusivulle tämän helperin avulla.

Type-attribuutti

Lisäksi komennoilla on hyvä käyttää type-attribuutilla arvoa ‘normal’, koska tuotenostot listataan oletuksen ‘list’ arvoa käyttäen, joka tulostaa tuotteet <ul>-elementin sisään <li>-elementteinä, jolloin helperiä käyttäessä listattavat tuotteet tulostettaisiin edelleen <ul>-elementin sisään ja tässä tapauksessa emme sitä halua.

Tuotteiden yksilöinti classes-attribuutilla

Lisäksi tuotteiden erottamiseksi toisistaan käyttämme tuotelistakomennoilla classes-attribuuttia, jonka avulla saamme jokaisen tuotteen sitovalle div-elementille tulostettua halutun luokkanimen ilman, että jokaiselle listalle tarvitsee tehdä omaa helper-tiedostoa. Tämän luokkanimen perusteella sitten voimme muuttaa tuotteen värejä ja taustakuvia tyylitiedostossa. Mikäli tulostaisimme yhdellä komennolla kolme tuotetta peräkkäin, joista jokaiselle haluamme eri luokkanimen, se onnistuisi myös erottamalla eri luokkanimet toisitaan pystyviivalla: classes:'Eka|Toka|Vika'.

Tuoteryhmän tiedot ja nostot tulostava categories.html -helper kokonaisuudessaan alla. Tiedosto tallennetaan teema-hakemiston juureen.

<div class="Col">
  <div class="CategoryIntro">
    <h2><a href="{CategoryURL}">{CategoryName}</a></h2>
    <a href="{CategoryURL}" class="CategoryImage">{CategoryImage}</a>
    <div class="CategoryDescription">{CategoryDescription}</div>
  </div>
  {CategoryTopSellers(type:'normal',helper:'featuredproduct',classes:'Wanted',limit:1)}
  {CategoryHotPicks(type:'normal',helper:'featuredproduct',classes:'Featured',limit:1)}
  {CategoryNewProducts(type:'normal',helper:'featuredproduct',classes:'Fresh',limit:1)}
</div>

Yhdeksän tuotteen voimanlähteenä yksi helper-tiedosto

Luomme yksittäisen tuotteen näkymän helper-attribuutilla kutsumamme featuredproduct.html-tiedoston sisälle. Tämän tiedoston sisällä olisi mahdollista käyttää kaikkia samoja komentoja kuin täydessä tuotekorttinäkymässä, joten mahdollisuuksia olisi rajattomasti, mutta pitääksemme etusivun selkeänä käytämme niistä tässä vain muutamaa.

Ensimmäisenä teemme koko komeuden ympärille <div>-elementin jolle luokkanimeksi tulostetaan tuoteluokat {ProductClass} komennolla. Koska haluamme tehdä ulkoasun kaikkien taiteen sääntöjen mukaan, tulostamme tuotetiedot ennen tuotekuvaa ja vasta sen jälkeen tulostamme tuotekuvan sekä <span>-elementin tuotteen ns. avainsanaa varten.

Voisimme hoitaa kuvan tulostamisen {ProductListImage} komennolla, joka tulostaa tuotekuvan käyttäen tuotekuvan “lista” kokoasetusta, eikä kuvaa ympäröivä linkki osoita isoon versioon kuvasta, vaan tuotekorttinäkymään. Emme kuitenkaan tee näin, koska haluamme tuotelinkin sisälle muutakin kuin pelkän tuotekuvan.

Teemme tuotekuvan linkin itse käyttäen {ProductUrl} komentoa, joka tulostaa käsiteltävän tuotteen osoitteen ja tämän linkin sisälle tulostamme kuvan ilman linkkiä ja oikeassa koossaan seuraavalla komennolla: {ProductImage(link:'false',imagesize:'list')}. Lisäksi linkin sisään tulee vielä <span>-elementti, jonka sisään tulostamme :after-pseudoelementin ja content-ominaisuuden avulla tuotteen avainsanan.

Enää tarvitsemme tuotteen hinnan ja koriin lisäämisen. Teemme tuotteen alaosaan näitä toimintoja varten koko tuotteen leveydelle div-elementin, joka saa taustavärinsä tuotteen luokkanimen perusteella, jolloin tuotteiden erottaminen toisistaan helpottuu. Käytämme täällä tuotteen raakaa hintakomentoa {ProductPrice}, joka tulostaa vain myyntihinnan ilman valuuttamerkkiä. Lisäksi tulostamme ostotoiminnot {ProductBuy} komennolla, josta piilotamme kaiken muun paitsi “Lisää ostoskoriin” -napin.

Helper-tiedoston featuredproduct.html sisältö näyttää lopulta tältä:

<div class="{ProductClass}">
  <div class="ProductInfo">
    <h3><a href="{ProductUrl}">{ProductName}</a></h3>
    {ProductShortDesc}
  </div>
  <a href="{ProductUrl}" class="ProductImage">
    {ProductImage(link:'false',imagesize:'list')}
    <span class="ProductTag"><!--[if IE]>{ProductPrice}<![endif]--></span>
  </a>
  <div class="ProductFooter">
    <p class="ProductPrice">{ProductPrice}<span class="Currency">&euro;</span></p>
    {ProductBuy}
  </div>
</div>

Loppusanat

Näin olemme käyneet läpi helper-attribuutin toimintaa, kutsumalla tuoteryhmille helper-tiedoston ja sen sisältä kutsuneet uuden helper-tiedoston tuotelistoille. Tämän avulla saamme täyden kontrollin siihen, kuinka haluamme tulostaa tuoteryhmät ja niiden tiedot, saamme tulostettua suoraan tuoteryhmiin ryhmäkohtaisia tuotelistoja, sekä hallitsemme yksittäisen tuotteen näkymää listassa. Lisäksi olisimme voineet tulostaa alakategorioita {SubCategories} komennolla, jolle myös on mahdollista kutsua helper, joten sinnekin olisi voinut rakentaa omanlaisensa näkymän.

Jos olet lukenut tänne asti, sinulle on varmaan jo selvää, että mahdollisuudet helper-tiedostoa käytettäessä ovat rajattomat. Luonnollisesti me työskentelemme täällä ahkerasti tehdäksemme vielä toistaiseksi mahdottomasta mahdollista ja tulemme lisäämään jatkossa helper-attribuutin muihinkin komentoihin, jolloin kontrolli kaupan ulkoasuun paranee entisestään.

Kategoriat

Avainsanat