Temaer: opprett og rediger dine egne temamaler

Temaer er en av de eldste sidene i Shoporama-administrasjonen. Her lager du dine egne versjoner av enkelte filer i temaet ditt og lar dem overskrive de tilsvarende filene i designet du allerede bruker. Dette er samtidig Shoporamas opprinnelige verktøy for splittesting.

Viktig å merke seg først: siden fungerer bare hvis nettbutikken din kjører Smarty 2. Hvis butikken din kjører Smarty 4, finnes ikke menypunktet i det hele tatt, og siden har ingen effekt. Gå i så fall direkte til «Kjører du Smarty 4?» nedenfor.

Slik ser du om nettbutikken din kjører Smarty 2 eller Smarty 4

Smarty er malspråket som temaet ditt er skrevet i, altså koden som henter produktnavn, priser og bilder inn på sidene kundene dine ser. Det finnes to versjoner: den gamle Smarty 2 og den nåværende Smarty 4.

1. Klikk på Konto i menyen til venstre, utvid Webshop og velg Generelt.
2. Finn feltet «Smarty-versjon». Der står det enten 2 eller 4 (fungerer muligens ikke med gamle maler).

Hvis feltet er grått, står det «Styrt av temaet (Smarty 4)», og da bestemmer temaet selv hvilken versjon som skal brukes. Hvis du vil bytte fra 2 til 4, må du først lese veiledningen for å bytte til Smarty 4. Hvis du bruker Smarty 2, står det også «Du bruker Smarty 2 » øverst på siden «Temaer».

Bruker du Smarty 4? Da må du gå et annet sted

På nettbutikker med Smarty 4 er «Temaer» bevisst fjernet fra menyen. Smarty 4 leser kun temaets filer fra nettbutikkens temamappe, så et tema opprettet her ville uansett aldri blitt brukt. Det du pleide å bruke siden til, gjør du i stedet her:

• Butikk, Design, Kodeditor for å redigere temaets HTML-, CSS- og JavaScript-filer. Se veiledningen til kodeditoren.
• Butikk, Design, Sidedesigner for å bygge sider av ferdige blokker, helt uten kode.
• Butikk, Design, A/B-test for å teste to versjoner av en side mot hverandre. Den nye A/B-testen fungerer sammen med Sidedesigneren, fordeler trafikken etter vekting og kan stoppe seg selv når resultatet er tydelig.
• Butikk, Design, Temainnstillinger for farger, logoer og de valgene temaet selv tilbyr. Se veiledningen til temainnstillinger.
• Butikk, Design, Stylesheet for egne CSS-justeringer, og Butikk, Design, Tekster for de faste tekstene.

Hva et «tema» betyr her, og hvor du finner siden

Ordet «tema» brukes to steder i admin, og de betyr ikke det samme. Butikk, Design, Tema er selve designet ditt, altså alle filene nettbutikken er bygget av, og oversikten over temaer på Shoporama gir et overblikk. Konto, Nettbutikk, Temaer er derimot en liten samling enkeltfiler som ligger på toppen av designet. Bare filene du selv legger inn, blir overskrevet, og alt annet kommer fra det vanlige temaet ditt.

Filene lagres i nettbutikkens database og ikke som egentlige filer, så de blir ikke overskrevet den dagen temaets filer legges ut på nytt. Det er nettopp dette som gjør siden nyttig: du kan prøve ut en endring på ett sted uten å røre resten av designet.

Du finner siden under Konto, Nettbutikk, Temaer, mellom robots.txt og Tilbakestill. Oversikten har tre kolonner: «Navn» er ditt eget navn på temaet, «I bruk» står på «Ja» for det aktive temaet og «Nei» for resten, og blyantikonet åpner temats filliste. Nederst finner du knappen «Opprett nytt tema».

Slik oppretter du et tema

1. Klikk på Opprett nytt tema. Siden heter Nytt tema.
2. Fyll ut Navn. Velg noe du vil kjenne igjen om tre måneder, for eksempel «Test av kjøpsknapp».
3. Hvis du vil starte fra en eksisterende fil, merker du den av i «Eller kopier fra eget tema» (valgfritt). Listen viser temamappene du eller utvikleren din har lagt opp, og e-postfiler er merket med (e-post).
4. Klikk på «Opprett». Du kommer umiddelbart til temafilelisten.

