Tagi i zmienne dostępne w szablonie strony (layout)

W szablonie strony (Strona WWW > Szablony) można używać specjalnych tagów CMS, zmiennych Liquid i elementów dynamicznych JS. Poniżej pełna lista.

Tagi CMS - menu

<cms type="menu" kind="list" from="-2"></cms>

Parametr from:

• numer menu - które menu główne (1, 2, 3...)
• -1 - wybrane podmenu
• -2 - wybrane menu (zalecane)

Parametr kind:

• list - menu proste, jeden poziom
• list_2 - menu proste, dwa poziomy
• tree_toggled - wielopoziomowe klikalne (pionowe)
• tree_toggled_2 - wielopoziomowe rozwijane
• tree - wielopoziomowe rozwinięte (pionowe)
• sitemap - mapa strony

Tagi CMS - box i komponenty

Box - miejsce na paragrafy (treści) na stronie:

<cms type="box" id="1"></cms>

Box z ograniczeniem na jeden paragraf (np. do bannera):

<cms type="box" id="2" max="1"></cms>

Komponenty - gotowe elementy do wstawienia w layout:

<cms:component type="user"/>          Menu użytkownika (logowanie, rejestracja)
<cms:component type="user_simple"/>   Uproszczone menu użytkownika
<cms:component type="lang"/>          Przełącznik języka
<cms:component type="logo"/>          Logo witryny
<cms:component type="search"/>        Wyszukiwanie (strona + sklep)
<cms:component type="www_search"/>    Wyszukiwanie tylko na stronie
<cms:component type="shop_search"/>   Wyszukiwanie w sklepie
<cms:component type="breadcrumb"/>    Ścieżka nawigacji
<cms:component type="mini_cart"/>     Koszyk sklepowy
<cms:component type="wishlist"/>      Lista życzeń
<cms:component type="page_changelog"/> Rejestr zmian

Wstawianie innego szablonu (szablon częściowy):

<cms:include name="nazwa_layout"/>

Zmienne Liquid - strona (page)

Zmienne strony - wstawiają dane aktualnie wyświetlanej strony:

{{page.title}}          Tytuł strony z suffixem portalu (np. "O nas - Firma")
{{page.name}}           Sama nazwa strony bez suffiksu
{{page.html_title}}     Tytuł HTML (SEO) z suffixem portalu
{{page.parsed_title}}   Tytuł w formie URL
{{page.url}}            Adres URL strony
{{page.id}}             ID strony
{{page.lang}}           Język strony
{{page.html_description}}  Meta opis
{{page.html_keywords}}     Meta słowa kluczowe
{{page.html_script}}       Skrypt JS w sekcji head
{{page.html_script_end}}   Skrypt JS na końcu strony (przed </body>)
{{page.layout_config}}     Konfiguracja layoutu
{{page.page_layout_id}}    ID szablonu
{{page.var1}}           Zmienna 1 (dowolna wartość ustawiana per strona)
{{page.var2}}           Zmienna 2
{{page.var3}}           Zmienna 3

Zmienne Liquid - portal

Zmienne portalu (witryny) - wspólne dla wszystkich stron w danej witrynie:

{{portal.name}}         Nazwa portalu
{{portal.parsed_name}}  Nazwa w formie URL
{{portal.html_title}}   Tytuł HTML portalu (z ustawień witryny)
{{portal.url}}          Adres URL portalu
{{portal.lang}}         Język portalu
{{portal.html_lang}}    Atrybut lang HTML
{{portal.url_lang}}     URL z prefixem języka
{{portal.logo_url}}     URL logo
{{portal.logo_exists}}  Czy logo istnieje (true/false)
{{portal.enable_wcag21}} Czy WCAG 2.1 włączony
{{portal.enable_amp}}   Czy AMP włączony

Zmienne systemowe

{{powered_by}}          Link "Powered by Siteor"
{{year}}                Aktualny rok
{{siteor.css}}          Systemowe style CSS (wymagane)
{{siteor.javascript}}   Systemowe skrypty JS (wymagane)
{{body_mode_class}}     Klasa CSS body: edit/preview/normal (v3)

Instrukcje warunkowe Liquid

W layoucie możesz używać logiki warunkowej Liquid - np. wyświetlić coś tylko na wybranych stronach:

{% if page.var1 == 'promo' %}
  <div class="promo-banner">Promocja!</div>
{% endif %}

{% if page.lang == 'pl' %}
  <p>Wersja polska</p>
{% elsif page.lang == 'en' %}
  <p>English version</p>
{% endif %}

Więcej o instrukcjach warunkowych: Informacje wstępne

Elementy dynamiczne (JavaScript)

Te elementy wypełniają się po załadowaniu strony przez JavaScript:

#cms_user_menu       Wstawia menu logowanie/wylogowanie
.user_logged_in      Widoczne gdy użytkownik jest zalogowany
.user_not_logged_in  Widoczne gdy NIE jest zalogowany
#current_user_login  Wstawia login użytkownika
#current_user_avatar Wstawia avatar użytkownika
#page_counter        Licznik odwiedzin strony
#portal_counter      Licznik odwiedzin całej witryny

Przykład:

<div class="user_logged_in" style="display:none;">
  Witamy <span id="current_user_login"></span>
</div>
<div class="user_not_logged_in" style="display:none;">
  Prosimy o zalogowanie
</div>

Pliki CSS, grafiki, JS

Pliki zarządzane przez CMS (style, grafiki, skrypty) znajdują się pod adresem:

https://fs.siteor.com/NAZWA_KONTA/files/layout/*

Odwołanie do CSS w szablonie:

<link href="https://fs.siteor.com/NAZWA_KONTA/files/layout/default/main.css" media="screen" rel="stylesheet" type="text/css" />