Der Code-Editor: Theme-Dateien direkt im Admin-Bereich bearbeiten

Der Code-Editor ist der in Shoporama integrierte Editor für Theme-Dateien. Damit kannst du die Dateien deines Themes direkt im Browser öffnen, bearbeiten, erstellen und löschen, ohne Programme installieren oder dich per SFTP anmelden zu müssen. Das ist der schnellste Weg, um eine kleine Korrektur an einer Vorlage, einem CSS-Code oder einer automatischen E-Mail vorzunehmen.

Hinweis: Dies ist eine technische Seite. Du arbeitest direkt in den Dateien, aus denen dein Webshop aufgebaut ist, und es gibt weder einen Versionsverlauf noch eine Rückgängig-Schaltfläche auf dem Server. Ein einziges fehlendes Zeichen kann sofort zu einer Fehlermeldung für alle deine Kunden führen. Wenn du noch nie mit HTML, CSS oder Smarty gearbeitet hast, solltest du lieber die allgemeinen Design-Tools weiter unten im Artikel verwenden oder die Korrektur von deinem Theme-Entwickler vornehmen lassen.

Wo findest du den Code-Editor?

Klicke im Menü auf der linken Seite auf „Shop“, klappe „Design“ auf und wähle „Code-Editor“. Die Seite besteht aus einer Dateiliste auf der linken Seite und dem eigentlichen Editor auf der rechten Seite.

Was du bearbeiten kannst

Der Code-Editor zeigt die Themes an, die sich im Theme-Ordner deines eigenen Shops befinden, also die Themes, die du oder dein Entwickler selbst per SFTP hochgeladen habt. Wenn du mehrere Themes hast, wird jedes Theme als eigene Gruppe mit dem Namen des Themes als Überschrift angezeigt. Nur Dateien mit diesen fünf Endungen werden in der Liste aufgeführt:

• .html sind die Vorlagen des Themes, also die Seiten, die Ihre Kunden sehen
• .css steuert Farben, Schriftarten und Layout
• .js sind JavaScript-Dateien
• .txt und .ini sind Text- und Konfigurationsdateien

Bilder und Schriftarten werden nicht angezeigt; diese lädst du unter „Shop“, „Design“, „Dateien“ hoch. Die Vorlagen befinden sich in der Regel in einem „templates“-Ordner, sodass „templates/product.html“ die Produktseite, „templates/basket.html“ den Warenkorb und „templates/mails/invoice.html“ die Bestellbestätigung darstellt. Die Namen können von Theme zu Theme leicht variieren. Wenn du nur die Texte in den E-Mails bearbeiten möchtest, lies bitte zuerst die Anleitung zu den E-Mail-Vorlagen in deinem Theme.

Wichtig: Die integrierten Standard-Themes von Shoporama und die im Theme-Shop gekauften Themes werden im Code-Editor nicht angezeigt, da sie sich außerhalb des Theme-Ordners Ihres Shops befinden. Wenn Sie Änderungen an einem dieser Themes vornehmen möchten, müssen Sie zunächst Ihre eigene Kopie des Themes per SFTP hochladen.

So ist die Seite aufgebaut

• Die Dateiliste auf der linken Seite mit dem Feld „Dateien filtern…“ oben. Wenn du z. B. „product“ eingibst, werden nur Dateien angezeigt, deren Name „product“ enthält.
• „Neue Datei erstellen“ unten in jeder Theme-Gruppe.
• Ein Vorhängeschloss neben einem Dateinamen bedeutet, dass die Datei nicht beschreibbar ist und daher nicht geöffnet werden kann. Unten steht die Erklärung: „Die Datei ist nicht beschreibbar – lege die Berechtigungen über SFTP fest.“
• Das Editorfeld mit Zeilennummern und Farbcodierung. CSS- und JavaScript-Dateien erhalten eine eigene Farbcodierung, während alle anderen Dateien mit HTML-Farbcodierung angezeigt werden.
• Die Schaltflächen „Speichern“, „Löschen“ und „Vollbild“ sowie eine Statusanzeige, die kurz „Gespeichert!“ oder „Fehler, Ihre Datei wurde nicht gespeichert!“ anzeigt.

