Produktová dlaždice

Produktová dlaždice zobrazuje hlavní údaje o nabízeném produktu: fotku, název, skladovou dostupnost, cenu, tlačítko "koupit". Vyskytuje se ve výpisu katalogu, ve výsledcích vyhledávání nebo ve specializovaných sekcích (novinky, oblíbené atd.). Údaje, které se na této dlaždici zobrazují lze ovlivnit v nastavení e-shopu. Níže se podíváme, jaké jsou možnosti.

Obr. 1 - Produktové dlaždice ve výpisu produktového katalogu.

Nastavení obsahu

Produktová dlaždice obsahuje prostor, který lze využít pro zobrazení vlastního obsahu. Na obrázku níže je tento prostor červeně ohraničen a ukazuje, jak může vlastní obsah vypadat.

Obsah může být tvořen prostým textem, ale hlavní výhodou je možnost použít proměnné, které zobrazí hodnoty konkrétních vlastností, které se k produktu vztahují. Všimněte si, že vlastnosti, které u daného produktu nemají vyplněnou žádnou hodnotu, se v dlaždici nezobrazují. Text lze také formátovat, nastavovat mu barvu, či jinak zvýrazňovat. Je také možné vložit proklik na zboží se stejnou hodnotou vlastnosti.

Obr. 2 - Prostor pro zobrazení dalších informací.

Obsah je definován pomocí jazyka HTML. Definice se vkládá v nastavení e-shopu na záložce Nastavení/Nastavení 3. Tlačítko Nastavení "dlaždice" zobrazí okno s editorem, kde lze obsah definovat.

Obr. 3 - Nastavení e-shopu a editor obsahu produktové dlaždice.

V HTML editoru lze pomocí jazyka HTML definovat  obsah dlaždice. Vzhledem ke komplexnosti HTML je vhodné složitější definice zadávat přímo ve zdrojovém kódu, kam se lze přepnout pomocí tlačítka <> v nástrojové liště editoru.

Obr. 4 - HTML editor produktové dlaždice.

Proměnné

Součástí HTML kódu mohou být také proměnné, které jsou v e-shopu nahrazeny konkrétní hodnotou vlastnosti daného produktu. Proměnná je uvozena znakem % a její název je ID konkrétní vlastnosti. Chceme-li například zobrazit hodnotu vlastnosti Značka, zjistíme si nejprve přes číselník Vlastností její ID a toto ID pak zapíšeme do definice.

Obr. 5 - Zobrazení číselníku s vlastnostmi produktů.

ID vlastnosti nalezneme v číselníku Vlastnosti produktů. Vlastnost Značka má tedy ID=1, Vlastnost Autor pak 13. Je nutné si uvědomit, že význam má uvádět pouze ty vlastnosti, které jsou zároveň aktivní a mají nastaven příznak Exportovat na web. 

Proměnná Značka pak bude v HTML kódu reprezentována zápisem %1%, proměnná Autor pak %13%.

Obr. 6 - Získání ID dané vlastnosti v číselníku vlastností produktů.

Příklad

Zápis HTML kódu může vypadat např. takto:

<ul class="product-card__features-list">

  <li data-show-with="%1%"><b>Značka:</b> <a href="eshop?%1%"><b>%1%</b></a></li>

  <li data-show-with="%109%">Displej: <a href="eshop?%109%"><b>%109%</b></a></li>

  <li data-show-with="%1111%">Určení: <a href="eshop?%1111%"><b>%1111%</b></a></li>

  <li data-show-with="%82%">Typ procesoru: <a href="eshop?%82%"><b>%82%</b></a></li>

  <li data-show-with="%86%">Operační paměť [GB]: <a href="eshop?%86%"><b>%86%</b></a></li>

  <li data-show-with="%91%">Pevný disk [GB]: <a href="eshop?%91%"><b>%91%</b></a></li>

  <li data-show-with="%113%">Operační systém: <a href="eshop?%113%"><b>%113%</b></a></li>

  <li data-show-with="%1121%">Stav: <a href="eshop?%1121%"><b>%1121%</b></a></li>

</ul>

Pokud mají být vlastnosti prezentovány jako seznam, pak doporučujeme zachovat název CSS třídy "product-card__features-list", který zajistí správné chování při umístění do šablony e-shopu.

Podmíněné zobrazení

Někdy se hodí, aby byl určitý element zobrazen pouze tehdy, má-li daná vlastnost nějakou hodnotu (je neprázdná). K tomu slouží atribut data-show-with, který obsahuje proměnnou, která se bude vyhodnocovat.

Například tento zápis způsobí, že řádek s textem "Displej:" se zobrazí pouze tehdy, bude-li mít proměnná %109% nějakou hodnotu; pokud ve vlastnosti Displej nebude nic uvedeno, celý řádek se vůbec nezobrazí:

<li data-show-with="%109%">Displej: <a href="eshop?%109%"><b>%109%</b></a></li>

Element data-show-with lze využít i pro případy, kdy přítomnost nějaké vlastnosti má ovlivnit text na jiném místě. Např. zápis níže znamená, že pokud je hodnota vlastnosti s ID 989 vyplněna, zobrazí se na dlaždici text "Obsahuje příslušenství"

<p data-show-with="%989%">Obsahuje příslušenství></p>

Hyperlink

Obsah může zahrnovat také proklik na seznam produktů se stejnou hodnotou vlastnosti. Např. u knih to bývá většinou autor, ilustrátor nebo nakladatelství. Využijeme klasický tag <a> s tím, že do atributu href použijeme konstrukci jako je zde:

<a href="eshop?%109%"><b>%109%</b></a>

Samotný obsah doporučujeme nastavit na stejnou hodnotu, tedy hodnotu dané vlastnosti. Výsledek pak vypadá jako na obrázku níže, kde existují prokliky na produkty stejné značky, stejného typu procesoru atd.

Obr. 7 - Produktová dlaždice s doplňkovými informacemi.