Theme Editor

Theme Editor

Der Theme-Editor (Editor) ist ein Werkzeug, mit dem die Dateien eines Shop-Themes im Browser bearbeitet werden können. Geöffnet werden kann der Editor durch einen Klick des HTML-&-CSS-bearbeiten-Buttons im Administrations-Bereich unter “Design”.

Aufteilung

Der Editor ist eine in zwei Spalten aufgeteilte Webseite:

In der dunkelhinterlegten linken Spalte befindet sich eine Liste der sich im Theme befindlichen Dateien. Die weißhinterlegte rechte Spalte ist zur Bearbeitung der Dateien vorgesehen.

Dateien bearbeiten

Um eine Datei bearbeiten zu können, genügt ein Klick auf den Dateinamen in der linken Spalte. Daraufhin erscheint in der rechten Spalte ein großes Textfeld, in dem der Dateiinhalt dargestellt wird. Dieser Dateiinhalt lässt sich nun verändern.

Sind die Änderungen abgeschlossen, genügt ein Klick auf den grünen Speichern-Button, um die Änderungen wirksam zu machen. Der Speichern-Button erscheint nur dann, wenn sich der Dateiinhalt verändert hat.

Tab-Leiste

Sobald eine Datei geöffnet wurde, erscheint am oberen Rand der rechten Spalte eine Tab-Leiste, in der alle geöffneten Dateien sichtbar sind. Mit einem Klick auf ein Tab öffnet sich die Datei. Das Kreuz am rechten Rand eines Tabs schließt die Datei.

Datei umbenennen/löschen

Sobald eine Datei geöffnet wurde ist der Dateiname unterhalb der Tab-Leiste zu erkennen. Dieser kann verändert und durch einen Klick auf den dann erscheinenden „Umbenennen“-Button bestätigt werden:

Dateien erstellen

Wird in der linken Spalte unterhalb eines Verzeichnisses auf den Neue-Datei-Link geklickt, erscheint in der rechten Spalte eine Auswahl an Dateien. Die Auswahl beinhaltet vordefinierte Templates, die im Theme benutzt werden können. Zusätzlich befindet sich als letzte Auswahl eine leere Datei:

Nach der Auswahl der Datei genügt ein Klick auf den erscheinenden Anlegen-Button, um die Datei zu erstellen. Sie wird nach dem Erstellen automatisch geöffnet.

Drag & Drop

Zusätzlich ist es möglich, Dateien zu erstellen, indem man eine Datei vom lokalen Dateisystem per Drag & Drop im linken Bereich platziert:

Tastenkürzel

Der Editor verfügt außerdem über ein Tastenkürzel, das das Speichern von Dateien ohne Mausklick ermöglicht. Ist eine Datei im Editor geöffnet, so kann diese durch das Tastenkürzel Strg+s (Windows) bzw. Command+s (Mac OS) gespeichert werden.


    • Related Articles

    • Theme tags

      Theme-Tags haben viele Funktionen, darunter: Gibt HTML-Tags für die Vorlage aus. Dem Theme mitteilen, welches Layout und welche Snippets verwendet werden sollen. Teilen eines zurückgegebenen Arrays in mehrere Seiten. comment Text innerhalb der ...
    • VersaCommerce CLI

      Versacommerce::CLI ist ein Kommandozeilen-Werkzeug, das mit verschiedenen VersaCommerce-Services interagieren kann. Unter anderem mit der Theme-API, um die Bearbeitung von Themes zu vereinfachen. Voraussetzungen Linux oder Mac OSX Ruby ≥ 2.0.0 ...
    • Template

      Template Inhalt der Variable template index.html index collection.html collection product.html product page.html page cart.html cart checkout/payment payment checkout/confirm confirm checkout/thankyou thankyou Dieser Code könnte in das Template ...
    • Integrations

      Integrations bieten die Möglichkeit, beliebigen Code in Theme- und E-Mail-Templates unterzubringen. Dazu kann jede Integration drei pflegbare Templates enthalten: Das Head-Template Das Body-Template Das E-Mail-Template Wo erscheint der erzeugte Code? ...
    • FTP Zugriff

      VersaCommerce erlaubt es Ihnen, beliebig viele Designs zu hinterlegen. Damit Sie Ihre Designs bequem pflegen können, hat jeder VersaCommerce-Shop einen eigenen FTP-Zugriff. Dort können Sie Ihre Designs bearbeiten und hochladen. Sie können auf Ihren ...