Šablony

Adresář šablony by měl obsahovat soubory theme.yaml, version.yaml a assets/images/theme-preview.png.

Informace o šabloně

Soubor s informacemi o šabloně theme.yaml obsahuje popis šablony, jméno autora, URL webových stránek autora a další informace. Soubor by měl být umístěn do kořenového adresáře šablony:

├── themes
|   └── website
|       ├── pages
|       ├── layouts
|       ├── partials
|       ├── content
|       ├── assets
|       └── theme.yaml <== Informační soubor

Následující pole jsou podporována v souboru theme.yaml:

PolePopis
namespecifikuje název šablony, povinné.
authorspecifikuje jméno autora, povinné.
homepagespecifikuje URL webových stránek autora, povinné.
descriptionpopis šablony, povinné.
previewImagevlastní náhledový obrázek, cesta relativní k adresáři šablony, např: assets/images/preview.png, volitelné.
formkonfigurační pole nebo odkaz na soubor definice polí formuláře, používaný pro přizpůsobení šablony, volitelné.

Příklad souboru theme.yaml:

name: 'Rocketoo šablona'
description: 'Základní šablona pro e-shop Rocketoo.'
author: 'Digital Wizards'
homepage: 'https://digitalwizards.cz'

Soubor verze

Soubor verze šablony version.yaml definuje aktuální verzi šablony a changelog. Soubor by měl být umístěn do kořenového adresáře šablony.

├── themes
|   └── website
|       ├── ...
|       └── theme.yaml
|       └── version.yaml <== Soubor verze

Soubor obsahuje následující formát:

v1.0.1: 'Inicializace šablony'
v1.0.2: 'Přidány další funkce'
v1.0.3: 'Některé funkce byly odstraněny'

Náhledový obrázek šablony

Náhledový obrázek šablony se používá v administraci Rocketoo při výběru šablony. Soubor obrázku theme-preview.png by měl být umístěn do adresáře assets/images šablony:

├── themes
|   └── main-theme
|       ├── ...
|       └── assets
|           └── images
|               └── theme-preview.png <== Náhledový obrázek

Šířka obrázku by měla být minimálně 600px. Ideální poměr stran je 1.5, například 600x400px.

Přizpůsobení šablony

Šablony mohou podporovat konfigurační hodnoty definováním klíče form v informačním souboru šablony. Tento klíč by měl obsahovat konfigurační pole nebo odkaz na soubor definice polí formuláře. Více informací najdete v dokumentaci o polích formuláře.

Následující příklad ukazuje, jak definovat konfigurační pole názvu webu s názvem site_name:

name: 'Rocketoo šablona'
# [...]

form:
    fields:
        site_name:
            label: 'Název webu'
            comment: 'Název webu, jak by se měl zobrazovat na front-endu'
            default: 'Můj úžasný web!'

Hodnota pak může být přístupná uvnitř jakékoli šablony tématu pomocí globální Twig proměnné nazvané this.theme.

<h1>Vítejte na {{ this.theme.site_name }}!</h1>

Můžete také definovat konfiguraci v samostatném souboru, kde cesta je relativní k šabloně. Následující definice bude načítat pole formuláře ze souboru config/fields.yaml uvnitř šablony.

name: 'Rocketoo šablona'
# [...]

form: config/fields.yaml

themes/demo/config/fields.yaml:

fields:
    site_name:
        label: 'Název webu'
        comment: 'Název webu, jak by se měl zobrazovat na front-endu'
        default: 'Můj úžasný web!'

Používání dat šablony v CSS

Někdy chcete zahrnout vizuální preference do stylu vaší šablony. Můžete použít CSS vlastní vlastnosti (proměnné), aby tyto hodnoty byly dostupné. V následujícím příkladu použijeme typ pole Color Picker k zadání vlastní barvy odkazů.

form:
    fields:
        # [...]

        link_color:
            label: 'Barva odkazů'
            type: 'colorpicker'

