Kodeditoren: rediger temafiler direkte i admin

Kodeditoren er Shoporamas innebygde editor for temafiler. Med den kan du åpne, redigere, opprette og slette filene i temaet ditt direkte i nettleseren, uten å installere programmer og uten å logge inn via SFTP. Det er den raskeste måten å gjøre en liten endring i en mal, et stykke CSS eller en automatisk e-post på.

Merk: Dette er en teknisk side. Du arbeider direkte i filene som nettbutikken din er bygget av, og det finnes verken versjonshistorikk eller en «angre»-knapp på serveren. Ett manglende tegn kan umiddelbart føre til en feilside for alle kundene dine. Hvis du ikke har jobbet med HTML, CSS eller Smarty før, bør du heller bruke de vanlige designverktøyene lenger ned i artikkelen, eller la temautvikleren din gjøre endringen.

Hvor finner du kodeeditoren

Klikk på Butikk i menyen til venstre, utvid Design og velg Kodeditor. Siden består av en filliste på venstre side og selve redigeringsverktøyet på høyre side.

Hva du kan redigere

Kodeditoren viser temaene som ligger i din egen butiks temamappe, altså temaene du eller utvikleren din selv har lagt inn via SFTP. Hvis du har flere temaer, vises hvert tema som sin egen gruppe med temaets navn som overskrift. Kun filer med disse fem filendelsene vises i listen:

• .html er temaets maler, altså sidene kundene dine ser
• .css styrer farger, skrifttyper og layout
• .js er JavaScript
• .txt og .ini er tekst- og konfigurasjonsfiler

Bilder og skrifttyper vises ikke; disse laster du opp under Butikk, Design, Filer. Malene ligger vanligvis i en «templates»-mappe, så «templates/product.html» er produktsiden, «templates/basket.html» er handlekurven og «templates/mails/invoice.html» er ordrebekreftelsen. Navnene kan variere litt fra tema til tema. Hvis du bare skal redigere teksten i e-postene, bør du først lese veiledningen for e-postmaler i temaet ditt.

Viktig: Shoporamas innebygde standardtemaer og temaer kjøpt i Temabutikken vises ikke i kodeditoren, fordi de ligger utenfor nettbutikkens egen temamappe. Hvis du skal kunne redigere et av dem, må du først ha lagt opp din egen kopi av temaet via SFTP.

Slik er siden bygget opp

• Filisten på venstre side, med feltet «Filtrer filer...» øverst. Hvis du for eksempel skriver «product», vises bare filer med «product» i navnet.
• «Opprett ny fil» nederst i hver temagruppe.
• Et hengelåsikon ved siden av et filnavn betyr at filen ikke er skrivbar og derfor ikke kan åpnes. Nederst står forklaringen: «Filen er ikke skrivbar – sett rettighetene via SFTP.»
• Redigeringsfeltet med linjenumre og fargekoding. CSS- og JavaScript-filer får sin egen fargekoding, mens alle andre filer vises med HTML-fargekoding.
• Knappene «Lagre», «Slett» og «Full skjerm», samt en status som kort viser «Lagret!» eller «Feil, filen din ble ikke lagret!».

Slik lagrer du en endring

1. Klikk på filnavnet i listen. Innholdet hentes inn, og filnavnet vises over redigeringsfeltet.
2. Rett det du skal rette.
3. Klikk på «Lagre», eller trykk Cmd+S på Mac og Ctrl+S på Windows.
4. Bekreftelsen «Lagret!» blinker kort. Hvis det i stedet vises «Feil, filen din ble ikke lagret!», er endringen ikke lagret, og du må sjekke om filen er skrivbar.

Det finnes verken utkast- eller publiser-knapp. Når du klikker på Lagre, lagres filen umiddelbart, og nettbutikken bruker den nye versjonen fra neste sidevisning. Hvis du bytter fil uten å ha lagret, spør redigeringsprogrammet: «Du har ulagrede endringer. Vil du fortsette?». Men hvis du lukker fanen eller laster inn siden på nytt, forsvinner endringene uten forvarsel.

Opprett og slett filer