Feltet «Kopier fra tema» (valgfritt) rett over er tomt for alle nettbutikker i dag, og det er ikke noe du gjør feil. Hvis du ikke har lagt opp temafiler selv, oppretter du bare temaet tomt og legger til filene etterpå.

Filstaten i temaet

Filisten heter «Templates». Øverst kan du endre temaets «Navn», og under det ligger tabellen med filene:

• Filnavn er det avgjørende feltet. Filen overskriver den filen i temaet ditt som har nøyaktig samme navn, f.eks. add_to_basket.html. Hvis du skriver inn et navn som temaet ditt ikke bruker, skjer det ingenting.
• Navn er din egen etikett, f.eks. «Original» eller «Versjon B». Den vises kun i admin.
• «Låst» viser om filen er låst som den versjonen alle skal se. Mer om dette i avsnittet om splittest.
• «Endret» er dato og klokkeslett for den siste lagrede endringen.
• Blyantikonet helt til høyre åpner filen for redigering, og haken helt til venstre brukes av kopier- og slett-knappene nedenfor.

Knappene nederst: «Lagre» lagrer filen og går tilbake til oversikten. «Opprett ny fil i temaet» åpner siden for en ny fil. «Kopier de valgte filene» lager en kopi av hver merket fil, med samme filnavn og navn som originalen. «Slett de valgte filene» sletter de merkede filene etter et «Sikker?». «Bruk dette temaet » aktiverer temaet og vises bare når det ikke allerede er i bruk. «Slett hele temaet » fjerner temaet og alle dets filer.

En viktig detalj: avmerkingsboksene brukes av flere knapper. Hvis du har satt en hake ved en fil og klikker på «Lagre» eller «Bruk dette temaet», blir filen også kopiert. Fjern derfor avmerkingsboksene når du er ferdig med å kopiere, ellers vokser listen med duplikater.

Husk at et tema ikke har noen effekt før du har klikket på «Bruk dette temaet». Dette er den klassiske feilen. Det skal stå «Ja» i kolonnen «I bruk». Det kan bare være ett aktivt tema om gangen, og det gamle temaet blir liggende, slik at du kan bytte tilbake.

Opprett og rediger en fil

Siden «Opprett ny fil i tema» har feltene «Filnavn» og «Navn», samt de samme to kopieringslistene som ved opprettelsen av temaet. Hvis du lar «Filnavn» stå tomt, blir filen opprettet som noname.html med navnet «No name».

Selve redigeringen foregår på siden «Rediger mal», der du endrer «Filnavn», «Navn» og det store HTML-feltet. «Lagre» lagrer og går tilbake til fillisten, «Lagre og fortsett å redigere» holder deg på siden, og «Slett» fjerner filen etter en bekreftelse.

Det finnes ingen «Angre»-funksjon og ingen versjonshistorikk. Når du lagrer, forsvinner den gamle versjonen, så kopier innholdet over til en tekstfil før du redigerer. Endringen trer i kraft umiddelbart. Hvis du ikke ser den, kan du prøve å fornye siden med Cmd+Shift+R eller Ctrl+Shift+R. I en live-butikk kan ferdige sider dessuten ligge lagret i opptil fire timer.

Split-test: to versjoner av samme fil

Det er her siden virkelig tjener seg inn. Hvis du legger inn to eller flere filer med samme filnavn i samme tema, fordeler nettbutikken besøkende mellom dem. Valget huskes i en uke, slik at den enkelte ikke ser at knappen skifter underveis.

1. Finn filen som inneholder det du vil teste. Hvis det er teksten på kjøpsknappen, er det vanligvis add_to_basket.html.
2. Legg originalen inn i temaet, og gi den navnet «Original».
3. Sett en hake ved den, klikk på «Kopier de valgte filene» og gi kopien navnet «Versjon B».
4. Åpne «Versjon B», endre den ene tingen du vil teste, og lagre. Hvis du endrer flere ting, vet du ikke hva som fungerte.
5. Klikk på «Bruk dette tema», og la testen kjøre til du har nok bestillinger til å våge å trekke noen konklusjoner.

Kolonnen «Låst» viser den versjonen alle skal se, uavhengig av fordelingen. I den nåværende administrasjonsgrensesnittet finnes det ikke noe felt for å aktivere denne, og hvis du lagrer en fil, settes den til «Nei». Hvis du vil stoppe en test og beholde vinneren, sletter du derfor bare taperen.

