P3 — Detail akce
Účel obrazovky
Nejdůležitější obrazovka pro konverzi — vše, co uživatel potřebuje k rozhodnutí o nákupu. Nad přehybem jsou pořadatel, titulek, tagy a termíny; rozšířený obsah je pod sbalitelnou sekcí „Více o akci". Sticky CTA bar zajišťuje dostupnost nákupu podle počtu termínů (přímý nákup, bottom sheet nebo fullscreen výběr data).
Struktura obsahu
Vždy viditelné (nad přehybem)
- Dark hero — hlavní obrázek akce (full-width, gradient overlay shora dolů), tlačítko zpět (vlevo nahoře), share (vpravo nahoře), ikona srdce (♡) vedle share — tap přepíná oblíbenou akci (lokálně / synchronizace s účtem dle dostupnosti API). Hero BannerBack ButtonIcon Button
- Pořadatel — logo + název organizátora, tap → S13. Organizer Card
- Název akce + tagline — hlavní nadpis + krátký podtitulek.
- Tag chips — žánr/kategorie; max. 3 viditelné, další shrnuté do „+N" (tap rozvine nebo otevře detail tagů). Chip / Filter Button
- Seznam termínů (dates list) — vertikální seznam karet: den/datum, čas, venue + sál, město, cenový rozsah (od X Kč), badge dostupnosti (viz níže), CTA „Koupit vstupenky" u řádku. Badge / TagPrimary Button
Sekce „Více o akci" (collapsible)
Výchozí stav: sbalená. Hlavička sekce (chevron) rozbalí/sbalí najednou:
- Popis — rich text (celý blok v této sekci, bez samostatného „Zobrazit více" uvnitř, pokud není extrémně dlouhý text — pak lze uvnitř sekce zvážit vnitřní zkrácení). Accordion / Expandable
- Foto galerie + video — horizontální scroll thumbnailů (tap → fullscreen viewer se swipe); video teaser jako inline přehrávač (poster + play), pokud je k dispozici. Image GalleryCarousel / Horizontal Scroll Video Player
- Metadata — strukturovaný seznam: délka představení, jazyk, titulky, přestávka, bezbariérovost, věkové omezení… List Item
- Credits — účinkující, režie, dirigent… (v rámci sekce accordion nebo podsekce dle hustoty obsahu). Accordion / Expandable
- Venue mapa — inline mapa s pinem, název venue, adresa, tap → S12. Map ViewVenue Card
Vždy viditelné (pod rozšířenou sekcí)
- Související akce — „Mohlo by vás zajímat", horizontální scroll event karet (viz algoritmus níže). Section HeaderEvent Card (small)Carousel / Horizontal Scroll
- Sticky CTA bar — fixed bottom, chování podle počtu termínů (viz samostatná sekce); stavy vyprodáno včetně „Hlídat". CTA Sticky Bar
Sticky CTA a výběr termínu
| Počet termínů | Primární CTA | Chování |
|---|---|---|
| 1 | Např. „Koupit vstupenky — 15. 4. v 19:00" | Přímý přechod do výběru vstupenek: P4 — Seat Map (adresné) nebo S1 — Neadresné. |
| 2–5 | „Vybrat termín" | Otevře bottom sheet se seznamem termínů (stejná logika karet jako v dates list); výběr řádku → dále do P4/S1. |
| 6+ | „Vybrat termín (N)" | Otevře fullscreen scrollovatelný seznam termínů; výběr → P4/S1. |
Po tapu na „Koupit" u konkrétního data v seznamu na stránce platí stejný pre-purchase krok jako níže (před vstupem do P4/S1).
Práh pro stav „Málo míst" (badge u termínu)
Podmínka OR (stačí jedna):
- zbývá ≤ 20 míst, nebo
- zbývá ≤ 15 % kapacity sálu (
zbývající ≤ kapacita × 0,15).
| Podmínka textu | Text badge |
|---|---|
| Splněno prah a zbývá nejvýše 20 | „Zbývá X míst" (konkrétní číslo) |
| Splněno prah a zbývá více než 20 | „Málo míst" (bez čísla) |
Barva: oranžová (konzistentně s urgency, ne červená jako vyprodáno).
Pre-purchase upozornění
Po tapu „Koupit" u vybraného termínu (z dates list, bottom sheetu nebo fullscreenu) aplikace před navigací na P4/S1 zkontroluje, zda existují závažné informace: věkové omezení, dress code, doporučený / povinný čas příchodu a obdobná pravidla z metadat akce.
- Pokud některé platí → alert dialog se seznamem upozornění a akcemi „Rozumím, pokračovat" (pokračuje do P4/S1) a „Zpět" (zůstane na P3 / zavře sheet).
- Pokud nic z toho → přímý přechod bez dialogu.
Algoritmus „Mohlo by vás zajímat"
Priorita řazení kandidátů:
- Stejný pořadatel a stejný žánr
- Stejný pořadatel
- Stejný žánr a stejné město
- Stejný žánr
- Fallback: oblíbenost / trending (konfigurovatelné z API)
Pravidla výstupu:
- 4–6 položek v karuselu
- Vyloučit vyprodané akce
- Vyloučit stejný titul/název jako aktuální akce
- Rotace pořadí mezi session návštěv (aby se neukazoval vždy stejný subset)
Hlídač (Watchdog) — „Hlídat"
- [MVP]: základní tlačítko „Hlídat" u vyprodaného termínu / sticky stavu — registrace zájmu v minimálním rozsahu (např. uložení preference; přesná implementace dle API).
- [F1]: plný FIFO front s push notifikacemi při uvolnění kapacity, historie hlídání, správa v účtu.
Interakce
| Trigger | Akce | Cíl |
|---|---|---|
| Tap srdce v hero | Přepnutí oblíbené akce | Toggle stavu + zpětná vazba (ikona vyplněná/prázdná) |
| Tap na termín „Koupit" | Pre-purchase kontrola → P4/S1 | Viz sekce Pre-purchase |
| Tap na sticky CTA (1 termín) | Přímý nákup vybraného data | P4 nebo S1 |
| Tap na sticky „Vybrat termín" (2–5) | Bottom sheet s termíny | Výběr data → pre-purchase → P4/S1 |
| Tap na sticky „Vybrat termín (N)" (6+) | Fullscreen seznam termínů | Výběr data → pre-purchase → P4/S1 |
| Tap „Hlídat" | Watchdog MVP / rozšíření F1 | Toast nebo potvrzení dle scope; F1 push |
| Tap na hlavičku „Více o akci" | Rozbalit/sbalit sekci | Animace výšky / standardní collapsible |
| Tap na pořadatele | Profil organizátora | S13 — Profil pořadatele |
| Tap na venue / mapu | Detail místa konání | S12 — Detail místa |
| Tap na share | Systémový share sheet | Deep link URL + náhled akce |
| Tap na foto v galerii | Fullscreen viewer | Swipe, pinch-to-zoom, zavření gestem |
| Tap na play u videa | Inline přehrávání | Ovládání přehrávače |
| Tap na related event | Nový detail | P3 (nová instance) |
| Tap na „Přidat do kalendáře" | Systémový kalendář | X16 — Přidáno do kalendáře |
Stavy
| Stav | Popis | Vizuální chování |
|---|---|---|
| Loading | Načítání detailu | Skeleton: hero placeholder + shimmer řádky |
| Loaded — dostupné | Akce s volnými místy | Zelený / neutrální badge dostupnosti, CTA nákupu |
| Loaded — málo míst | Splněn prah ≤20 nebo ≤15 % | Oranžový badge dle pravidel textu výše |
| Loaded — vyprodáno | Žádná volná místa | Červený badge „Vyprodáno", CTA „Hlídat" kde platí |
| Loaded — zrušeno | Akce zrušená | Červený banner, bez CTA nákupu |
| Error | API selhala | Retry CTA |
| Offline | Bez připojení | Cached data + upozornění na možnou neaktuálnost dostupnosti |
Stavy termínu (per karta)
| Stav termínu | Badge (text) | CTA | Barva |
|---|---|---|---|
| Dostupné | „Vstupenky od X Kč" | „Koupit" | Zelená |
| Málo míst | „Zbývá X míst" nebo „Málo míst" | „Koupit" | Oranžová |
| Vyprodáno | „Vyprodáno" | „Hlídat" / skryté | Červená / šedá |
| Zrušeno | „Zrušeno" | — | Šedá, přeškrtnuté |
Edge Cases a Error States
| Scénář | Řešení |
|---|---|
| Mnoho termínů (6+) | Fullscreen výběr z sticky CTA; na stránce lze zkrátit počet viditelných řádků + „Zobrazit vše" vedoucí do stejného fullscreenu |
| Akce nemá obrázek | Gradient placeholder + žánrová barva + název |
| Akce nemá video | V sekci „Více o akci" skrýt video |
| Prázdný popis | V collapsovatelném bloku nezobrazovat prázdný popis nebo celou podsekci popisu |
| Chybí metadata / credits | Skrýt příslušné podsekce uvnitř „Více o akci" |
| Venue bez GPS | Skrýt inline mapu, zobrazit textovou adresu |
| Žádné related events | Skrýt horizontální sekci |
| Akce zrušena během prohlížení | Alert → redirect např. na P1 |
| Změna dostupnosti | Obnovení při návratu na obrazovku (background fetch) |
| Neplatný deep link | Error „Akce nenalezena" + CTA na homepage |
Mobilní patterny a odlišení od webu
Co přebíráme z webu
- Dark hero s obrázkem a overlay gradientem
- Seznam termínů s cenami a CTA
- Galerie a related sekce
Co děláme jinak a proč
- Sekce „Více o akci" — na mobilu výchozí sbalená, aby byl rozhodovací blok (pořadatel, titulek, tagy, termíny) nad přehybem; web může mít více obsahu najednou viditelného.
- Sticky CTA + bottom sheet / fullscreen — jednotná cesta k nákupu při více termínech bez nekonečného scrollu k dates list.
- Tagy max. 3 + „+N" — šetří místo oproti delší řadě chipů na desktopu.
- Fullscreen photo viewer — pinch-to-zoom, swipe oproti webovému lightboxu.
- Share — nativní systémový sheet.
- „Přidat do kalendáře" — nativní integrace kalendáře.
- Haptika — jemná odezva u CTA „Koupit" a „Hlídat".
Aplikované patterny
- iOS:
UIScrollView/ parallax na hero,UIActivityViewControllerpro share, sheet pro výběr termínu. - Android:
CollapsingToolbarLayout/ Material top app bar,ModalBottomSheetpro 2–5 termínů, fullscreen activity nebo navigační cíl pro 6+.
API Data
GET/catalog/event/{eventId}GET/catalog/tour/{tourId}GET/catalog/circuit/{circuitId}GET/catalog/subscription/{subscriptionId}GET/catalog/extra-infos| Operace | Endpoint | Trigger | Poznámka |
|---|---|---|---|
| Načtení detailu akce | GET /catalog/event/{id} | Otevření obrazovky | EventProgramItem, ceny, dostupnost, tagy |
| Detail tour / circuit / předplatné | příslušné GET | Podle typu entity | Stejně jako dříve |
| Rozšířené metadata | GET /catalog/extra-infos | Volitelné | Doplněk k akcím |
CoreAPI poznatek
API rozlišuje title_id a event_id. event_tag_name + event_tag_color slouží pro vizuální tagy. Obrázky z Colossea; galerie, video a credits často z DatoCMS přes PORTAL.
Reference — Aktuální web
SCR-WEB-12Concert detail — dark hero, tagy, termíny s CTA
SCR-WEB-14Galerie, popis, program, metadata
SCR-WEB-18Opera — inline popis na hero, jiný layout
SCR-WEB-21Rozšířená metadata — délka, jazyk, titulky, credits
SCR-WEB-24Musical — SOLD OUT stav u termínu
SCR-WEB-25Watchdog CTA u vyprodaného termínu, video teaserReference — CineStar benchmark
SCR-CS-04Pre-purchase upozornění — věkové omezení, příchod 30 min předem