So speicherst du eine Änderung

1. Klicke auf den Dateinamen in der Liste. Der Inhalt wird geladen und der Dateiname wird über dem Editorfeld angezeigt.
2. Nimm die gewünschten Änderungen vor.
3. Klicke auf „Speichern“ oder drücke Cmd+S auf dem Mac und Strg+S unter Windows.
4. Die Bestätigungsmeldung „Gespeichert!“ blinkt kurz auf. Wenn stattdessen „Fehler, deine Datei wurde nicht gespeichert!“ angezeigt wird, wurde die Änderung nicht gespeichert, und du musst überprüfen, ob die Datei beschreibbar ist.

Es gibt weder einen Entwurfs- noch einen Veröffentlichungs-Button. Wenn du auf „Speichern“ klickst, wird die Datei sofort gespeichert, und der Shop verwendet die neue Version ab der nächsten Seitenaufrufe. Wenn du die Datei wechselst, ohne sie gespeichert zu haben, fragt der Editor: „Du hast ungespeicherte Änderungen. Möchtest du fortfahren?“. Wenn du jedoch den Tab schließt oder die Seite neu lädst, gehen die Änderungen ohne Vorwarnung verloren.

Dateien erstellen und löschen

Am unteren Rand jeder Theme-Gruppe befindet sich „Neue Datei erstellen“. Du wirst aufgefordert, einen Dateinamen einzugeben, und kannst einen Pfad angeben, z. B. templates/min-seite.html, falls die Datei in einem bereits vorhandenen Unterordner abgelegt werden soll. Die Datei wird leer erstellt, und die Liste wird neu geladen. Die Schaltfläche „Löschen“ löscht die Datei, die du geöffnet hast. Zunächst erscheint die Frage „Sicher?“, und anschließend ist die Datei weg. Es gibt keinen Papierkorb, und die Datei kann anschließend nicht aus Shoporama wiederhergestellt werden.

Gibt es eine Versionsverwaltung oder eine Rückgängig-Funktion?

Nein. Der Code-Editor speichert keine früheren Versionen, und es gibt keinen Verlauf, zu dem man zurückblättern kann. Beim Speichern wird die alte Version überschrieben, und beim Löschen ist die Datei endgültig gelöscht. Das ist der wichtigste Unterschied zwischen dem Code-Editor und dem Rest des Admin-Bereichs, wo du in der Regel Vorgänge rückgängig machen oder wiederherstellen kannst. „Rückgängig“ mit Cmd+Z oder Strg+Z funktioniert nur innerhalb des Editors, solange die Seite nicht neu geladen wurde.

Sorge daher zu deiner eigenen Sicherheit vor, bevor du etwas änderst:

• Markieren Sie den gesamten Inhalt der Datei, kopieren Sie ihn und speichern Sie ihn in einer Textdatei auf Ihrem eigenen Computer.
• Erstelle über SFTP eine vollständige Kopie des Themes, wenn du größere Änderungen vornehmen musst.
• Nimm jeweils nur kleine Änderungen vor und überprüfe den Shop nach jeder einzelnen Änderung. So weißt du genau, was schiefgelaufen ist, falls etwas nicht funktioniert.

Theme-Dateien sind Smarty, kein gewöhnliches HTML

Die Dateien sehen zwar wie HTML aus, enthalten aber auch Template-Code, der Daten aus deinem Shop abruft. Shoporama verwendet die Template-Sprache Smarty, und bei uns wird der Smarty-Code mit spitzen Klammern außerhalb der geschwungenen Klammern geschrieben:

<{$product->getName()}>

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

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

