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
typekit string ID Typekit fontů
skipOrderSummary bool false přeskočit krok Pokladna
wysiwyg object {} seznam tříd (a css pravidel) používaných ve wysiwygu
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>

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",
    }
}

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.