Konfigurace

Každá šablonu může obsahovat souboru config.json s popisem vlastností šablony. Některé jsou automaticky generované (plugins, …) a další lze měnit.

Seznam konfigurací

Atributy config.json
Atribut Hodnota Default Popis
responsive bool false šablona je responzivní - aktivuje viewport
webfonts array [] seznam Google WebFonts
features array [] seznam podporovaných speciálních funkcí (last_viewed_products)
cartSteps array [] kroky v košíku (parametr v url) v pořadí jak jdou za sebou
typekit string ID Typekit fontů
skipOrderSummary bool false přeskočit krok Pokladna
countryBeforeDelivery bool false dodací stát se vybírá v kroku před výběrem dodání
wysiwyg object {} seznam tříd (a css pravidel) používaných ve wysiwygu
settings object {} definice nastavení pro administraci
fulltext bool true povolit indexování vyhledávači
mobile bool false šablona je pouze pro mobily
viewportDesktop int šířka viewportu při vynucení desktop verze u responzivní grafiky
skipOnFirstPage object kolik položek výpisu přeskočit na první straně výpisů
limitOnFirstPage object kolik položek výpisu vypsat na první straně výpisů
inputInLabel bool true u generovaných formulářů vkládat checkbox/radio do label
manifest object definice pro manifest.json <https://developer.mozilla.org/en-US/docs/Web/Manifest>
allowedPagination array seznam povolených hodnot změny stránkování

features

  • last_viewed_products: ukládají se navštívené produkty, takže je pak lze v šabloně vypisovat

cartSteps

Pokud eshop používá více kroků v košíku (v URL je vidět například /Kosik?sekce=adresa), tak je potřeba je v nastavení vyjmenovat. Neuvádí se přímo /Kosik a /Pokladna, ale pouze parametry doplněné navíc. Například „cartSteps“:[„adresa“,“dodani“]

Příklad konfigurace

{
    "webfonts":[
        "Open Sans:400,600,700"
    ],
    "responsive": true,
    "wysiwyg": [
        {
            "name": "important paragraph",
            "css": "p.wysiwyg_important {color: #F5007E;}"
        },
        {
            "name": "small paragraph",
            "css": "p.wysiwyg_small {font-size:0.9em}"
        }
    ],
    "skipOnFirstPage": {
        "categoryProducts": 1,
        "filteredCategoryProducts": 0,
        "topicArticles": 1,
        "allArticles": 2
    },
    "limitOnFirstPage": {
        "categoryProducts": 1,
        "filteredCategoryProducts": 0,
        "topicArticles": 1,
        "allArticles": 2
    },
    "manifest": {
        "display": "standalone",
        "background_color": "#ff00ff",
        "theme_color": "#ff00ff",
        "tile_color": "#ff00ff",
    },
    "settings": {
        "menu_mode": {
          "label": "Režim menu",
          "context": "global",
          "default": "small",
          "type": "select",
          "group": "Levý sloupec",
          "values": {
            "small": "malé menu",
            "big": "velké menu"
          }
        }
    }
}

Settings

V sekci _settings_ lze definovat, jaké hodnoty šablony půjdou nastavovat přímo z administrace. Lze použít například na přepínání grafických prvků (např. zimní šablona), nastavení odkazů do patičky nebo u jednotlivých kategorií vybírat režim zobrazení.

context
Hodnota Popis
global dostupné napříč celým eshopem
category pouze v kategorii a nastavuje se pro každou zvlášť
product_category nastavuje se zvlášť pro každou kategorii a použije se v detailu produktu
type
Hodnota Popis
select univerzální roletka
text_page textová stránka
article_topic téma článku
banner_section sekce bannerů
upsell_group skupina upsellu
attribute_group skupina parametrů
attribute parametr
category kategorie

Příklad konfigurace:

{
    "settings": {
        "sibebar_mode": {
          "label": "Režim postraního panelu",
          "description": "Přepínání způsobu zobrazení levého sloupce webu",
          "context": "global",
          "default": "small",
          "group": "Levý sloupec",
          "type": "select",
          "values": {
            "small": "malé menu",
            "big": "velké menu"
          }
        },
        "category_mode": {
          "label": "Režim zobrazení kategorie",
          "context": "category", // nastavuje se zvlášť pro každou kategorii
          "default": "default",
          "type": "select",
          "values": {
            "default": "standardní zobrazení",
            "big_banner": "zobrazit s velkým bannerem"
          }
        },
        "product_mode": {
          "label": "Režim zobrazení produkt",
          "context": "product_category", // nastavuje se zvlášť pro každou kategorii a použije se v detailu produktu
          "default": "default",
          "type": "select",
          "values": {
            "default": "standardní zobrazení",
            "big_banner": "zobrazit s velkým bannerem"
          }
        },
        "footer_menu": {
          "label": "Položky patičky",
          "context": "global", // na celém webu
          "type": "text_page", // vybrat textovou stránku
          "multiple": true // výběr více stránek s možností řazení (v šabloně pak je pole stránek)
        }
    }
}

Použití v šabloně:

{% if this.templateAttributes.sibebar_mode == 'small' %}
    malý sidebar
{% endif%}

Master šablona

Master šablona je vzorem pro další šablony. Definuje seznam proměnných, které mohou podřazené šablony měnit.

Příklad konfigurace:

{
    "master" : {
        "tpl": {
            "phone": {
                "name": "Telefon",
                "default": "+420 333 222 111"
            },
            "email": {
                "name": "E-mail",
                "type": "email",
                "language": true,
                "default": "info@example.org"
            },
            "facebook": {
                "name": "Facebook URL",
                "type": "url"
            },
            "showRelevantItems": {
                "name": "Zobrazit nabídku podobných produktů",
                "type": "bool"
            },
            "pageFooterId": {
                "name": "Text v patičce",
                "type": "page"
            },
            "listStyle": {
                "name": "Stype výpisu produktů",
                "type": "select",
                "values" : {
                    "simple": "jednoduchý",
                    "large_image": "velké obrázky",
                }

            }
        },
        "sass": {
            "primary-color": {
                "name": "Hlavní odstín",
                "type": "color",
                "default": "#fff",
                "group": "Barvy"
            }
        },
        "files": {
            "banner.png": "Obrázek v hlavičce"
        },
        "languageFiles": {
            "logo.png": "Logo eshopu"
        }
    }
}

Pro použití proměnných v SASS je potřeba v _settings.scss přidat (kamkoliv v souboru) řádek //<SLAVE-CONFIG>// - ten se při kompilaci nahradí proměnnými z konfigurace.

$pagination-mobile-items: true;
$pagination-arrows: false;
//<SLAVE-CONFIG>//

Slave šablona se aktivuje smazání všech souborů přidáním souboru slave.json

{
    "master": "master-template-name"
}

Favicon

Jako favicon stránky je použit soubor images/favicon/favicon.ico nebo images/favicon/favicon.ico.

Pro Safari ikonku je použit soubor images/favicon/mask-icon-ffffff.svg, kde ffffff můžete nahradit vlastním kódem barvy. Více informací najdete v dokumentaci.

Pro dlaždice na Windows Phone se použijí soubory začínající /images/favicon/ms-tile- - je nutné dodržet rozměr dle dokumentace.

Všechny ostatní soubory se použijí jako alternativní ikonky a je vhodné nahrát ikonky v různých velikostech kvůli retina displejům.