Vorlagendateien – Pliki szablonu

Vorlagendateien

Vorlagendateien sind im Administrationsbereich oder über das Comarch Webshop Liquid Sync-Tool verfügbar. Gehe in das Panel des Webshops zum Abschnitt Webshop Layout / Einstellungen des Webshops, wähle im Menü Mehr die Option Erweiterte Einstellungen bearbeiten, wähle in diesem Abschnitt das Menü Mehr und wähle die Option HTML bearbeiten.

Die Vorlage verwendet Dateien :

  • mit Stylesheets,
  • grafische,
  • Skripte,
  • andere Dateien

Vorlagendateien werden in Systemverzeichnisse und Benutzerverzeichnisse gruppiert. Zulässige Dateierweiterungen:

  • mit Stylesheets: .css
  • grafische: .gif, .jpg, .jpeg, .png, .ico
  • skripte : .js
  • andere Dateien: .htm, .html, .liquid
 

Zulässige Zeichen in Dateinamen:

  • Zahlen : 0-9
  • Kleinbuchstaben: a-z (keine diakritischen Zeichen)
  • Sonderzeichen: Bindestrich, Unterstrich, Punkt
 

Beim Hochladen einer Datei von der Festplatte werden Großbuchstaben in Dateinamen (und Verzeichnissen) automatisch in Kleinbuchstaben geändert. Andere als die angegebenen Sonderzeichen werden durch einen Unterstrich ersetzt.

Die Dateien in der Vorlage müssen ordnungsgemäß codiert sein.UTF-8-Kodierung ohne BOM. Die Dateien dürfen keine Steuerzeichen enthalten.

Datei- und Verzeichnisnamen beginnend mit „__” (zwei Unterstriche) sind für Comarch reserviert. Verzeichnisse und Dateien mit diesem Namen erfüllen spezielle Funktionen in der Vorlage oder den Vorlagenverwaltungswerkzeugen.

Verzeichnisaufbau

Systemkataloge

Die Struktur der „System“-Verzeichnisse in der Vorlage

Pliki szablonu: 1 - Struktura katalogów systemowych

Im CSS-Verzeichnis sollte Dateien mit Stylesheets hinzufügen, die in der Vorlage verwendet werden.

Die in der Vorlage verwendeten Grafikdateien sollten dem Verzeichnis css / img hinzugefügt werden.

Die in der Vorlage verwendeten Skriptdateien sollten dem js-Verzeichnis hinzugefügt werden.

Die restlichen in der Vorlage verwendeten Dateien (Seiten, Einfügungen) sollten dem ROOT-Verzeichnis hinzugefügt werden.

Pliki szablonu: 2 - Katalog root

Vorlagendateien mit Stylesheets, Grafiken und Skripten müssen sich in den oben genannten Verzeichnissen befinden. Andernfalls werden sie von Webbrowsern nicht richtig interpretiert.

Benutzerverzeichnisse

Die Benutzerverzeichnisstruktur ist willkürlich. Es ist wichtig, die Anzahl der Verschachtelungsebenen auf ein Minimum zu beschränken.

Eine übermäßig komplexe Verzeichnisstruktur wird im Vorlagensynchronisierungstool möglicherweise nicht unterstützt.

Zulässige Zeichen in Verzeichnisnamen:

  • Zahlen: 0-9
  • Kleinbuchstaben: a-z (keine diakritischen Zeichen)
  • Sonderzeichen: Bindestrich, Unterstrich
 

Benutzerdateien im Webshop

Benutzerdateien (usr / *-Verzeichnis) können in der Vorlage verwendet werden. Beachten Sie jedoch, dass Benutzerdateien:

  • werden nicht aus der Seitenvorlagendatei importiert
  • werden nicht in die Seitenvorlagendatei exportiert

Die Vorlage darf keine Dateien aus Verzeichnissen verwenden:

  • Katalog App_Themes/
  • Katalog view/
  • Katalog scripts/
  • Katalog images/
  • Katalog t/
  • Katalog m/
  • Katalog fb/
 

Diese Verzeichnisse enthalten das Erscheinungsbild der vorhandenen Vorlagen (ohne die Liquid-Technologie).

Plik __settings.liquid

Die Datei __settings.liquid wird verwendet, um eine grafische Oberfläche zum Ändern von Vorlageneinstellungen zu erstellen.Diese Datei wird vom Vorlagenautor erstellt.

Anforderungen für die Einstellungsüberlagerung:

  • Der Dateiname ist __settings.liquid
  • Die Datei implementiert die Funktion __SaveLiquidSettings(). Diese Funktion gibt das js-Objekt zurück, aus dem die Einstellungen gespeichert werden. Die Eigenschaften dieses Objekts können nur einfache Typen und Arrays enthalten. Du kannsr jedoch keine Objekte enthalten.

__SaveLiquidSettings()

Die Funktion gibt das js-Objekt zurück, aus dem die Einstellungen für die Vorlage gespeichert werden.

Die Funktion wird automatisch beim Speichern der Einstellungen im Administrationsbereich aufgerufen.

Das Panel wird durch Drücken der Schaltfläche Speichern abgeschlossen Pliki szablonu: 3 - Przycisk zapisz.

Die Funktion besteht darin, alle Einstellungen zurückzugeben, sowohl die geänderten als auch die vom Benutzer unveränderten.

Ein Beispiel für den Dateiinhalt __settings.liquid

<style>
.settings {
height: 100px;
width: 300px;
border: solid 1px #000000;
padding: 8px;
margin: 8px;
}
</style>
<div class=”settings”>
color1:
<input name=”color1″ type=”color” value=”{{settings.color1}}” />
color2:
<input name=”color2″ type=”color” value=”{{settings.color2}}” />
</div>
<script>
function __SaveLiquidSettings() {
var o = {};
//zebranie wszystkich ustawień i zbudowanie z nich obiektu.
//przykładowa implementacja:
$(„.settings input”).each(function (el, el2) { o[el2.name] = el2.value; });
return o;
}
</script>

