########### 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í ================== .. csv-table:: Atributy **config.json** :header: "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 ` **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). .. code-block:: json { "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** .. code-block:: json { "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 =================== .. code-block:: json { "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í. .. csv-table:: **context** :header: "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 .. csv-table:: **type** :header: "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í **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: .. code-block:: js { "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ě: .. code-block:: html+twig {% 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: .. code-block:: json { "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 *////* - ten se při kompilaci nahradí proměnnými z konfigurace. .. code-block:: scss $pagination-mobile-items: true; $pagination-arrows: false; //// Slave šablona se aktivuje smazání všech souborů přidáním souboru **slave.json** .. code-block:: json { "master": "master-template-name" } ======= Favicon ======= Favicon není součástí šablony a nahrává se v administraci eshopu pro každou doménu samostatně.