Kodeeditoren: redigér tema-filer direkte i admin

Kodeeditoren er Shoporamas indbyggede editor til tema-filer. Med den kan du åbne, rette, oprette, og slette filerne i dit tema direkte i browseren, uden at installere programmer og uden at logge på med SFTP. Det er den hurtigste vej til en lille rettelse i en skabelon, et stykke CSS, eller en automatisk mail.

Bemærk: det her er en teknisk side. Du arbejder direkte i de filer, din webshop bliver bygget af, og der findes hverken versionshistorik eller en fortryd-knap på serveren. Ét manglende tegn kan give en fejlside for alle dine kunder med det samme. Har du ikke arbejdet med HTML, CSS, eller Smarty før, så brug hellere de almindelige designværktøjer længere nede i artiklen, eller lad din temaudvikler lave rettelsen.

Hvor finder du kodeeditoren

Klik på Butik i menuen til venstre, fold Design ud, og vælg Kodeeditor. Siden består af en filliste i venstre side, og selve editoren i højre side.

Hvad du kan redigere

Kodeeditoren viser de temaer, der ligger i din egen shops temamappe, altså de temaer du eller din udvikler selv har lagt op via SFTP. Har du flere temaer liggende, bliver hvert tema vist som sin egen gruppe med temaets navn som overskrift. Kun filer med disse fem endelser kommer med i listen:

• .html er temaets skabeloner, altså de sider dine kunder ser
• .css styrer farver, skrifttyper, og layout
• .js er JavaScript
• .txt og .ini er tekst- og opsætningsfiler

Billeder og skrifttyper vises ikke, dem uploader du under Butik, Design, Filer. Skabelonerne ligger typisk i en templates-mappe, så templates/product.html er produktsiden, templates/basket.html er kurven, og templates/mails/invoice.html er ordrebekræftelsen. Navnene kan variere lidt fra tema til tema. Skal du kun rette teksterne i mailene, så læs guiden til email-skabeloner i dit tema først.

Vigtigt: Shoporamas indbyggede standardtemaer og temaer købt i Temabutikken bliver ikke vist i kodeeditoren, fordi de ligger uden for din shops egen temamappe. Skal du kunne rette i et af dem, skal du først have din egen kopi af temaet lagt op via SFTP.

Sådan er siden bygget op

• Fillisten i venstre side, med feltet "Filtrer filer..." øverst. Skriver du fx "product", vises kun filer med "product" i navnet.
• "Opret ny fil" nederst i hver tema-gruppe.
• En hængelås ud for et filnavn betyder, at filen ikke er skrivbar og derfor ikke kan åbnes. Nederst står forklaringen: "Filen er ikke skrivbar - sæt rettighederne via SFTP."
• Editorfeltet med linjenumre og farvekodning. CSS- og JavaScript-filer får deres egen farvekodning, mens alle andre filer vises med HTML-farvelægning.
• Knapperne Gem, Slet, og Fuld skærm, plus en status der kort viser "Gemt!" eller "Fejl, din fil blev ikke gemt!".

Sådan gemmer du en ændring

1. Klik på filnavnet i listen. Indholdet hentes ind, og filens navn vises over editorfeltet.
2. Ret det du skal rette.
3. Klik på Gem, eller tryk Cmd+S på Mac og Ctrl+S på Windows.
4. Kvitteringen "Gemt!" blinker kort. Kommer der i stedet "Fejl, din fil blev ikke gemt!", er ændringen ikke gemt, og du skal tjekke om filen er skrivbar.

Der er hverken kladde eller udgiv-knap. Når du klikker Gem, bliver filen skrevet med det samme, og shoppen bruger den nye version fra næste sidevisning. Skifter du fil uden at have gemt, spørger editoren "Du har ugemte ændringer. Vil du fortsætte?". Men lukker du fanen eller genindlæser siden, forsvinder ændringerne uden varsel.

Opret og slet filer

