Carousel modul¶

Carousel modul umožňuje vašemu botovi prezentovat informace v posuvném rozložení karet. Carousel se běžně používají pro zobrazení produktů, služeb nebo možností vizuálně atraktivním způsobem. Každá karta může obsahovat název, popis, obrázek a tlačítka.

Manuální režim¶

Přidejte karty jednu po druhé v editoru.
Každá karta může obsahovat:
Název + Popis
Obrázek a URL obrázku (otevře se po kliknutí na obrázek)
Více tlačítek
- URL tlačítka – otevře odkaz
- Akční tlačítka – chovají se jako tlačítka v normálních chatových zprávách (pokračují v toku dialogu)

Dynamický režim¶

Místo manuálního vytváření každé karty je možné je generovat z JSON pole uloženého v libovolné $context proměnné.

Každý objekt v JSON = jedna karta v carousel.
Komponenty karty (název, popis, obrázek, odkaz) mohou být mapovány na klíče JSON.
Použijte syntaxi šablony: {{ title }}, {{ description }}, atd.

Příklad JSON:

[
  {
    "prodName": "Produkt A",
    "prodDesc": "Popis produktu A",
    "prodImg": "https://example.com/img-a.jpg",
    "prodLink": "https://example.com/a"
  },
  {
    "prodName": "Produkt B",
    "prodDesc": "Popis produktu B",
    "prodImg": "https://example.com/img-b.jpg",
    "prodLink": "https://example.com/b"
  }
]

Kroky použití dynamického carousel:¶

Uložte váš JSON do $context proměnné (např. $cwProducts).
V sekci JSON s daty carousel vyberte $context.
Namapujte klíče JSON na komponenty carousel (název, popis...) pomocí {{ }} zástupných znaků (např. {{ prodName }}).

Režim vlastního HTML¶

Pro pokročilé přizpůsobení přepněte z Základního obsahu na HTML obsah (kontaktujte podporu, pokud tuto možnost nevidíte ve vašem Carousel modulu). Toto odemkne plný HTML editor, kde můžete definovat vlastní šablonu karty.

<div class="card">
  <img src="{{image}}" alt="{{name}}">
  <h3><a href="{{link}}">{{name}}</a></h3>
  <p>{{description}}</p>
  <a href="{{link}}" class="btn">Více</a>
</div>

To vám umožní:

Přizpůsobit CSS styly vaší značce
Přidat vlastní akce (např. tlačítko "Přidat do košíku")
Vytvořit zcela unikátní rozložení

Osvědčené postupy¶

Kdy použít který režim:

Manuální -> Malé, pevné sady karet (jako FAQ nebo top 3 odkazy).
Dynamický -> Větší, datově řízené carousel (např. seznamy produktů, výsledky hledání).
Vlastní HTML -> Když potřebujete plnou kontrolu nad stylem a funkcionalitou.