Nederst i hver temagruppe finner du «Opprett ny fil». Du blir bedt om å oppgi et filnavn, og du kan skrive inn en sti, for eksempel templates/min-side.html, hvis filen skal ligge i en undermappe som allerede finnes. Filen opprettes tom, og listen lastes inn på nytt. Slett-knappen sletter filen du har åpen. Du får først spørsmålet «Sikker?», og deretter er filen borte. Det finnes ingen papirkurv, og filen kan ikke hentes tilbake fra Shoporama i etterkant.

Finnes det versjonskontroll eller angre-funksjon?

Nei. Kodeditoren lagrer ikke tidligere versjoner, og det finnes ingen historikk å rulle tilbake til. Når du lagrer, blir den gamle versjonen overskrevet, og når du sletter, er filen slettet. Dette er den viktigste forskjellen mellom kodeditoren og resten av administrasjonsgrensesnittet, der du vanligvis kan angre eller gjenopprette. Angre med Cmd+Z eller Ctrl+Z fungerer bare inne i editoren, så lenge siden ikke er lastet inn på nytt.

Sørg derfor for din egen sikkerhet før du endrer noe:

• Marker hele filens innhold, kopier det og lagre det i en tekstfil på din egen datamaskin.
• Ta en fullstendig kopi av temaet via SFTP hvis du skal gjøre større endringer.
• Gjør små endringer om gangen, og sjekk nettbutikken etter hver enkelt endring. Da vet du nøyaktig hva som gikk galt, hvis noe skulle skje.

Temafiler er Smarty, ikke vanlig HTML

Filene ligner HTML, men de inneholder også mal-kode som henter data fra nettbutikken din. Shoporama bruker malspråket Smarty, og hos oss skrives Smarty-koden med en spiss parentes utenfor de krøllete parentesene:

<{$product->getName()}>

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

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

Legg merke til at det heter <{$foo}> og ikke bare krøllede parenteser, som i mange andre systemer. Hvis du kopierer kode fra nettet, er det ofte nettopp dette som gjør at den ikke fungerer. Hver <{if}> må ha en <{/if}>, og hver <{foreach}> en <{/foreach}>. Glemmer du én, får du vanligvis en feilside i hele nettbutikken, så sjekk alltid at alt er på plass før du lagrer.

En oversikt over variablene og metodene du kan bruke i malene, finner du under «Variabler i et Shoporama-tema».

De viktigste advarslene

• Du jobber på den aktive nettbutikken. Hvis du lagrer en feil fredag kl. 20, vil kundene dine se den fredag kl. 20.
• Det finnes ingen «angre»-funksjon på serveren. Kopier ut innholdet i filen før du retter på det.
• Endringene dine kan bli overskrevet ved en temaoppdatering. Hvis du får en ny versjon av temaet fra utvikleren din, eller hvis du selv laster opp temaet på nytt via SFTP, blir filene erstattet, og endringene forsvinner. Noter alltid hva du har endret.
• Sjekk at du redigerer det aktive temaet. Filisten viser alle temaene i temamappen, ikke bare det som er i bruk. Det aktive temaet velges under Butikk, Design, Tema.
• Slett aldri en fil hvis du ikke vet hva den brukes til. Hvis en mal som nettbutikken forventer mangler, kan hele siden gå ned.
• Redigeringsverktøyet lagrer ikke automatisk. Hvis du lukker fanen med ulagrede endringer, går de tapt.

Finnes det en enklere og mindre risikabel måte?

Mye av det folk går inn i kodeditoren for å gjøre, kan gjøres andre steder i administrasjonspanelet helt uten risiko. Det sparer både tid og mulig nedetid, så sjekk her først:

• Butikk, Design, Temainnstillinger for farger, logoer og de valgmulighetene temaet selv tilbyr.
• Butikk, Design, Stylesheet for dine egne CSS-justeringer.
• Butikk, Design, Tekster for faste tekster og oversettelser, og Sidedesigner for å bygge sider av ferdige blokker uten koding.
• Konto, Nettbutikk, HTML-felt for sporingsskript og lignende som skal plasseres i head- eller body-delen. Se veiledningen for HTML-felt.

For deg som er teknisk anlagt

Editoren er bygget på CodeMirror. Følgende hurtigtaster fungerer:

