Pliki szablonu

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>

Czy ten artykuł był pomocny?