Beachte, dass es <{$foo}> heißt und nicht einfach nur geschweifte Klammern, wie in vielen anderen Systemen. Wenn du Code aus dem Internet kopierst, ist genau das oft der Grund, warum er nicht funktioniert. Jedes <{if}> muss ein <{/if}> haben, und jedes <{foreach}> ein <{/foreach}>. Wenn du eines vergisst, bekommst du in der Regel eine Fehlerseite im gesamten Shop; zähle daher immer nach, bevor du speicherst.

Eine Übersicht über die Variablen und Methoden, die du in den Vorlagen verwenden kannst, findest du unter „Variablen in einem Shoporama-Theme“.

Die wichtigsten Hinweise

• Du arbeitest am Live-Shop. Wenn du am Freitag um 20 Uhr einen Fehler speicherst, sehen deine Kunden diesen am Freitag um 20 Uhr.
• Auf dem Server gibt es keine Rückgängig-Funktion. Kopiere den Inhalt der Datei, bevor du Änderungen daran vornimmst.
• Deine Änderungen können bei einer Theme-Aktualisierung überschrieben werden. Wenn du eine neue Version des Themes von deinem Entwickler erhältst oder das Theme selbst über SFTP erneut hochlädst, werden die Dateien ersetzt und die Korrekturen gehen verloren. Notiere dir immer, was du geändert hast.
• Vergewissere dich, dass du das aktive Theme bearbeitest. Die Dateiliste zeigt alle Themes im Theme-Ordner an, nicht nur das aktuell verwendete. Das aktive Theme wählst du unter „Shop“, „Design“, „Theme“ aus.
• Lösche niemals eine Datei, deren Zweck du nicht kennst. Fehlt eine Vorlage, die der Shop erwartet, kann die gesamte Seite ausfallen.
• Der Editor speichert nicht automatisch. Wenn du den Tab mit ungespeicherten Änderungen schließt, gehen diese verloren.

Gibt es einen einfacheren und weniger riskanten Weg?

Vieles, wofür Nutzer den Code-Editor aufrufen, lässt sich an anderer Stelle im Admin-Bereich völlig risikofrei erledigen. Das spart sowohl Zeit als auch mögliche Ausfallzeiten, also schau zuerst hier nach:

• Shop, Design, Theme-Einstellungen für Farben, Logos und die Optionen, die das Theme selbst zur Verfügung stellt.
• Shop, Design, Stylesheet für deine eigenen CSS-Anpassungen.
• Shop, Design, Texte für die festen Texte und Übersetzungen sowie den Seiten-Designer, um Seiten aus vorgefertigten Blöcken ohne Code zu erstellen.
• Konto, Webshop, HTML-Felder für Tracking-Skripte und Ähnliches, die in den Head- oder Body-Bereich eingefügt werden müssen. Siehe die Anleitung zu HTML-Feldern.

Für technisch Versierte

Der Editor basiert auf CodeMirror. Folgende Tastenkombinationen funktionieren:

• Cmd+S oder Strg+S speichert, auch wenn sich der Cursor außerhalb des Editorfeldes befindet.
• Cmd+Z oder Strg+Z macht den letzten Schritt rückgängig, Umschalt+Cmd+Z oder Strg+Y wiederholt ihn.
• Cmd+F oder Strg+F suchen, Cmd+G oder Strg+G suchen das nächste Vorkommen, und Alt+G springt zu einer Zeilennummer.
• Strg+Leertaste bietet eine Autovervollständigung von HTML-Tags und Attributen.
• F11 schaltet den Vollbildmodus ein und aus, Esc schließt ihn. Im Vollbildmodus gibt es eine Symbolleiste mit den Schaltflächen „Speichern“ und „Schließen“.