S použitím výše uvedeného příkladu můžeme definovat partial, který předá vybranou hodnotu do CSS pomocí lokálního stylu. Partial je pak zahrnut do layoutu šablony uvnitř tagu <head>.

<style>
    :root {
        --my-color: {{ this.theme.link_color }};
    }
</style>

ℹ️

Názvy vlastních vlastností rozlišují velká a malá písmena, takže --my-color bude považováno za oddělenou vlastní vlastnost od --My-color.

Nyní uvnitř vašeho stylu lze vlastní vlastnost použít kdekoli zadáním názvu vlastní vlastnosti uvnitř funkce var() místo běžné hodnoty vlastnosti.

a {
    color: var(--my-color);
}

Lokalizace

Šablony mohou obsahovat texty v různých jazycích pomocí systému lokalizace. Překlady jsou uloženy v adresáři langfe a v šablonách se používá filtr |_ pro zobrazení přeložených textů.

ℹ️

Lokalizace umožňuje zobrazovat obsah v různých jazycích podle nastavení uživatele nebo webu.

Struktura lokalizačních souborů

Níže je příklad struktury adresáře s překlady.

├── themes
|   └── main-theme
|       └── langfe <== Lokalizační adresář
|           ├── en.php <== Anglické překlady
|           └── sk.php <== Slovenské překlady

Soubory obsahují PHP pole s klíči a přeloženými texty:

themes/main-theme/langfe/en.php: 

<?php return array (
    'Jste tu poprvé?' => 'First time here?',
    'Zaregistrujte se' => 'Register',
    'Ještě u nás nemáte účet?' => 'Don\'t have an account yet?',
    'Více' => 'More',
    'Oblíbené' => 'Favorites',
    'V případě dotazů nás kontaktujte' => 'Contact us for questions',
    'Účet' => 'Account',
    'Zobrazit filtry' => 'Show filters',
    'Skrýt filtry' => 'Hide filters',
    'Číst více' => 'Read more',
    'Přejít k objednávce' => 'Go to order',
);

themes/main-theme/langfe/sk.php: 

<?php return array (
    'Jste tu poprvé?' => 'Ste tu prvýkrát?',
    'Zaregistrujte se' => 'Zaregistrujte sa',
    'Ještě u nás nemáte účet?' => 'Ešte u nás nemáte účet?',
    'Více' => 'Viac',
    'Oblíbené' => 'Obľúbené',
    'V případě dotazů nás kontaktujte' => 'V prípade otázok nás kontaktujte',
    'Účet' => 'Účet',
    'Zobrazit filtry' => 'Zobraziť filtre',
    'Skrýt filtry' => 'Skryť filtre',
    'Číst více' => 'Čítať viac',
    'Přejít k objednávce' => 'Prejsť k objednávke',
);

Použití v šablonách

V šablonách používejte filtr |_ pro zobrazení přeložených textů:

<h1>{{ 'Jste tu poprvé?'|_ }}</h1>

<nav>
    <a href="/account">{{ 'Účet'|_ }}</a>
    <button>{{ 'Zobrazit filtry'|_ }}</button>
    <button>{{ 'Skrýt filtry'|_ }}</button>
</nav>

<a href="#" class="read-more">{{ 'Číst více'|_ }}</a>
<button type="submit">{{ 'Přejít k objednávce'|_ }}</button>

⚠️

Pokud překlad pro daný klíč neexistuje, zobrazí se původní český text jako fallback.

Parametry v překladech

Některé překlady mohou obsahovat parametry označené dvojtečkou:

'K dopravě zdarma zbývá <strong>:amount</strong>!' => 'Free shipping <strong>:amount</strong> left!',
'Vytvořeno :date' => 'Created at :date',

V šablonách je pak můžete použít s parametry:

{{ 'K dopravě zdarma zbývá <strong>:amount</strong>!'|_({'amount': free_shipping.total}) }}
{{ 'Vytvořeno :date'|_({'date': '3.10.2024'}) }}

Obsah