Tuotekorttinäkymässä hyödyllisiä tageja
- ProductName
- ProductShortDesc
- ProductFullDesc
- ProductCode
- ProductClass
- ProductImages
- ProductImage
- ProductImageCaption
- ProductThumbnails
- ProductBuy
- ProductAvailability
- ProductPrice
Näkymän sivupohjatiedosto
- product.html
Tuotekorttinäkymä yleisesti
Tuotekorttinäkymää käytetään tuotteen ja sen ominaisuuksien esittelyyn tuotelistaa laajemmin. Tämä on sivu, jonka pohjalta ostopäätös yleensä tehdään ja tuote siirretään ostoskoriin, mikäli ostotoimintoja ei tulosteta jo tuotelistanäkymään Helper attribuutin avulla. Yleensä tältä sivulta on hyvä löytyä vähintään yksi tuotekuva, lyhyt esittely, täysi tuotekuvaus, sekä ostotoiminnot.
Kaikki tagit jotka toimivat tuotekortissa toimivat myös tuotelistakomennoilla käytetyssä helperissä, joten tuotekortin toimintoja on myös tarvittaessa mahdollista tuoda tuotelistaan.
Tuotekuvat
Tuotekuvia on mahdollisuus lisätä tuotteelle rajattomasti ja se on hyvä ottaa huomioon sivua suunnitellessa. Tuotteella on periaatteessa kolme tuotekuviin liittyvää tagia, joista muut komennot ovat muunnelmia. Nämä tagit ovat {ProductImage}, joka tulostaa tuotteen ensisijaisen kuvan; {ProductImageCaption}, joka tulostaa tuotteen ensisijaisen kuvan kuvatekstin tai tuotteen nimen, mikäli kuvatekstiä ei ole asetettu sekä {ProductThumbnails}, joka tulostaa tuotteen kaikki kuvat <ul> elementin sisään listana. Mikäli tuotteella on vain yksi tuotekuva, {ProductThumbnails} tagi ei tulosta mitään, ellei ShowAll-attribuutin arvoksi aseteta 'true'.
Edellä mainittujen tagien muunnelmat ovat {ProductListImage}, joka eroaa ProductImage tagista siten, että oletusasetuksilla kuvakoko on pienempi, sekä linkki osoittaa tuotekorttinäkymään, eikä tuotekuvan suurennokseen ja nimensä mukaisesti tagi on suunniteltu käytettäväksi lähinnä tuotelistassa. Lisäksi on {ProductImages} tagi, joka tulostaa käytännössä {ProductImage}, {ProductImageCaption} ja {ProductThumbnails} tagit peräkkäin.
Oletuksena kaikki tuotekuvat tulostetaan linkin sisään, joka osoittaa suoraan suurimpaan kuvaversioon (poikkeuksena em. {ProductListImage} tagi) . Tätä on mahdollista muuttaa Target-attribuuttia käyttämällä. Asettamalla attribuutille arvon 'browser', tuotekuvat linkitetään erilliseen tuotekuvanäkymään, joka toimii muilta osin identtisesti tuotekorttinäkymän kanssa, mutta linkki osoittaa "/product/ID/Nimi/" osoitteen sijasta "/product-images/ID/Nimi/Tuotekuva.jpg/" osoitteeseen, joka kertoo tuotekuvanäkymälle, mitä kuvaa käytetään päätuotekuvana. Tämän avulla on mahdollista toteuttaa toimiva tuotekuvaselain ilman javascriptiä ja ilman että käyttäjä tuntee poistuvansa tuotekorttisivulta.
Lisäksi kaikilta tuotekuvilta on mahdollista poistaa linkki kokonaan asettamalla Link-attribuutille arvo 'false'. Tämä on hyödyllistä, jos esimerkiksi haluaa tulostaa suoraan kaikki kuvat suurennoksina tuotekorttiin, jolloin linkki suurennokseen on turha. Esimerkin kaltaisen tulostuksen voisi tehdä tagilla {ProductThumbnails(link:'false',imagesize:'big',showall:'true')} joka tulostaa kuvat listaan ilman linkkiä, isossa koossa, sekä tulostaa tuotekuvalistan, vaikka tuotteelle olisi asetettu vain yksi kuva.
Saatavuus
Mikäli tuotteelle on asetettu varastosaldo, on mahdollista ilmoittaa asiakkaille onko tuote saatavilla vai ei. Normaalisti tieto tulostetaan {ProductAvailability} tagilla. Jos tuotteella on variaatiota, saatavuustieto tulee variaation yhteyteen ostolomakkeelle.
Tuotteen lisääminen ostoskoriin
Tuote lisätään ostoskoriin lomakkeella, joka tulostetaan {ProductBuy} tagilla. Lomaketta ei tulosteta, mikäli tuotteen varastosaldo on 0 ja tuotteen myynti on määrätty lopetettavaksi tuotteen loppuessa varastosta tai mikäli tuotteella ei ole myyntihintaa. Ostolomake tulostetaan form-elementin sisään, jolla on luokkanimi "BuyForm". Ostolomakkeelta löytyvät aina määrä-input, jonka oletusarvo on "1", sekä button-elementti, jolla tuote lisätään ostoskoriin. Napilla on lisäluokkanimi "AddToCart". Muilta osin lomake noudattaa MyCashflow'ssa käytettäviä lomakesääntöjä.
Mikäli tuotteella on variaatioita, valittavissa on Variations-attribuutin avulla tulostetaanko variaatiot select- vai radio-elementtinä (attribuutin arvot ovat 'radio' tai 'select'). Radio-elementtejä suositellaan käytettäväksi, mikäli variaatioille on tarpeen asettaa oma hinta, varastosaldo, sekä poikkeava toimitusaika tuotteen loppuessa. Tämä siksi, koska select-elementissä kaikki tieto tulostuu yhdelle riville, jolloin select-elementin täytyisi olla suhteettoman leveä. Ongelmia aiheuttaa myös Internet Explorer, joka katkaisee aina option-elementin siitä, missä select-elementti loppuu. Radiolistassa variaation oma hinta tulostetaan label-elementin sisään ja saatavuus- sekä toimitusaikatieto tulostetaan label-elementin jälkeen alkavaan p-elementtiin, jolla on luokkanimi "FormHelp".