kirjoitti 31.3.2009 kategoriaan Interface-rajapinta avainsanoilla esimerkki helper interface-komennot Interface-rajapinta: 0
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.
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ä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.
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.
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.
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}.
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.
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.
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>
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.
<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">€</span></p>
{ProductBuy}
</div>
</div>
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.
kirjoitti 17.3.2009 kategoriaan Interface-rajapinta avainsanoilla interface-komennot ladattavat teemat template-tiedostot: 0
Tänä aamuna nakkasimme linjoille uusimmat ladattavat teemat, eli oletusulkoasun ja demokaupan ulkoasun. Teemojen näkyvät muutokset ovat kohtalaisen vähäisiä, mutta kehittäjän kannalta erittäin hyödyllisiä. Uudet Interface-komennot nimittäin helpottavat teemojen käyttöönottoa ja organisointia huomattavasti.
Uusi {Theme} komento tulostaa aktiivisen teeman kansion nimen, joten uudet teemat saat käyttöösi, kun vain lataat tiedostot omaan kansioonsa kaupan alla ja aktivoit teeman.
Lisäksi tuliterä ja paljon toivottu {Helper(file:’header’)} komento on nyt täällä ja mikä apu se onkaan! Oheinen komento kutsuu teeman hakemistosta helper.html-tiedoston ja sisällyttää sen template-tiedostoon. Komennolla on vain attribuutti file ja se on pakollinen. Mikäli tiedostoa ei löydy tai attribuuttia ei ole annettu, komento ei palauta mitään.
Kuvia tulostavat Interface-komennot ovat saaneet laajalla rintamalla avukseen width- ja height-attribuutit, joten hallinnassa määritetyt kuvakoot eivät enää ole ainoat kokovaihtoehdot käytössäsi. Voit siis käyttää samaa kuvaa vaihtelevasti eri kokoisena, mikäli hallinnan kokovaihtoehdot loppuvat kesken. Attribuutteihin syötetään koko pikseleinä, ilman hipsukoita: {ProductImage(width:480,height:360)}. Tällä hetkellä attribuutteja tukevat seuraavat komennot:
Lisäsimme myös erittäin hyödyllisen valinnaisen template-tiedoston, 404.html:n. Tiedosto on juuri sitä mitä nimi antaa ymmärtää, eli tiedostoa käytetään, mikäli pyydettyä sivua ei kaupan alta löydy. Oheisten ladattavien teemojen 404-sivuille tulostetaan ilmoitus ja hakulomake, jolla haluamaansa sivua voi etsiä, mutta se ei suinkaan ole ainoa vaihtoehto, sillä tiedostossa toimivat samat komennot kuin kaupan yleisessä sivupohjassa.