Pliki szablonu

Spis treści

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 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>

<style>

.settings {

height: 100px;

width: 300px;

border: solid 1px #000000;

padding: 8px;

margin: 8px;

}

</style>

color1:

color2:

</div>

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

Struktura katalogów

Pliki użytkownika w sklepie

Plik __settings.liquid

Pliki szablonu

Struktura katalogów

Pliki użytkownika w sklepie

Plik __settings.liquid

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt