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

• multiline_menu_items: název kategorie pro menu lze v administraci ukládat s odřádkováním

• upsell_customer_note: upsell podporuje zadání poznámky zákazníkem

• upsell_customer_upload: upsell podporuje upload souboru zákazníkem

• google_recaptcha_enterprise_cart: Google reCaptcha Enterprise v košíku

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. U jednotlivých kroků se pak uvádí kódové označení, jaký obsah je v konkrétním kroku (content, delivery, address, summary).

{
  "cartSteps": [
    {
      "handles": [
        "content"
      ]
    },
    {
      "handles": [
        "delivery"
      ],
      "query": "dodani"
    },
    {
      "handles": [
        "address"
      ],
      "query": "adresa"
    }
  ]
}

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, product, author, upsellGroup

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"
                }
            },
            "image": {
                "ico" : {
                    "label": "Ikonka výběru",
                    "description": "Zobrazuje se košíku po najetí myší na způsob dopravy"
                }
            }
        }
    }
}

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)
email	e-mail
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
attribute_article	parametr článku
attribute_store	parametr prodejny
attribute_customer	parametr uživatele
category	kategorie
product	produkt
product_list	výběr produktů podle vlastností
product_rules	pravidla skupiny produktů
url	libovolná adresa z eshopu (včetně textu odkazu a title)
admin	správce eshopu
store	prodejna
working_hours	otevírací doba
image	nahraný obrázek (SVG/PNG/JPG/…)

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

Favicon není součástí šablony a nahrává se v administraci eshopu pro každou doménu samostatně.