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í

criticalCss

object

nastavení generování critical CSS

variantChoice

object

podporované typy výběru variant

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

fields

Typy textů definované v configu se zobrazí jako textová pole v administraci. Po vyplnění jsou dostupné v šabloně přes zápis object.text(‚vlastni_kod_textu‘). Do configu se uvádí také popisek pole zobrazený v administraci a vysvětlení, kde se vyplněný text zobrazí a jaká má případně omezení.

Podporované objekty: transport, paymentMethod, textPage, store, admin, category, brand

Podporované formáty: html, textarea, text

{
    "fields": {
        "transport": {
            "text": {
                "short" : {
                    "label": "Krátký popisek",
                    "format": "html",
                    "description": "Zobrazuje se košíku po najetí myší na způsob dopravy"
                },
                "long" : {
                    "label": "Dlouhý popis",
                    "format": "html",
                    "description": "Zobrazuje se na informační stránce a může mít 2-3 odstavce"
                }
            }
        }
    }
}

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"
          }
        }
    },
    "criticalCSS": {
        "index": {
            "forceInclude": [".main-banner"],
            "forceExclude": [".video-player"]
        }
    },
    "variantChoice": {
        "code": "default",
        "modes": {
            "dropdown": "roletka s názvy",
            "icons": "obrázky s názvem"
        }
    }
}

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

string

text (jeden řádek bez HTML)

color

barva (hexa kód)

text_page

textová stránka

article

článek

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
          "lang": true, // nastavuje se pro každý jazyk samostatně - při přidání lang:true se skryje původně nastavená hodnota
          "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.