MyCashflow sisältää oletusarvoisen sähköpostiteeman MyCashflow 2018, jota on mahdollista muokata ja räätälöidä verkkokaupan omiin tarpeisiin sopivaksi. Tässä artikkelissa käydään läpi oletussähköpostiteeman asentaminen ja käyttö räätälöintien pohjana.

Oletussähköpostiteema on moderni ja responsiivinen, ja sen toimivuutta eri laitteilla ja sähköpostiohjelmilla on testattu perusteellisesti.

Oletussähköpostiteema on aina valittavissa versioiden asetuksissa. Tällöin kuitenkin valitaan järjestelmän sisäinen oletusteema, jonka ulkoasua ja rakennetta ei voi muokata.

Oletussähköpostiteema sisältää myös paljon hyödyllisiä työkaluja ulkoasun kehittämiseen. Voitkin ladata muokattavan version oletussähköpostiteemasta ja kehittää sen pohjalta verkkokauppasi brändin kanssa yhteneväisen sähköpostiteeman.

Oletussähköpostiteeman lataaminen ja asentaminen

Voit käyttää MyCashflow 2018 -sähköpostiteemaa pohjana omille sähköpostiteemoillesi. Teema sisältää Foundation for Emails -kehitystyökalut, jotka helpottavat teeman kehittämistä.

Alla käydään läpi oletussähköpostiteeman lataaminen, valmistelu räätälöintipohjaksi sekä asentaminen verkkokauppaan:

  1. Lataa ja alusta oletussähköpostiteema kehitystä varten suorittamalla terminaalissa seuraavat komennot:
    git clone https://github.com/MyCashflow/Default-Email-Templates.git
cd Default-Email-Templates
npm install

    Tämän jälkeen teema löytyy kansiosta Default-Email-Templates ja on valmis muokattavaksi.

  2. Suorita oletussähköpostiteeman kansiossa build-komento:
    npm run build

    build-komento luo teeman Foundation for Emails -pohjasta HTML-version, jota voidaan käyttää verkkokaupassa.

    Komento luo sähköpostiteeman kansioon dist/-kansion, joka sisältää teeman julkaistavaksi kelpaavan HTML-version ja kaikki muut teeman käyttämät tiedostot (CSS-tyylit, kuvat jne.).

  3. Luo verkkokaupan tiedostohakemistoon uusi kansio muokattavalle sähköpostiteemalle.

    Voit käyttää kansion luomiseen MyCashflow'n tiedostoselainta, jonka löydät verkkokaupan hallinnan sivulta Ulkoasu > Tiedostoselain. Sähköpostiteemat sijoitetaan kansioon themes/email/

  4. Lähetä dist/-kansion koko sisältö luomaasi sähköpostiteeman kansioon.

    Voit lähettää tiedostot käyttämällä tiedostoselainta, FTP-työkaluja (esim. Filezilla) tai mycashflow-sync-työkalua.

  5. Ota sähköpostiteema käyttöön haluamassasi versiossa verkkokaupan hallintatyökalun Ulkoasu > Versiot -sivulla.

    Lue lisää sähköpostiteemojen asentamisesta.

  6. Tallenna version asetukset.

Nyt oletussähköpostiteema on käytössä valitsemassasi kauppaversiossa.

Oletussähköpostiteeman muokkaaminen

Vaatimukset

Oletussähköpostiteeman räätälöinti edellyttää, että tietokoneellesi on asennettu git-versionhallinta ja npm-pakettienhallinta.

Voit käyttää sähköpostiteeman muokkaamiseen mitä tahansa tekstieditoria, mutta esimerkiksi Visual Studio Codeen on saatavilla lisäosia, jotka helpottavat HTML/SCSS-kehitystyötä muun muassa automaattisen täydennyksen ja koodivihjeiden avulla.

Kun olet tehnyt haluamasi muutokset oletussähköpostiteemaan, teeman kansiossa pitää suorittaa build-toiminto, jotta tehdyt muutokset tulevat voimaan. Build pitää sisällään seuraavat toimenpiteet:

Build suoritetaan teemakansiossa seuraavalla komennolla:

npm run build

