Kodredigeraren: redigera temafiler direkt i admin

Kodredigeraren är Shoporamas inbyggda redigerare för temafiler. Med den kan du öppna, redigera, skapa och ta bort filerna i ditt tema direkt i webbläsaren, utan att behöva installera program eller logga in via SFTP. Det är det snabbaste sättet att göra en liten ändring i en mall, en bit CSS eller ett automatiskt e-postmeddelande.

Observera: detta är en teknisk sida. Du arbetar direkt i de filer som din webbshop bygger på, och det finns varken versionshistorik eller en ångra-knapp på servern. Ett enda saknat tecken kan omedelbart leda till en felsida för alla dina kunder. Om du inte har arbetat med HTML, CSS eller Smarty tidigare bör du hellre använda de vanliga designverktygen längre ner i artikeln, eller låta din temautvecklare göra korrigeringen.

Var hittar du kodredigeraren

Klicka på Butik i menyn till vänster, fäll ut Design och välj Kodredigerare. Sidan består av en filförteckning till vänster och själva redigeraren till höger.

Vad du kan redigera

Kodredigeraren visar de teman som finns i din egen butiks temamapp, det vill säga de teman som du eller din utvecklare själv har lagt upp via SFTP. Om du har flera teman visas varje tema som en egen grupp med temats namn som rubrik. Endast filer med dessa fem filändelser visas i listan:

• .html är temats mallar, det vill säga de sidor som dina kunder ser
• .css styr färger, typsnitt och layout
• .js är JavaScript
• .txt och .ini är text- och inställningsfiler

Bilder och typsnitt visas inte; dessa laddar du upp under Butik, Design, Filer. Mallarna finns vanligtvis i en mapp som heter templates, så templates/product.html är produktsidan, templates/basket.html är varukorgen och templates/mails/invoice.html är orderbekräftelsen. Namnen kan variera något från tema till tema. Om du endast ska redigera texterna i e-postmeddelandena, läs först guiden för e-postmallar i ditt tema.

Viktigt: Shoporamas inbyggda standardteman och teman som köpts i temabutiken visas inte i kodredigeraren, eftersom de ligger utanför din butiks egen temamapp. Om du vill kunna redigera något av dem måste du först ha laddat upp din egen kopia av temat via SFTP.

Så här är sidan uppbyggd

• Filförteckningen till vänster, med fältet ”Filtrera filer...” högst upp. Om du till exempel skriver ”product” visas endast filer som innehåller ”product” i namnet.
• ”Skapa ny fil” längst ner i varje temagrupp.
• Ett hänglås bredvid ett filnamn betyder att filen inte är skrivbar och därför inte kan öppnas. Längst ner står förklaringen: ”Filen är inte skrivbar – ställ in behörigheterna via SFTP.”
• Redigeringsfältet med radnummer och färgkodning. CSS- och JavaScript-filer får sin egen färgkodning, medan alla andra filer visas med HTML-färgkodning.
• Knapparna Spara, Ta bort och Helskärm, samt en status som kort visar ”Sparat!” eller ”Fel, din fil sparades inte!”.

Så här sparar du en ändring

1. Klicka på filnamnet i listan. Innehållet hämtas och filnamnet visas ovanför redigeringsfältet.
2. Redigera det du vill ändra.
3. Klicka på Spara, eller tryck på Cmd+S på Mac och Ctrl+S på Windows.
4. Bekräftelsen ”Sparat!” blinkar kort. Om det istället står ”Fel, din fil sparades inte!”, har ändringen inte sparats och du måste kontrollera om filen är skrivbar.

Det finns varken någon utkast- eller publiceringsknapp. När du klickar på Spara sparas filen omedelbart, och webbutiken använder den nya versionen från nästa sidvisning. Om du byter fil utan att ha sparat frågar redigeraren: ”Du har osparade ändringar. Vill du fortsätta?”. Men om du stänger fliken eller laddar om sidan försvinner ändringarna utan förvarning.

Skapa och ta bort filer

