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.

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

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.