Nederst i hver tema-gruppe ligger "Opret ny fil". Du bliver bedt om at indtaste et filnavn, og du kan skrive en sti med, fx templates/min-side.html, hvis filen skal ligge i en undermappe der findes i forvejen. Filen oprettes tom, og listen genindlæses. Slet-knappen sletter den fil, du har åben. Du får spørgsmålet "Sikker?" først, og derefter er filen væk. Der er ingen papirkurv, og filen kan ikke hentes tilbage fra Shoporama bagefter.

Er der versionering eller fortryd?

Nej. Kodeeditoren gemmer ikke tidligere versioner, og der er ingen historik at rulle tilbage til. Når du gemmer, bliver den gamle udgave overskrevet, og når du sletter, er filen slettet. Det er den vigtigste forskel på kodeeditoren og resten af admin, hvor du som regel kan fortryde eller gendanne. Fortryd med Cmd+Z eller Ctrl+Z virker kun inde i editoren, så længe siden ikke er genindlæst.

Sørg derfor for din egen sikkerhed, inden du retter noget:

• Marker hele filens indhold, kopiér det, og gem det i en tekstfil på din egen computer.
• Tag en fuld kopi af temaet via SFTP, hvis du skal lave større ændringer.
• Lav små ændringer ad gangen, og tjek shoppen efter hver enkelt. Så ved du præcis hvad der gik galt, hvis noget gør.

Tema-filer er Smarty, ikke almindelig HTML

Filerne ligner HTML, men de indeholder også skabelonkode, der henter data fra din shop. Shoporama bruger skabelonsproget Smarty, og hos os skrives Smarty-koden med en spids parentes uden om de krøllede parenteser:

<{$product->getName()}>

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

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

Læg mærke til at det hedder <{$foo}> og ikke bare krøllede parenteser, som i mange andre systemer. Kopierer du kode fra nettet, er det tit præcis dét, der gør, at den ikke virker. Hver <{if}> skal have en <{/if}>, og hver <{foreach}> en <{/foreach}>. Glemmer du én, får du typisk en fejlside på hele shoppen, så tæl altid efter inden du gemmer.

En oversigt over de variabler og metoder, du kan bruge i skabelonerne, finder du i Variabler i et Shoporama-tema.

De vigtigste advarsler

• Du arbejder på den live shop. Gemmer du en fejl fredag kl. 20, ser dine kunder den fredag kl. 20.
• Der er ingen fortryd på serveren. Kopiér filens indhold ud, før du retter i det.
• Dine ændringer kan blive overskrevet ved en tema-opdatering. Får du en ny version af temaet fra din udvikler, eller lægger du selv temaet op igen via SFTP, bliver filerne erstattet, og rettelserne er væk. Skriv altid ned hvad du har ændret.
• Tjek at du redigerer det aktive tema. Fillisten viser alle temaer i temamappen, ikke kun det der er i brug. Det aktive tema vælges under Butik, Design, Tema.
• Slet aldrig en fil, du ikke kender formålet med. Mangler en skabelon, som shoppen forventer, kan hele siden gå ned.
• Editoren gemmer ikke automatisk. Lukker du fanen med ugemte ændringer, er de tabt.

Er der en nemmere og mindre risikabel vej?

Meget af det, folk går i kodeeditoren for at lave, kan laves andre steder i admin helt uden risiko. Det sparer både tid og mulig nedetid, så kig her først:

• Butik, Design, Temaindstillinger til farver, logoer, og de valgmuligheder temaet selv stiller til rådighed.
• Butik, Design, Stylesheet til dine egne CSS-rettelser.
• Butik, Design, Tekster til de faste tekster og oversættelser, og Sidedesigner til at bygge sider af færdige blokke uden kode.
• Konto, Webshop, HTML-felter til tracking-scripts og lignende, der skal ind i head eller body. Se guiden til HTML-felter.

Til dig der er teknisk

Editoren er bygget på CodeMirror. Følgende genveje virker:

