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ä:

  1. 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.

  2. 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ä.

  3. Luo kaikki tarvittavat tiedostot sekä kansiot.

    Katso tätä vaihetta varten lista pakollisista sivupohjista.

  4. 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.

  5. 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.

  6. 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.

  7. 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.