Verzeichnisstruktur

Ein Theme umfasst folgende Verzeichnisse:

assets-Verzeichnis

Im assets-Verzeichnis können Ressourcen wie Bilder, CSS-Stylesheets, Javascript-Dateien, Fonts, etc. für den Theme abgelegt werden. Für eine bessere Organisation können im assets-Verzeichnis auch Unterverzeichnisse angelegt. Mit Hilfe des <cmd>asset_url</cmd> Befehl, können die Dateien im assets-Verzeichnis innerhalb eines Templates referenziert werden.

layout-Verzeichnis

Das layout-Verzeichnis enthält ein oder mehrere Layout-Templates für den Theme. Alle Templates im templates-Verzeichnis werden innerhalb eines Layout-Template gerendert. Falls innerhalb des Templates nicht anderes angegeben, wird per Default das theme.liquid als Layout-Template verwendet. Daher sollte in diesem Verzeichnis immer eine Datei mit dem Namen theme.liquid abgelegt werden. Weitere Informationen befinden sich unter dem Kapitel Layout.

locale-Verzeichnis

Im locale-Verzeichnis können sprachabhängige Beschriftungen hinterlegt werden. Der Dateiname muss dabei einem zweistelligen Sprachcode nach ISO-639-1 entsprechen und die Endung ".json" besitzen (z.B. "en.json"). Die Beschriftungen werden als flaches JSON-Objekt definiert. Nachfolgend ein Beispiel für den Dateiinhalt.

<code-block>
{
  "first_page": "Start",
  "next_page": "Next",
  "previous_page": "Back",
  "last_page": "End"
}
</code-block>

Innerhalb eines Templates stehen die Beschriftungen über das globale Objekt <obj>labels.theme</obj> zur Verfügung.

settings-Verzeichnis

Im settings-Verzeichnis können sprachunabhängige Einstellungen für den Theme hinterlegt werden. Dazu muss eine Datei mit dem Namen "settings_data.json" angelegt werden. Der Inhalt der Datei muss einem JSON-Objekt entsprechen. Alle Einstellungen werden dabei als flaches JSON-Objekt unterhalb des Keys "current" gepflegt. Nachfolgend ein Beispiel für den Dateiinhalt.

<code-block>
{
  "current": {
    "sample_key_1": "sample_value_1",
    "sample_key_2": "sample_value_2",
    "sample_key_3": "sample_value_3"
  }
}
</code-block>

Innerhalb eines Templates stehen die Einstellungen unterhalb des Keys "current" über das globale Objekt <obj>settings</obj> zur Verfügung.

snippets-Verzeichnis

Im snippets-Verzeichnis können alle benötigten Snippets abgeleget werden. Die Snippets müssen dabei die Dateiendung ".liquid" besitzen. Für die Einbindung eines Snippets in ein Template, steht der <cmd>include</cmd> Befehl zur Verfügung.

templates-Verzeichnis

Im templates-Verzeichnis werden alle Standard-Templates abgelegt:

Beispiel

Nachfolgend sehen Sie ein Beispiel für den Aufbau der Verzeichnisstruktur.

<code-block> - assets/
    |-- css/
    |    |-- style.css
    |    ...
    |
    |-- js/
    |    |-- script.js
    |    ...
    |
    |-- img/
    |    |-- logo.png
    |    ...

- layout/
    |-- theme.liquid
    ...

- locale/
     |-- de.json
     |-- en.json
     ...

- settings/
     |-- settings_data.json
 
- snippets/
     |-- pagination.liquid
     ...

- templates/
     |-- checkout/
     |    |-- login.liquid
     |    |-- confirm.liquid
     |    ...
     |
     |-- order/
     |    |-- payment_launch.liquid
     |    ...
     |
     |-- customer/
     |    |-- index.liquid
     |    |-- product_list.liquid
     |    ...
     |  
     |-- email/
     |    |-- order_confirmation.liquid
     |    ...
     |
     |-- product.liquid
     |-- product_list.liquid
     ...
</code-block>