Noch ein paar Hinweise: Neue Dateien können nur in bereits vorhandenen Ordnern erstellt werden, neue Ordner müssen daher über SFTP angelegt werden. Wenn du eine Datei als völlig leer speicherst, zeigt der Editor möglicherweise die Meldung „Fehler, deine Datei wurde nicht gespeichert!“ an, obwohl die Datei tatsächlich geleert wurde. Ist dein Shop live, werden fertige HTML-Seiten für normale Besucher bis zu vier Stunden lang zwischengespeichert, während Warenkorb, Adresse, Versand und Zahlung niemals auf diese Weise gespeichert werden. Läuft dein Theme noch mit Smarty 2, werden einige Funktionen anders geschrieben – siehe die Anleitung zu Smarty 4.

Häufig gestellte Fragen

Mein Shop zeigt nach dem Speichern eine Fehlermeldung an. Was soll ich tun?

Füge die alte Version der Datei wieder ein, falls du sie kopiert hast. Falls nicht, suche nach einem fehlenden Abschluss eines Smarty-Blocks, also einem <{if}> ohne <{/if}>. Wenn du den Fehler nicht finden kannst, schreibe an support@shoporama.dk und gib den Namen der Datei sowie die vorgenommenen Änderungen an.

Kann ich eine Änderung am nächsten Tag rückgängig machen?

Nein. Es werden keine früheren Versionen gespeichert, und es gibt keinen Verlauf, zu dem man zurückkehren könnte. Cmd+Z und Strg+Z funktionieren nur im Editor, solange die Seite noch geöffnet ist. Eine Kopie auf deinem eigenen Computer oder eine vollständige Kopie des Themes über SFTP ist die einzige wirkliche Absicherung.

Warum sehe ich mein Theme nicht in der Liste?

Der Code-Editor zeigt nur Themes im Theme-Ordner deines eigenen Shops an. Wenn du eines der Standard-Themes von Shoporama oder ein im Theme-Shop gekauftes Theme verwendest, befinden sich die Dateien an einem anderen Ort und können hier nicht bearbeitet werden. Du musst zunächst deine eigene Kopie des Themes per SFTP hochladen.

Woher weiß ich, welches Theme aktiv ist?

Gehe zu „Shop“, „Design“, „Theme“. Dort wählst du aus, welches Theme der Shop verwendet. Die Dateiliste im Code-Editor zeigt alle deine Themes an, daher ist es ein klassischer Fehler, fleißig in einem Ordner zu bearbeiten, der gar nicht verwendet wird.

Warum sehe ich meine Änderung nicht im Shop?

Versuche zunächst einen harten Neuladevorgang mit Cmd+Shift+R oder Strg+Shift+R, damit der Browser CSS und JavaScript neu lädt. Ist der Shop live, können fertige Seiten für normale Besucher zudem bis zu vier Stunden lang zwischengespeichert sein. Und wenn du Änderungen an einem Theme vorgenommen hast, das nicht aktiv ist, passiert nichts.

Warum wird bei einigen Dateien ein Vorhängeschloss angezeigt?

Das Vorhängeschloss bedeutet, dass die Datei nicht beschreibbar ist und daher nicht über den Editor geöffnet und gespeichert werden kann. Dies wird durch die Dateiberechtigungen auf dem Server verhindert, die über SFTP geändert werden müssen. Falls du selbst keinen SFTP-Zugang hast, bitte deinen Entwickler darum.

Muss ich den Code-Editor verwenden, um ein Tracking-Skript einzufügen?

Nein, verwende die HTML-Felder unter „Konto“, „Webshop“, „HTML-Felder“. So befindet sich das Skript in den Einstellungen des Shops und bleibt auch nach einer Aktualisierung des Themes erhalten. Wenn du es direkt in eine Theme-Datei einfügst, verschwindet es an dem Tag, an dem das Theme neu hochgeladen wird.

Kann ich dieselbe Änderung in allen meinen Webshops auf einmal durchführen?

Nein. Der Code-Editor funktioniert nur in dem Shop, den du im Admin-Bereich ausgewählt hast, daher muss die Änderung in jedem Shop einzeln vorgenommen werden. Wenn du viele Shops mit demselben Theme hast, ist es besser, die Änderung direkt in das Theme selbst einzubauen und es über SFTP in allen Shops hochzuladen.