Pliki szablonu

Pliki szablonu dostępne są w panelu administracyjnym lub poprzez narzędzie Comarch e-Sklep Liquid Sync. W panelu sklepu należy przejść do sekcji Wygląd sklepu/Ustawienia w menu więcej należy wybrać opcję Edytuj ustawienia zaawansowane w tej sekcji ponownie wybieramy menu więcej i wybieramy opcję Edytuj HTML.

W szablonie wykorzystywane są pliki:

  • z arkuszami stylów
  • graficzne
  • skryptów
  • pozostałe pliki

Pliki szablonu grupowane są katalogach systemowych oraz katalogach użytkownika.
Dopuszczalne rozszerzenia plików:

  • z arkuszami stylów: .css
  • graficzne: .gif, .jpg, .jpeg, .png, .ico
  • skryptów: .js
  • pozostałe pliki: .htm, .html, .liquid

 Dopuszczalne znaki w nazwach plików:

  • liczby: 0-9
  • małe litery: a-z (bez znaków diaktrycznych)
  • znaki specjalne: łącznik, znak podkreślenia, kropka

 W trakcie wgrywania pliku z dysku duże litery znajdujące się w nazwach plików (i katalogów) zostaną automatycznie zamienione na małe litery. Znaki specjalne inne niż wskazane zostaną zamienione na znak podkreślenia.

Pliki w szablonie muszą być poprawnie kodowane. Kodowanie UTF-8 bez BOM. Pliki nie mogą zawierać znaków kontrolnych.

Nazwy plików i katalogów zaczynających się od „__” (dwa znaki podkreślenia) są zastrzeżone dla Comarch. Katalogi i pliki z taką nazwą pełnią specjalne funkcje w szablonie lub narzędziach do zarządzania szablonem.

Struktura katalogów

Katalogi „systemowe”

Struktura katalogów „systemowych” w szablonie

Pliki szablonu: 1 - Struktura katalogów systemowych

W katalogu css należy dodać pliki z arkuszami stylów wykorzystywanych w szablonie.

W katalogu css/img należy dodać pliki graficzne wykorzystywane w szablonie.

W katalogu js należy dodać pliki skryptów wykorzystywane w szablonie.

W katalogu ROOT należy dodać pozostałe pliki wykorzystywane w szablonie (strony, wstawki).

Pliki szablonu: 2 - Katalog root

Pliki szablonu z arkuszami stylów, graficzne i skryptów muszą znajdować się we wskazanych powyżej katalogach. W przeciwnym wypadku nie będą poprawnie interpretowane przez przeglądarki internetowe.

Katalogi użytkownika

Struktura katalogów użytkownika jest dowolna. Należy przestrzegać, by liczba poziomów zagnieżdżeń była ograniczona do niezbędnego minimum.

Zbytnio rozbudowana struktura katalogów może nie być wspierana w narzędziu do synchronizacji szablonów.

Dopuszczalne znaki w nazwach katalogów:

  • liczby: 0-9
  • małe litery: a-z (bez znaków diaktrycznych)
  • znaki specjalne: łącznik, znak podkreślenia

 

Pliki użytkownika w sklepie

W szablonie można korzystać z plików użytkownika (Katalog usr/*). Należy jednak mieć na uwadze, że pliki użytkownika:

  • nie będą importowane z pliku z szablonem stron
  • nie będą eksportowane do pliku z szablonem stron

W szablonie nie wolno korzystać z plików znajdujących się w katalogach:

  • Katalog App_Themes/
  • Katalog view/
  • Katalog scripts/
  • Katalog images/
  • Katalog t/
  • Katalog m/
  • Katalog fb/

 Katalogi te zawierają elementy wyglądu dotychczasowych szablonów (bez technologii Liquid).

Plik __settings.liquid

Plik __settings.liquid wykorzystywany jest do budowy interfejsu graficznego do zmiany ustawień szablonu.Plik ten przygotowuje autor szablonu.

Wymagania dla nakładki na ustawienia:

  • Nazwa pliku to __settings.liquid
  • Plik implementuje funkcję __SaveLiquidSettings(). Funkcja ta zwraca obiekt js, z którego zostaną zapisane ustawienia. Właściwości tego obiektu mogą zawierać tylko typy proste i tablice. Nie mogą natomiast zawierać obiektów.

__SaveLiquidSettings()

Funkcja zwraca obiekt js, z którego zostaną zapisane ustawienia dla szablonu.

Funkcja wywoływana jest automatycznie przy zapisie ustawień w panelu administracyjnym. Zapis ustawień w panelu odbywa się poprzez naciśnięcie przycisku ZapiszPliki szablonu: 3 - Przycisk zapisz.

Funkcja ma zwracać wszystkie ustawienia, zarówno te zmienione oraz te niezmienione przez użytkownika.

Przykład zawartości pliku __settings.liquid

<style>
.settings {
height: 100px;
width: 300px;
border: solid 1px #000000;
padding: 8px;
margin: 8px;
}
</style>
<div class=”settings”>
color1:
<input name=”color1″ type=”color” value=”{{settings.color1}}” />
color2:
<input name=”color2″ type=”color” value=”{{settings.color2}}” />
</div>
<script>
function __SaveLiquidSettings() {
var o = {};
//zebranie wszystkich ustawień i zbudowanie z nich obiektu.
//przykładowa implementacja:
$(„.settings input”).each(function (el, el2) { o[el2.name] = el2.value; });
return o;
}
</script>

War dieser Artikel hilfreich?