Buildin suorittamisen jälkeen näet verkkoselaimessa sähköpostiteeman esikatselun. Esikatselu ei kuitenkaan käsittele Interface-tageja, joten sähköpostien sisältö ei näy esikatselussa. Voit testata sähköpostien ulkoasua tarkemmin ottamalla sähköpostiteeman käyttöön esimerkiksi verkkokaupan kehitysversiossa.

Kun build on suoritettu, voit lähettää päivittyneet tiedostot verkkokaupan tiedostohakemistoon. Voit käyttää tähän FTP-ohjelmaa tai mycashflow-sync-työkalua, joka on suunniteltu helpottamaan ulkoasumuutosten tekemistä MyCashflow-verkkokauppoihin.

Foundation for Emails

MyCashflow'n sähköpostipohja käyttää Foundation for Emails -frameworkia, jonka avulla sähköpostien rakenne ja ulkoasu voidaan toteuttaa monilla tavoilla.

Tutustu myös Foundation for Emails -ohjeisiin

Inky-merkkauskieli

Merkittävä ero tavallisiin HTML-sivupohjiin verrattuna on, että Foundation for Emails käyttää omaa Inky-merkkauskieltään sähköpostipohjien toteuttamiseen. Tämän tarkoitus on, ettei suunnittelussa tarvitse käyttää <table>-elementtejä, vaan Foundationin omia selkeitä ja helppokäyttöisiä elementtejä.

Esimerkiksi seuraavan merkkauksen avulla luodaan rivi ja sen sisään kahdessa sarakkeessa sisältöä:

<container>
    <row>
        <columns>Sisältöä 1</columns>
        <columns>Sisältöä 2</columns>
    </row>
</container>

Yllä oleva merkkaus muunnetaan buildissa HTML-taulukoksi, jossa on yhdellä rivillä kaksi saraketta.

Tutustu Inky-merkkaukseen Foundationin ohjeissa

Panini-template-kieli

Foundationin Panini-template-kielellä voit lisätä sähköpostitiedostoihin muuttuvaa sisältöä, ehtolauseita ja silmukoita sekä muita ohjelmoinnista tuttuja rakenteita.

Oletussähköpostiteemassa on esimerkiksi käytetty Paninia hakemaan sähköpostipohjiin toistuvia osioita, kuten header ja footer. Alla näet esimerkin osien hakemisesta sivulle.

Vaihtoehtoisesti voit lisätä sähköposteihin osia MyCashflow'n {Helper}-tagin avulla.

Paninin avulla voit myös luoda sivumuuttujia, joihin voit tallentaa tagien tulostamaa sisältöä. Sivumuuttujat määritetään sivupohjan alussa seuraavasti:

---
subject: '{OrderEmailTitle}'
---
                
{{> header }}
                
<wrapper class="Primary">
    <spacer size="10"></spacer>
    <container class="Block">
        <h1>{{ subject }}</h1>
        <p>
            {{> greeting }}
            {OrderEmailMessage}
        </p>
    </container>
    <spacer size="20"></spacer>
</wrapper>

Tutustu Paninin käyttöön Foundationin ohjeissa

mycashflow-sync-työkalun käyttäminen sähköpostiteemoissa

Jos haluat käyttää mycashflow-sync-työkalua yhdessä oletussähköpostiteeman kanssa, sinun on suoritettava build ja synkronointi eri pääteikkunoissa.

Rajoitukset

  • mycashflow-sync ei käännä sähköpostiteeman SASS-tiedostoja CSS-kielelle. Sähköpostiteeman build-komento hoitaa SASS-tyylien kääntämisen.
  • Browsersync ei toimi sähköpostiteemojen kehittämisessä (työkalu ei käsittele Interface-tageja, vaan näyttää ne sellaisenaan).

Näin voit käyttää mycashflow-sync -työkalua sähköpostipohjien synkronointiin:

  1. Avaa yhteen pääteikkunaan mycashflow-sync watch
  2. Aja toisessa ikkunassa aina tarvittaessa npm run build

    Aina buildin valmistuttua mycashflow-sync lähettää valmistuneet sivupohjat synkronointiasetuksissa määritettyyn kauppaan.