• Cmd+S eller Ctrl+S lagrer, også når markøren står utenfor redigeringsfeltet.
• Cmd+Z eller Ctrl+Z angir, Shift+Cmd+Z eller Ctrl+Y gjentar.
• Cmd+F eller Ctrl+F søker, Cmd+G eller Ctrl+G finner neste, og Alt+G hopper til et linjenummer.
• Ctrl+mellomrom gir automatisk fullføring av HTML-koder og attributter.
• F11 slår fullskjermmodus av og på, Esc lukker den. I fullskjermmodus er det en verktøylinje med Lagre og Lukk.

Noen flere ting: nye filer kan bare opprettes i mapper som allerede finnes, så nye mapper må opprettes via SFTP. Hvis du lagrer en fil som er helt tom, kan redigeringsprogrammet vise «Feil, filen din ble ikke lagret!», selv om filen faktisk ble tømt. Hvis nettbutikken din er live, lagres ferdige HTML-sider i opptil fire timer for vanlige besøkende, mens handlekurv, adresse, frakt og betaling aldri lagres på denne måten. Hvis temaet ditt fortsatt kjører Smarty 2, skrives noen funksjoner annerledes; se veiledningen til Smarty 4.

Ofte stilte spørsmål

Nettbutikken min viser en feilmelding etter at jeg har lagret. Hva skal jeg gjøre?

Sett inn den gamle versjonen av filen igjen, hvis du har kopiert den. Har du ikke gjort det, må du se etter en manglende avslutning på en Smarty-blokk, altså en <{if}> uten <{/if}>. Finner du ikke feilen, kan du skrive til support@shoporama.dk med navnet på filen og hva du endret.

Kan jeg angre en endring dagen etter?

Nei. Tidligere versjoner lagres ikke, og det finnes ingen historikk å gå tilbake til. Cmd+Z og Ctrl+Z fungerer bare i redigeringsprogrammet mens siden fortsatt er åpen. En kopi på din egen datamaskin, eller en fullstendig kopi av temaet via SFTP, er den eneste sikre løsningen.

Hvorfor ser jeg ikke temaet mitt i listen?

Kodeditoren viser kun temaer i din egen butiks temamappe. Hvis du bruker et av Shoporamas standardtemaer eller et tema kjøpt i Temabutikken, ligger filene et annet sted og kan ikke redigeres her. Du må først ha lagt opp din egen kopi av temaet via SFTP.

Hvordan vet jeg hvilket tema som er aktivt?

Gå til Butikk, Design, Tema. Det er der du velger hvilket tema nettbutikken skal bruke. Filoversikten i kodeditoren viser alle temaene dine, så det er en vanlig feil å redigere flittig i en mappe som ikke er i bruk i det hele tatt.

Hvorfor ser jeg ikke endringen min i nettbutikken?

Prøv først å foreta en hard oppdatering med Cmd+Shift+R eller Ctrl+Shift+R, slik at nettleseren henter CSS og JavaScript på nytt. Hvis nettbutikken er live, kan ferdige sider dessuten være lagret i opptil fire timer for vanlige besøkende. Og hvis du har gjort endringer i et tema som ikke er det aktive, skjer det ingenting.

Hvorfor vises det en hengelås ved siden av noen filer?

Hengelåsen betyr at filen ikke er skrivbar, og derfor kan den ikke åpnes og lagres fra redigeringsverktøyet. Det er filrettighetene på serveren som blokkerer, og disse endres via SFTP. Har du ikke SFTP-tilgang selv, må du be utvikleren din om det.

Må jeg bruke kodeditoren for å legge inn et sporingsskript?

Nei, bruk HTML-feltene under Konto, Nettbutikk, HTML-felter. Da ligger skriptet i nettbutikkens innstillinger og overlever en oppdatering av temaet. Hvis du legger det direkte inn i en temafil, forsvinner det den dagen temaet legges ut på nytt.

Kan jeg rulle ut den samme endringen i alle nettbutikkene mine på én gang?

Nei. Kodeditoren fungerer bare i den nettbutikken du har valgt i admin, så endringen må gjentas i hver enkelt nettbutikk. Hvis du har mange nettbutikker med samme tema, er det bedre å innlemme endringen i selve temaet og laste det opp i alle nettbutikkene via SFTP.