• Cmd+S eller Ctrl+S gemmer, også når markøren står uden for editorfeltet.
• Cmd+Z eller Ctrl+Z fortryder, Shift+Cmd+Z eller Ctrl+Y gentager.
• Cmd+F eller Ctrl+F søger, Cmd+G eller Ctrl+G finder næste, og Alt+G hopper til et linjenummer.
• Ctrl+Mellemrum giver autofuldførelse af HTML-tags og attributter.
• F11 slår fuld skærm til og fra, Esc lukker den. I fuld skærm er der en værktøjslinje med Gem og Luk.

Et par ting mere: nye filer kan kun oprettes i mapper, der findes i forvejen, så nye mapper laves via SFTP. Gemmer du en fil som helt tom, kan editoren vise "Fejl, din fil blev ikke gemt!", selvom filen faktisk blev tømt. Er din shop live, gemmes færdige HTML-sider i op til fire timer for almindelige besøgende, mens kurv, adresse, fragt, og betaling aldrig gemmes på den måde. Kører dit tema stadig Smarty 2, skrives nogle funktioner anderledes, se guiden til Smarty 4.

Ofte stillede spørgsmål

Min shop viser en fejl, efter jeg har gemt. Hvad gør jeg?

Sæt den gamle udgave af filen ind igen, hvis du har kopieret den. Har du ikke det, så led efter en manglende afslutning på en Smarty-blok, altså en <{if}> uden <{/if}>. Kan du ikke finde fejlen, så skriv til support@shoporama.dk med navnet på filen og hvad du ændrede.

Kan jeg fortryde en ændring dagen efter?

Nej. Der gemmes ikke tidligere versioner, og der er ingen historik at rulle tilbage til. Cmd+Z og Ctrl+Z virker kun i editoren, mens siden stadig er åben. En kopi på din egen computer, eller en fuld kopi af temaet via SFTP, er den eneste rigtige sikkerhed.

Hvorfor kan jeg ikke se mit tema i listen?

Kodeeditoren viser kun temaer i din egen shops temamappe. Bruger du et af Shoporamas standardtemaer, eller et tema købt i Temabutikken, ligger filerne et andet sted og kan ikke redigeres her. Du skal have din egen kopi af temaet lagt op via SFTP først.

Hvordan ved jeg, hvilket tema der er det aktive?

Gå til Butik, Design, Tema. Det er dér, du vælger hvilket tema shoppen bruger. Fillisten i kodeeditoren viser alle dine temaer, så det er en klassisk fejl at rette flittigt i en mappe, der slet ikke er i brug.

Hvorfor kan jeg ikke se min ændring ude i shoppen?

Prøv først en hård genindlæsning med Cmd+Shift+R eller Ctrl+Shift+R, så browseren henter CSS og JavaScript forfra. Er shoppen live, kan færdige sider desuden ligge gemt i op til fire timer for almindelige besøgende. Og har du rettet i et tema, der ikke er det aktive, sker der ingenting.

Hvorfor står der en hængelås ud for nogle filer?

Hængelåsen betyder, at filen ikke er skrivbar, og derfor kan den ikke åbnes og gemmes fra editoren. Det er filrettighederne på serveren der spærrer, og de rettes via SFTP. Har du ikke selv SFTP-adgang, så bed din udvikler om det.

Skal jeg bruge kodeeditoren til at lægge et tracking-script ind?

Nej, brug HTML-felterne under Konto, Webshop, HTML-felter. Så ligger scriptet i shoppens indstillinger og overlever en opdatering af temaet. Lægger du det direkte ind i en tema-fil, forsvinder det den dag temaet bliver lagt op igen.

Kan jeg rulle den samme ændring ud i alle mine webshops på én gang?

Nej. Kodeeditoren arbejder kun i den shop, du har valgt i admin, så rettelsen skal gentages i hver shop. Har du mange shops med samme tema, er det bedre at få ændringen ind i selve temaet og lægge det op i alle shops via SFTP.