MyCashflow blogi

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 16.2.2011 kategoriaan Interface-merkkaus Verkkokaupan kehittäminen avainsanoilla Interface tagit: 0

RSS syötteet verkkokaupan tuotteista

RSS syötteet ovat tiedostoja, joita käytetään usein päivittyvän sisällön seuraamiseen. Verkkokaupan tapauksessa RSS syötteiden avulla asiakkaat voivat helposti seurata nettikauppaan saapuvia uusia tuotteita omalla lukuohjelmallaan, joka tarkistaa aika ajoin syötteen uuden sisällön varalta.

MyCashflow tarjoaa RSS syötteen uusimmista tuotteista osoitteilla, jotka ovat muotoa

• verkkokaupan uusimmat http://www.pakkaustarvikkeita.fi/feed/
• tuoteryhmän uusimmat http://www.pakkaustarvikkeita.fi/feed/category/14/painetut-pakkausteipit (jossa 14 on tuoteryhmän numero eli itse tuoteryhmä on osoitteessa http://www.pakkaustarvikkeita.fi/category/14/painetut-pakkausteipit)
• tuotemerkin uusimmat http://www.pakkaustarvikkeita.fi/feed/brand/3/

Näitä osoiterakenteita ei tarvitse tietenkään muistaa vaan voit eri Interface tageja sivupohjissa käyttämällä tulostaa linkityksen RSS syötteeseen. Sinulla on käytössä kaksi eri tagia:

Voit käyttää sivun <head> osassa {Feed} tagia, joka kertoo selaimelle RSS syötteen osoitteen <link> tagilla:

<link rel="alternate" title="Pakkaustarvikkeita.fi - Painetut pakkausteipit" href="http://www.pakkaustarvikkeita.fi/feed/14/painetut-pakkausteipit" type="application/rss+xml" />

Jos haluat tehdä ulkoasuun erillisen linkin RSS feedin, niin käytä linkin osoitteesa {FeedURL} tagia joka palauttaa pelkästään feedin osoitteen. Esimerkiksi näin:

<a href="{FeedURL}" class="RSSLink">Nappaa tästä RSS syöte</a>

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

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.

Miska kirjoitti 17.3.2009 kategoriaan Interface-merkkaus avainsanoilla Interface tagit Ladattavat teemat template-tiedostot: 0

Uudet ladattavat teemat ja Interface-rajapinnan päivitykset

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.

Theme, eli teeman nimi

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.

Helper-komento, ei siis komennon attribuutti

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.

Width- ja height-attribuutit kuvilla

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:

• Logo
• ProductImage
• ProductThumbnails
• ProductListImage
• CategoryImage

Oma 404-virheilmoitus nyt käytettävissäsi

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.

Lataa uudet MyCashflow ulkoasuteemat:

• Oletusulkoasu
• MyCashflow demokaupan ulkoasu