Informační lišta v PrestaShopu: zpráva nahoře na každé stránce e-shopu

K čemu je lišta se zprávou nahoře na stránce?

K jedné informaci, která změní rozhodnutí zákazníka dřív, než začne hledat produkt. Zákazník vidí lištu na úvodní stránce, v kategorii, na stránce produktu i v košíku, takže nemusí přistát na konkrétní stránce, aby se něco dozvěděl.

Typické zprávy v liště:

• hranice dopravy zdarma („Doprava zdarma při objednávce nad 49 €“),
• uzávěrka expedice („Objednávky do 14:00 odesíláme týž den“),
• přestávka v expedici („Objednávky z prodlouženého víkendu odešleme v úterý“),
• poslední den objednávek před svátky.

Částky a časy v těchto příkladech jsou ilustrativní. Do lišty dávejte jen to, co je v e-shopu opravdu nastavené. Když lišta slibuje dopravu zdarma nad 49 € a dopravce v košíku ji dává až od 60 €, zákazník se v posledním kroku cítí podvedený. Jak nastavit samotnou hranici, popisujeme v článku o dopravě zdarma od určité částky.

Tři způsoby, jak přidat informační lištu v PrestaShopu

Způsob zvolte podle toho, jak často text měníte a jakou máte šablonu.

PrestaShop má nahoře na stránce místo určené pro bannery. Vývojářská dokumentace ho popisuje u hooku displayBanner jako „úplný vrchol každé stránky“. Moduly lišt se obvykle napojují tam. Které moduly na tomto místě ve vašem e-shopu sedí, uvidíte ve Vzhled → Pozice, jak vysvětluje návod k pozicím modulů.

Zápis do šablony patří do child theme, ne do hlavní šablony. Pokud lištu přidáte do souborů hlavní šablony, další aktualizace šablony ji odstraní. Jak se child theme staví, popisuje dokumentace PrestaShopu k child theme. Co se se změnami po aktualizaci stane, vysvětlujeme v článku o tom, jak aktualizace šablony smazala mé změny.

Jak přidat lištu do šablony krok za krokem

Tato cesta vyžaduje přístup k souborům šablony. Pokud se soubory denně nepracujete, udělejte to s někým, kdo ano, nebo s chatem.

1. Ověřte, zda má e-shop child theme. Pokud ne, vytvořte ji dřív, než změníte první soubor.
2. Udělejte kopii souboru hlavičky šablony (v Classic šablona hlavičky stránky).
3. Nad hlavičku přidejte jeden blok s textem zprávy a vlastní třídou, například top-info-bar.
4. V souboru custom.css child theme nastavte barvu pozadí, barvu textu, malou velikost písma a zarovnání na střed.
5. Přidejte pravidlo pro úzké obrazovky, aby se text zalomil a nevybíhal mimo obrazovku.
6. Vymažte cache v Rozšířené parametry → Výkon.
7. Otevřete e-shop v anonymním okně a na telefonu. Zkontrolujte úvodní stránku, kategorii, stránku produktu a košík.

V e-shopu s několika jazyky se text natvrdo zapsaný do šablony ukáže všem v jednom jazyce. V takovém případě je pohodlnější modul s polem pro každý jazyk, nebo text přes překlady šablony.

Jak má lišta vypadat na telefonu?

Na telefonu zabírá lišta cenné místo nad produktem, proto musí být nízká. Dva řádky jsou hranice. Tři řádky odsunou název produktu a cenu níž po obrazovce.

Na co si dát pozor:

• Kontrast. Bílý text na světlém pozadí, třeba žlutém, se na slunci špatně čte. Zvolte tmavé pozadí se světlým textem, nebo naopak.
• Velikost písma. Příliš malý text si zákazníci zvětšují prsty. Malé, ale ne menší než ostatní drobné písmo v e-shopu.
• Žádný běžící text. Pohyblivý text se špatně čte a unavuje oči.
• Tlačítko zavřít jen s pamětí. Pokud jde lišta zavřít, měla by zůstat zavřená i na dalších stránkách. Jinak ji zákazník zavírá znovu na každé stránce.
• Samostatné pravidlo pro úzké obrazovky. Na telefonu zmenšete odsazení a nechte text zalomit. Toto pravidlo dáte do bloku, který platí jen pod zvolenou šířkou obrazovky, jak popisuje průvodce MDN k media queries.

Jak se o lištu po přidání starat

Lišta, kterou nikdo nehlídá, začne brzy lhát. Akce skončila, hranice dopravy se změnila a starý text dál visí nahoře v e-shopu. Zákazníci ho čtou jako slib.

Tři jednoduchá pravidla:

• kdykoli měníte ceny dopravy nebo dobu expedice, zkontrolujte i lištu,
• sezónní zprávu odstraňte nebo vyměňte v den konce kampaně, ne o týden později,
• když žádná zpráva není, nenechávejte prázdný barevný pruh; lištu úplně skryjte.

Pokud lišta na telefonu vypadá špatně, opravu probíráme zvlášť v článku o mobilním zobrazení v PrestaShopu. Barvy tlačítek a dalších prvků změníte podle článku o změně barvy tlačítka.

Jak přidat informační lištu s chatem

Napíšete, jakou zprávu chcete a jak má vypadat. Váš chat (Claude nebo ChatGPT) zkontroluje šablonu, zjistí, zda existuje child theme a zda už na horním místě stránky neběží modul s podobnou lištou. Pak před uložením ukáže změnu v souborech.