Längst ner i varje temagrupp finns ”Skapa ny fil”. Du ombeds att ange ett filnamn, och du kan även ange en sökväg, t.ex. templates/min-side.html, om filen ska ligga i en undermapp som redan finns. Filen skapas tom och listan laddas om. Knappen ”Ta bort” tar bort den fil du har öppen. Du får först frågan ”Är du säker?”, och därefter är filen borta. Det finns ingen papperskorg, och filen kan inte återställas från Shoporama i efterhand.

Finns det versionshantering eller ångra-funktion?

Nej. Kodredigeraren sparar inte tidigare versioner, och det finns ingen historik att gå tillbaka till. När du sparar skrivs den gamla versionen över, och när du raderar är filen borta. Det är den viktigaste skillnaden mellan kodredigeraren och resten av admin-gränssnittet, där du vanligtvis kan ångra eller återställa. Ångra med Cmd+Z eller Ctrl+Z fungerar endast inuti redigeraren, så länge sidan inte har laddats om.

Se därför till att säkra dina ändringar innan du gör några ändringar:

• Markera hela filens innehåll, kopiera det och spara det i en textfil på din egen dator.
• Gör en fullständig kopia av temat via SFTP om du ska göra större ändringar.
• Gör små ändringar i taget och kontrollera webbutiken efter varje ändring. Då vet du exakt vad som gick fel om något skulle hända.

Temafilerna är skrivna i Smarty, inte vanlig HTML

Filerna liknar HTML, men de innehåller också mallkod som hämtar data från din webbutik. Shoporama använder mallspråket Smarty, och hos oss skrivs Smarty-koden med en spetsig parentes utanför de krökta parenteserna:

<{$product->getName()}>

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

<{foreach $products as $product}>
    <{$product->getName()}>
<{/foreach}>

Lägg märke till att det heter <{$foo}> och inte bara krökta parenteser, som i många andra system. Om du kopierar kod från nätet är det ofta just det som gör att den inte fungerar. Varje <{if}> måste ha ett <{/if}>, och varje <{foreach}> ett <{/foreach}>. Om du glömmer ett får du vanligtvis en felsida i hela webbutiken, så räkna alltid efter innan du sparar.

En översikt över de variabler och metoder som du kan använda i mallarna hittar du i Variabler i ett Shoporama-tema.

De viktigaste varningarna

• Du arbetar på den live-aktiva webbutiken. Om du sparar en felaktig version fredag kl. 20, ser dina kunder den fredag kl. 20.
• Det finns ingen ångrafunktion på servern. Kopiera ut filens innehåll innan du redigerar det.
• Dina ändringar kan skrivas över vid en temauppdatering. Om du får en ny version av temat från din utvecklare, eller om du själv laddar upp temat igen via SFTP, ersätts filerna och ändringarna försvinner. Skriv alltid ner vad du har ändrat.
• Kontrollera att du redigerar det aktiva temat. Filförteckningen visar alla teman i temamappen, inte bara det som är i bruk. Det aktiva temat väljs under Butik, Design, Tema.
• Ta aldrig bort en fil om du inte vet vad den används till. Om en mall som webbutiken förväntar sig saknas kan hela sidan sluta fungera.
• Redigeraren sparar inte automatiskt. Om du stänger fliken med osparade ändringar går de förlorade.

Finns det ett enklare och mindre riskfyllt sätt?

Mycket av det som användare gör i kodredigeraren kan utföras på andra ställen i adminpanelen helt utan risk. Det sparar både tid och eventuella driftstopp, så titta här först:

• Butik, Design, Tema-inställningar för färger, logotyper och de alternativ som temat själv erbjuder.
• Butik, Design, Stylesheet för dina egna CSS-justeringar.
• Butik, Design, Texter för fasta texter och översättningar, samt Siddesigner för att bygga sidor av färdiga block utan kod.
• Konto, Webbutik, HTML-fält för spårningsskript och liknande som ska placeras i head eller body. Se guiden för HTML-fält.

För dig som är tekniskt kunnig

