image
image
image
image

Přesné rozdělení produktového popisu

Jak rozdělit produktový text v e-shopu na kartě produktu přesně v místě, kde potřebujeme?

V tomto článku si popíšeme užitečnou vlastnost, kterou je rozdělení produktového popisu v rámci produktové karty. Nyní je totiž možné určit si, jak dlouhá část popisu zůstane v horní části karty a kde přesně bude zalomena. Dosud to totiž bylo tak, že rozdělení dlouhého popisu produktu se dělo automaticky podle určitého počtu slov. V místě, kde počet slov překračoval stanovený limit došlo k rozdělení popisu a zobrazení linku "Úplný popis", který posunul návštěvníka do sekce s úplným popisem.

Tento způsob ne vždy úplně nevyhovuje, protože k "rozdělení" obsahu dojde mnohdy na nevhodném místě, např. uprostřed tabulky nebo těsně před koncem věty. 

Ačkoli je stále zachována možnost tohoto automatického dělení příliš dlouhého popisu, přidali jsme do editoru popisu tlačítko pro vložení oddělovače stránky, kterým lze určit místo, kde se popis "zalomí" - a oddělit tak část popisu, která zůstává v horní části produktové karty a na zbytek, resp. na kompletní znění popisu se lze dostat přes odkaz Úplný popis.

Pojďme se ještě v rychlosti podívat na to, jak jsou informace o produktu na produktové kartě rozmístěny a pak si hned ukážeme, jak oddělovač stránky použít.

Rozvržení produktové karty

Produktová karta na e-shopu je tvořena několika sekcemi, které obsahují informace o produktu. Na obrázku níže jsou popsány sekce, které se zobrazují v horní polovině produktové karty.

1 - Produktové fotky. Může se jednat o jednu nebo více fotek, kterými lze listovat. Zobrazeny jsou také náhledy dalších fotek v případě, že je k dispozici více než jedna fotka, jsou zobrazeny také náhledy těch dalších.

2 - Název produktu. V ContOSu tomuto údaji odpovídá údaj Název zboží na skladové kartě.

3 - Popis produktu. V ContOSu je tento údaj také na skladové kartě na záložce Rozšířený popis. Tento údaj je editovatelný HTML editorem a může obsahovat různě formátovaný text s hyperlinky, obrázky a další grafikou. Délka textu není prakticky omezena.

4 - Údaje o skladové dostupnosti a identifikátory produktu (EAN, PLU).

5 - Údaje o ceně, popř. o slevě a měně.

6 - Výběr množství a vložení do košíku. Uložení produktu do složky Oblíbené.

Pod touto sekcí je umístěna oblast s vlastnostmi produktu, Specifikace. Tato sekce je zobrazena jen v případě, že jsou k produktu nějaké vlastnosti dostupné a jsou povolené k zobrazení na produktové kartě.

Produktovou kartu uzavírá část s úplným popisem a specifikací. Úplný popis se zobrazuje v případě, že se tento text celý nevejde do horní části karty. Stejně tak karta specifikace se zobrazuje pouze tehdy, pokud počet vlastností překročí limit nastavený v konfiguraci. Pokud tedy produkt obsahuje pouze krátký popis a několik vlastností, pak se tyto prvky nezobrazují.

Rozdělení produktového popisu

Pokud chceme zajistit, aby se v horní části produktové karty zobrazovala přesně určená část z rozšířeného popisu, použijeme oddělovač stránky. Ten najdeme v ContOSu v HTML editoru, kterým editujeme rozšířený popis. Do jeho nástrojové lišty přibylo nové tlačítko, pomocí kterého vložíme na místo kurzoru oddělovač stránky.

Na obrázku níže vidíme, že oddělovač stránky je prezentován tečkovanou horizontální čarou. Tento prvek se nikde nezobrazuje, slouží nám jen pro vizuální kontrolu umístění oddělovače. Pokud jej chceme odstranit, pak jej stačí obyčejně smazat.

Po uložení popisu a synchronizaci na e-shop se již rozdělení textu projeví a popis bude rozdělen přesně v tom místě, kam jste oddělovač umístili. V tomto článku jsme si vše odprezentovali na jediném ukázkovém produktu, a když tedy zarolujete zpět na začátek článku, uvidíte, že popis produktu je zalomen přesně tak, jak jsme si zde v editoru nastavili.

Úplně na závěr ještě připomeneme, že původní chování při rozdělování popisu zůstalo zachováno. Pokud tedy do textu oddělovač stránky nevložíte, rozdělí se text automaticky, překročí-li limit počtu slov.

Věříme, že možnost uživatelského rozdělování popisu produktu povede k ještě lepší prezentaci vašeho zboží na e-shopu.