Oletusteema ja tuotekuvat

Osa teistä on kaivannut jo MyCashflow oletusteemaa, joka on valittavana jokaisen kaupan teemaksi mutta sen tiedostot eivät näy tiedostonhallinnassa. Laitan nyt tämänhetkisen version jakoon, jotta voitte vähän tutkia, mitä se on syönyt ja samalla vähän opiskella Interface-rajapinnan käyttöä. Eritoten kannattaa kiinnittää huomiota product.html -tiedoston tuotekuvaskriptiin, joka vaihtaa tuotekuvan ja kuvatekstin sivulla. Skripti ei ole erityisen…

Osa teistä on kaivannut jo MyCashflow oletusteemaa, joka on valittavana jokaisen kaupan teemaksi mutta sen tiedostot eivät näy tiedostonhallinnassa. Laitan nyt tämänhetkisen version jakoon, jotta voitte vähän tutkia, mitä se on syönyt ja samalla vähän opiskella Interface-rajapinnan käyttöä.

Eritoten kannattaa kiinnittää huomiota product.html -tiedoston tuotekuvaskriptiin, joka vaihtaa tuotekuvan ja kuvatekstin sivulla. Skripti ei ole erityisen hienostunut, mutta se hoitaa hommansa. Sen lisäksi kuvaa klikkaamalla tuotekuvien suurin versio aukeaa hieman muokattuun Thickboxiin. Molemmat skriptit ovat luonnollisesti vapaasti käytettävissänne omissa projekteissanne. Voitte tietysti myös käyttää jQueryn sijasta Prototypeä ja Lightboxia, tai mikä teille sattuu olemaan luontevaa. Siinä piilee MyCashflow’n hienous. Kun alustana toimii standardi xhtml ilman mitään ylimääräistä, sinun on mahdollista toteuttaa verkkokauppasi täysin omalla tavallasi.

Voit tietysti toteuttaa tuotekuvien selauksen ilman javascriptiakin. Tätä varten meillä on olemassa kuvaselain -sivupohja product-images.html, johon voit linkittää {ProductImages}, {ProductImage}, tai {ProductThumbnails} komennosta attribuutilla target:'browser', jolloin tuotekuvalinkki osoittaa kuvaselain-sivupohjaan tuotekuvan sijasta siten, että klikattu kuva on sivulla pääkuvana. Täällä voit käyttää samoja Interface-komentoja kuin tuotekortissakin, mutta halutessasi voit kuvien selaamista varten riisua kaiken ylimääräisen pois.

Lisäksi attribuutilla imagesize:'mini', 'list', 'normal' tai 'big' voit valita missä koossa kuvat haluat näyttää. Tämän voit yhdistää toiseen attribuuttiin link:'true' tai 'false', jolla saat poistettua linkin tuotekuvista. Molemmat attribuutit toimivat tuotelistausten helpereissä, kuten myös tuotekortin tuotekuvassa, sekä pienennöksissä. Parhaimmillaan nämä toimivat yhdessä juuri kuvaselain -sivupohjassa, jossa voit esimerkiksi listata kaikki tuotteen kuvat suurimmassa asetetussa koossa yksinkertaisesti komennolla {ProductThumbnails(link:'false',imagesize:'big')}, joka tulostaa kaikki isot kuvat ilman linkkejä listaan. Tästä on helppo sitten css:llä ja vaikka ripauksella javascriptia tehdä oman näköisensä tuotekuvalista. Mahdollisuuksia on lähes rajattomasti.

Lopuksi tiedustelisin, että mitä muuta materiaalia Interface-rajapintaa koskien te kaipaisitte suunnittelun tueksi?

  • Tyydyin aluksi vain kääntämään oletusteeman värit päinvastaisiksi, joten en sen kummemmin vielä ole perehtynyt Interfacen saloihin, mutta ihan selkeältä systeemiltä tuo vaikuttaa. Kunhan aika sen sallii, niin tarkempi testaus koittaa.