Redigeraren är byggd på CodeMirror. Följande kortkommandon fungerar:

• Cmd+S eller Ctrl+S sparar, även när markören står utanför redigeringsfältet.
• Cmd+Z eller Ctrl+Z ångrar, Shift+Cmd+Z eller Ctrl+Y gör om.
• Cmd+F eller Ctrl+F söker, Cmd+G eller Ctrl+G hittar nästa, och Alt+G hoppar till ett radnummer.
• Ctrl+mellanslag ger automatisk komplettering av HTML-taggar och attribut.
• F11 slår på och av helskärmsläge, Esc stänger det. I helskärmsläge finns ett verktygsfält med Spara och Stäng.

Några saker till: nya filer kan endast skapas i mappar som redan finns, så nya mappar skapas via SFTP. Om du sparar en fil som helt tom kan redigeraren visa ”Fel, din fil sparades inte!”, även om filen faktiskt tömdes. Om din webbutik är live sparas färdiga HTML-sidor i upp till fyra timmar för vanliga besökare, medan varukorg, adress, frakt och betalning aldrig sparas på det sättet. Om ditt tema fortfarande kör Smarty 2 skrivs vissa funktioner annorlunda; se guiden för Smarty 4.

Vanliga frågor

Min webbutik visar ett felmeddelande efter att jag har sparat. Vad ska jag göra?

Sätt tillbaka den gamla versionen av filen om du har kopierat den. Om du inte har gjort det, leta efter en saknad avslutning på ett Smarty-block, det vill säga ett <{if}> utan <{/if}>. Om du inte kan hitta felet, skriv till support@shoporama.dk med filnamnet och vad du ändrade.

Kan jag ångra en ändring dagen efter?

Nej. Tidigare versioner sparas inte, och det finns ingen historik att återgå till. Cmd+Z och Ctrl+Z fungerar endast i redigeraren medan sidan fortfarande är öppen. En kopia på din egen dator, eller en fullständig kopia av temat via SFTP, är den enda riktiga säkerhetsåtgärden.

Varför syns inte mitt tema i listan?

Kodredigeraren visar endast teman i din egen butiks temamapp. Om du använder ett av Shoporamas standardteman eller ett tema som du köpt i temabutiken ligger filerna någon annanstans och kan inte redigeras här. Du måste först ha laddat upp din egen kopia av temat via SFTP.

Hur vet jag vilket tema som är aktivt?

Gå till Butik, Design, Tema. Det är där du väljer vilket tema butiken ska använda. Filförteckningen i kodredigeraren visar alla dina teman, så det är ett vanligt misstag att redigera flitigt i en mapp som inte alls används.

Varför syns inte min ändring i butiken?

Prova först att göra en hård omladdning med Cmd+Shift+R eller Ctrl+Shift+R, så att webbläsaren hämtar CSS och JavaScript på nytt. Om webbutiken är live kan dessutom färdiga sidor ligga sparade i upp till fyra timmar för vanliga besökare. Och om du har gjort ändringar i ett tema som inte är det aktiva händer ingenting.

Varför visas ett hänglås bredvid vissa filer?

Hänglåset betyder att filen inte är skrivbar och därför kan den inte öppnas och sparas från redigeraren. Det är filbehörigheterna på servern som blockerar, och de ändras via SFTP. Om du inte har SFTP-åtkomst själv, be din utvecklare om det.

Måste jag använda kodredigeraren för att lägga in ett spårningsskript?

Nej, använd HTML-fälten under Konto, Webbshop, HTML-fält. Då finns skriptet i webbshopens inställningar och bevaras även vid en uppdatering av temat. Om du lägger in det direkt i en temafil försvinner det den dag temat laddas upp igen.

Kan jag rulla ut samma ändring i alla mina webbutiker på en gång?

Nej. Kodredigeraren fungerar endast i den butik du har valt i admin, så ändringen måste göras om i varje butik. Om du har många butiker med samma tema är det bättre att infoga ändringen direkt i själva temat och ladda upp det till alla butiker via SFTP.