Helper attribuutti

Interface-dokumentaatio:

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 ko. listauksen yksittäinen elementti käyttäytyisi, eli esimerkiksi {Categories(helper:'navhelper')} komennolla navhelper.html tiedoston sisällä toimisivat kaikki samat komennot, jotka toimivat tuotelistanäkymässä.

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.

Kauppias, joka ulkoasun on tilannut, haluaisi nostaa jokaisesta päätuoteryhmästä yhden suosituimman, uusimman ja itse määräämänsä tuotteen etusivulle. Lisäksi kauppias 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

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.

Type-attribuutti

Lisäksi komennoilla on hyvä käyttää type-attribuutilla arvoa 'normal', koska tuotenostot oletuksena listataan '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 tiedosto kokonaisuudessaan alla. Tiedosto tallennetaan teema-hakemiston juureen.

<div class="Col">
        <div class="CategoryIntro">
                <h2><a href="http://www.mycashflow.fi/interface/{CategoryURL}">{CategoryName}</a></h2>
                <a href="http://www.mycashflow.fi/interface/{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 komentoa.

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 tulostuksen yksinkertaisesti {ProductListImage} komennolla, joka tulostaa tuotekuvan käyttäen tuotekuvan "lista" kokoasetusta, eikä kuvaa ympäröivä linkki osoita isoon kuvaversioon vaan tuotekorttinäkymään. Emme kuitenkaan tee näin, koska haluamme tuotelinkin sisälle muutakin kuin pelkän tuotekuvan.

Teemme 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 standardeja tukevat selaimet tulostavat tyylitiedoston content-attribuutin ja tuotteen luokkanimen avulla avainsanan, joka kertoo onko tuote suosittu, uusi vai mainostettavaksi valittu.

Enää tarvitsemme vain 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 tyylitiedoston avulla.

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

<div class="{ProductClass}">
        <div class="ProductInfo">
                <h3><a href="http://www.mycashflow.fi/interface/{ProductUrl}">{ProductName}</a></h3>
                {ProductShortDesc}
        </div>
        <a href="http://www.mycashflow.fi/interface/{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ä vielä kutsuneet uuden helper-tiedoston tuotelistoille. Tämän avulla saamme kontrollin siihen, kuinka haluamme tulostaa tuoteryhmät ja niiden tiedot, saamme tulostettua suoraan tuoteryhmiin ryhmäkohtaisia tuotelistoja, sekä hallitsemme täydellisesti 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 alaktegoriaan tai tehdä pääryhmistä alasvetovalikon, jossa on tuoteryhmien alla linkit suoraan tuotekorttiin.

Kuten varmasti tähän mennessä on jo tullut selväksi, että mahdollisuudet todellakin 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. Muistakaa ilmoittaa suunnittelemistanne kaupoista meille ja voimme lisätä referenssinne sivuillemme.