Har du få besøkende, tar det lang tid å få et resultat du kan stole på, og da er tiden bedre brukt på å skaffe trafikk. Den lagrede versjonen av sidene kan dessuten gjøre fordelingen mindre presis. Mer i veiledningen til splittest i Shoporama.

Til deg som er teknisk anlagt

Filene er Smarty-maler, ikke ren HTML. Hos Shoporama skrives Smarty med spisse parenteser utenom de krøllete:

<{$product->getName()}>

<{if $product->getPrice()}>
    <p><{$product->getPrice()}> kr.</p>
<{/if}>

Hver <{if}> må ha en <{/if}>. Glemmer du én, får du vanligvis en feilside i hele nettbutikken. Variabler og metoder er beskrevet i Variabler i et Shoporama-tema. Det er verdt å kjenne til tre forskjeller mellom de to Smarty-versjonene:

• Filene ligger på forskjellige steder. I et Smarty 2-tema ligger malene løst i temamappen, f.eks. invoice.html. I et Smarty 4-tema ligger de i undermapper, f.eks. templates/mails/invoice.html.
• Smarty 4 er strengere. Derfor står det bokstavelig talt «fungerer muligens ikke med gamle maler» i rullegardinmenyen. Gamle maler kan inneholde skrivemåter som må rettes først.
• Databasefiler finnes kun i Smarty 2. Temasiden lar sine filer gå foran temaets egentlige filer. Denne mekanismen finnes ikke i Smarty 4, der alle nye funksjoner bygges inn.

Ofte stilte spørsmål

Jeg finner ikke «Temaer» i menyen min i det hele tatt. Hvor er den?

Da kjører nettbutikken din på Smarty 4, og denne menyen er bevisst skjult. Sjekk dette under Konto, Nettbutikk, Generelt i feltet Smarty-versjon. Hvis du skal redigere temaets filer, bruker du i stedet Butikk, Design, Kodeditor.

Sletter jeg mitt egentlige design hvis jeg sletter et tema her?

Nei. Et tema her inneholder kun de enkeltfilene du selv har lagt inn. Hvis du sletter det, bruker nettbutikken igjen de tilsvarende filene fra ditt vanlige tema, og selve designet forblir uendret.

Hvorfor er listen «Kopier fra tema (valgfritt)» tom?

Den boksen viser ikke lenger noe innhold, så hopp over den. Hvis du selv har lagt ut temafiler, finner du dem i boksen nedenfor, «Eller kopier fra eget tema (valgfritt)».

Jeg fikk plutselig to helt identiske filer i listen. Hva skjedde?

Avmerkingsboksene brukes av flere knapper. Hvis det er en avmerking ved en fil, og du klikker på «Lagre» eller «Bruk dette temaet», blir filen kopiert, akkurat som om du hadde klikket på «Kopier de valgte filene». Slett duplikatet og fjern avmerkningene.

Kan jeg angre en endring dagen etter?

Nei, det lagres ingen tidligere versjoner. Kopier alltid innholdet til en tekstfil før du retter. Hvis skaden er skjedd uten at du har laget en kopi, sletter du filen fra temaet, så bruker nettbutikken originalen igjen.

Overlever endringene mine en oppdatering av temaet?

Ja. Filene ligger ikke i temamappen, så de blir ikke overskrevet når temafilene lastes opp igjen. Derimot kan de forårsake problemer hvis det nye temaet har endret filen fundamentalt, så sjekk dem etter en større oppdatering.

Kan jeg rulle ut den samme endringen i alle nettbutikkene mine samtidig?

Nei. Temaer og filer tilhører den nettbutikken du har valgt i admin, så det må gjøres på nytt i hver nettbutikk. Hvis du har mange nettbutikker med samme tema, er det mer holdbart å få rettelsen inn i selve temaet.

Jeg tester splittesten min, men ser alltid den samme versjonen. Er den ødelagt?

Sannsynligvis ikke. Valget ditt av versjon lagres i en uke, så du ser den samme versjonen inntil du sletter informasjonskapsler eller åpner nettbutikken i et privat vindu.

Jeg har rettet en fil, men det skjer ingenting ute i nettbutikken. Hva nå?

Sjekk i denne rekkefølgen: står det «Ja» i kolonnen «I bruk», er filnavnet stavet nøyaktig slik som filen i temaet ditt, og har du prøvd en hard omlasting? Er du fortsatt i tvil, så skriv til support@shoporama.dk med navnet på filen.