Tässä artikkelissa käydään läpi uuden teeman luonnissa useimmin tarvittavat toimenpiteet.
Aikaa ja vaivaa säästääksesi voit käyttää teeman pohjana Barebones-oletusteemaa, joka sisältää paljon hyödyllisiä työkaluja suunnittelun tueksi:
- CSS-gridi
- SASS-tyylit
- Helppokäyttöiset JavaScript-pluginit
- Font Awesome -kuvakkeet
Tutustu myös mycashflow-sync
-työkaluun, jonka avulla voit synkronoida teematiedostot vaivattomasti lokaalista ympäristöstä MyCashflow'n palvelimelle.
Käy läpi seuraavat asiat, kun aloitat uuden teeman kehittämistä:
- Luo tiedostohakemiston themes/shop-kansioon teeman juurikansio, ja anna kansiolle nimeksi luomasi teeman nimi.
Teemakansion sijainti on muotoa themes/shop/teema.
Kansion nimi näytetään MyCashflow'n hallinnassa version asetusten teemavalikossa. Jos kaupassa on käytössä useampia teemoja, niille on syytä antaa havainnolliset nimet.
- Valinnainen: Asenna ja ota teemassa käyttöön
mycashflow-sync
-työkalu.Työkalu synkronoi teeman tiedostot oman tietokoneesi ja verkkokaupan tiedostohakemiston välillä automaattisesti tai manuaalisesti. Tämä nopeuttaa ja helpottaa työskentelyäsi merkittävästi.
mycashflow-sync
-työkalun käyttö on hyödyllistä etenkin silloin, kun haluat käyttää teeman kehitykseen SASS-kieltä.
- Luo kaikki tarvittavat tiedostot sekä kansiot.
- Määritä teeman asetukset /theme.xml-tiedostossa.
Teeman asetuksissa määritellään teeman yleisiä ominaisuuksia, kuten käytössä olevat kassatyypit ja kuvien kokoluokat.
Mikäli asetustiedosto puuttuu kaupan teemasta, teemaa ei voi ottaa käyttöön verkkokaupassa.
- Sijoita yleisen sisältösivun sivupohjaan (/template.html) sopivaan kohtaan
{Content}
-tagi.Yleistä sisältösivua käytetään sivupohjana kaikille sivuille, joille ei ole omaa sivupohjaa (lisätietoja sivupohjan ohjesivulla).
{Content}
-tagi tulostaa sivun koko sisällön kaikilla tällaisilla sivuilla. Lue lisää tagin omista ohjeista.
- Lisää teemaan kaikki muutkin pakolliset tagit.
Jos teema ei sisällä pakollisia tageja, verkkokaupan ylläpito voi vaikeutua merkittävästi.
Esimerkiksi {Extensions}
-tagin puuttuminen estää kokonaan useiden laajennuksien käyttämisen verkkokaupassa.
- Valinnainen: Sijoita kaikki teeman CSS- ja JavaScript-tiedostoviittaukset omiin helper-tiedostoihinsa.
Tyylejä ja skriptejä on helppoa hallita, kun kaikki viittaukset sijaitsevat samassa paikassa. Tiedostot voit sisällyttää teemaan käyttämällä {MinifyCSS}
- ja {MinifyJS}
-tageja.
Tarvittaessa voit luoda useamman viittaustiedoston, jos haluat esimerkiksi liittää sivun <head>
- ja <body>
-osiin eri skriptit.
Jos käytät Barebones-teemaa pohjana, tyylit ja skriptit on valmiiksi organisoitu selkeästi.
Käytyäsi läpi tämän ohjeen sinulla pitäisi olla verkkokaupan teemalle toimiva pohja, jonka päälle voit alkaa rakentaa omaa kaupan teemaasi.