Produktové šablony

Článek pojednává o kódování produktových šablon 2. generace Shopecy, na konci se nachází převodní tabulka nastavení témat z 1. generace.

Šablony ve 2. genearci Shopecy využívají Latte enginu ke generování, díky tomu jsou zabezpečené proti code injection a také modularizovatelné, což usnadňuje přizpůsobení na každé úrovni.

Struktura

Speciální syntaxe

V šablonách je možné používat všechna přednastavená makra, filtry, které s sebou přináší Latte.

Navíc je možné (resp. nutné využít) následujících rozšíření:

CanShow funkce

Funkce kontroluje nastavení zda je povolené prvek zobrazit.

Parametry funkce: $page:string, $element:string, $position:string="on"

Parametr $page akceptuje pouze hodnoty: preview, detail, cart, variant

Návratová hodnota: bool

Příklad použití 1:

{if canShow('preview', 'annotation')}
   Anotace
{/if}

Kontroluje, zda je v preview povolena anotace - resp. zda je hodnota nastavení annotation = 'on'

Příklad použití 2:

{if canShow('preview', 'annotation', 'pricing')}
   Anotace
{/if}

Kontroluje, zda je v preview povolena anotace a zda se má zobrazit v prvku pricing - resp. zda je hodnota nastavení annotation = 'pricing'

Render makro

Tímto makrem se renderují jednotlivé modularizované šablony. Makro automaticky kontroluje, zda daná šablona nemá vlastní šablonu v tématu. V rámci šablon se díky tomu nemusí řešit žádné cesty, závislosti atd.

Makro přijámá libovolný počet parametrů, které jsou oddělené mezerou. První parametr je vždy název rendereru (šablony), která se má zpracovat (viz Struktura). Mezi parametry mohou být libovolné datové typy (string, int, proměnné..)

Příklad použití 1:

{render productPreview $product}

Renderuje pomocí ProductPreviewRendereru, kterému předá proměnné ['product' => $product] - klíč proměnné se automaticky přebírá z názvu proměnné.

Příklad použití 2:

{render productPreview 'product':$variant}

Renderuje pomocí ProductPreviewRendereru, kterému předá proměnné ['product' => $variant] - pomocí dvojtečky lze definovat název proměnné.

Příklad použití 3:

{render banner 'slot':'footer1'}

Renderuje pomocí BannerRendereru, kterému předá proměnné ['slot' => 'footer1']

Příklad použití 4:

{render connectedProducts $product 'type':ShopecaRenderersConnectedProductsConnectedProductsRenderer::TYPE_ALTERNATIVE}

Renderuje pomocí ConnectedProductsRendereru, kterému předá proměnné ['product' => $product, 'type' => ShopecaRenderersConnectedProductsConnectedProductsRenderer::TYPE_ALTERNATIVE] - dvojtečka pro pojmenování parametru se použije pouze při prvním výskutu, proto lze použít i statické proměnné objektů.

TranslateText makro

Tímto makrem se překládají langText klíče.

Makro podporuje dva parametry v pořadí: klíč:string, šablona pro klíč:string (nepovinná)

Příklad použití 1:

{_shop.detail.addToCart}

V překladové databázi se najde klíč "shop.detail.addToCart", který se propíše do šablony.

Příklad použití 2:

{_shop.detail.addToCart, <strong>%s</strong>|noescape}

V překladové databázi se najde klíč "shop.detail.addToCart", který se propíše do šablony obalený v tagu <strong>. Pokud šablona obsahuje HTML, je nutné použít Latte filter noescape k vypsání HTML.

Příklad použití 3:

{_shop.$type.addToCart}

Do klíče lze vložit část pomocí parametru (díky tomuto je možné mít pouze jeden BuyButtonRenderer, který dle typu vloží jiný popisek tlačítka přímo v šabloně bez nutnosti uvádět překlady v parametrech rendereru).

Možnost přizpůsobení ze strany tématu

Konfigurace šablon

V rámci settings.json tématu lze v sekci pages využít parametrů, které ovlivní generování základních šablon (názvy naleznete ve Struktuře).

Pokud např. chcete zakázat generování dostupnosti v preview na všech stránkách stačí vložit do settings následující:

"pages": {
   "general": {
      "preview-availability": "off"
   }
}

Pokud chcete zakázat generování dostupnosti pro previews pouze na stránce s detailem produktu, lze v nastavení uvést:

"pages": {
   "shop/product-detail": {
      "preview-availability": "off"
   }
}

Podporované typy stránek:

• shop/product-detail
• shop/category
• shop/ordered
• shop/checkout
• shop/methods
• shop/cart
• shop/order-pay
• customer/login
• customer/logout
• customer/favourite-products
• customer/renew
• customer/history
• customer/settings
• customer/registration
• cookieSettings
• article
• search
• homepage

Vlastní šablony

V rámci settings.json tématu lze přidat sekci templates, kde se budou hledat vlastní šablony na základě názvu, který koresponduje s názvem šablony v rendererech (viz Struktura). V rámci templates se neřeší jejich renderer, pouze název šablony (který je v rámci všech renderů unikátní).

Cesta k šabloně je relativní k adresáři tématu, doporučujeme pro šablony v tématu vytvvořit adresář templates a do něj např. odkazovat nastavením:

"templates": {
   "product-detail": "templates/product-detail.latte"
}

Přechod ze starší verze

2. generace Shopecy přináší přepracovaný systém nastavení témat, který hlavně přináší jednotné pojmenování jednotlivých přepínačů, které se v základních šablonách používají.

Následující tabulka zobrazuje všechny použité přepínače ve starší verzi a jejich protiváhu v nové generaci. V nové generaci navíc veškeré hodnoty mají přednastavné hodnoty, které jsou také v tabulce zmíněny.