P3 — Detail akce
Účel obrazovky
Nejdůležitější obrazovka pro konverzi — vše co uživatel potřebuje k rozhodnutí o nákupu. Musí obsahovat kompletní info o akci, termínech, místě a ceně. Sticky CTA bar zajišťuje, že tlačítko „Koupit" je vždy dostupné.
Content Priority
- Dark hero — hlavní obrázek akce (full-width, gradient overlay shora dolů), back button (vlevo nahoře), share button (vpravo nahoře) 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 tagy (max 5 viditelných, zbytek „+N") Chip / Filter Button
- Seznam termínů (Dates list) — vertikální seznam karet, každá s: den/datum, čas, venue + sál, město, cenový rozsah (od X Kč), dostupnost badge (dostupné / málo míst / vyprodáno), CTA „Koupit vstupenky" Badge / TagPrimary Button
- Foto galerie — horizontální scroll thumbnailů (3–8 fotek), tap → fullscreen viewer s swipe Image GalleryCarousel / Horizontal Scroll
- Video teaser — inline přehrávač (pokud dostupný), poster frame + play button Video Player
- Popis — rich text, expandable „Zobrazit více" po 3 řádcích Accordion / Expandable
- 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… (collapsible accordion) Accordion / Expandable
- Venue mapa — inline mapa s pinem, název venue, adresa, tap → S12 Map ViewVenue Card
- Related events — „Mohlo by vás zajímat" horizontální scroll event karet (4–6) Section HeaderEvent Card (small)Carousel / Horizontal Scroll
- Sticky CTA bar — fixed bottom: „Koupit vstupenky" / „Vybrat termín" / „Vyprodáno — Hlídat" dle stavu CTA Sticky Bar
Interakce
| Trigger | Akce | Cíl |
|---|---|---|
| Tap na termín „Koupit" | Výběr vstupenek | P4 — Seat Map (adresné) nebo S1 — Neadresné |
| Tap na sticky CTA „Koupit vstupenky" | Scroll k termínům (pokud více) nebo přímý nákup (pokud 1 termín) | Animovaný scroll k dates list |
| Tap na sticky CTA „Vyprodáno — Hlídat" | Aktivace watchdog | Toast „Hlídač nastaven" + X18 (F1) |
| 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 button | Systémový share sheet | Deep link URL + náhled akce |
| Tap na foto v galerii | Fullscreen viewer | Swipe navigace, pinch-to-zoom, close gesture |
| Tap na play video | Přehrání inline | Video přehrávač s controls |
| Tap na „Zobrazit více" (popis) | Expandovat text | Plynulá animace expanze |
| Tap na credits accordion | Toggle expand/collapse | Smooth height animace |
| Tap na related event kartu | Navigace na jiný 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 pro text |
| Loaded — dostupné | Akce s volnými místy | Zelený status badge, CTA „Koupit vstupenky" |
| Loaded — málo míst | Zbývá < 10 % kapacity | Oranžový badge „Málo míst", urgency messaging |
| Loaded — vyprodáno | Žádná volná místa | Červený badge „Vyprodáno", CTA mění se na „Hlídat" |
| Loaded — zrušeno | Akce zrušená | Červený banner „Tato akce byla zrušena", bez CTA nákupu |
| Error | API selhala | Retry CTA |
| Offline | Bez připojení | Cached data (pokud dříve prohlíženo), upozornění „Dostupnost nemusí být aktuální" |
Stavy termínů (per karta v dates list)
| Stav termínu | Badge | CTA | Barva |
|---|---|---|---|
| Dostupné | „Vstupenky od X Kč" | „Koupit" | Zelená |
| Málo míst | „Zbývá X míst" | „Koupit" | Oranžová |
| Vyprodáno | „Vyprodáno" | „Hlídat" nebo skryté | Červená/šedá |
| Zrušeno | „Zrušeno" | — | Šedá, přeškrtnuté |
Edge Cases a Error States
| Scénář | Řešení |
|---|---|
| Akce má 20+ termínů | Zobrazit prvních 5, „Zobrazit všech N termínů" CTA pro expand |
| Akce nemá obrázek | Gradient placeholder s barvou žánru + název akce |
| Akce nemá video | Skrýt video sekci |
| Popis je prázdný | Skrýt popis sekci |
| Akce nemá metadata (délka, jazyk) | Skrýt metadata sekci |
| Akce nemá credits | Skrýt credits accordion |
| Venue nemá GPS souřadnice | Skrýt inline mapu, zobrazit jen textovou adresu |
| Žádné related events | Skrýt „Mohlo by vás zajímat" sekci |
| Akce zrušena během prohlížení | Alert dialog „Tato akce byla zrušena" → redirect na P1 |
| Dostupnost se změní během prohlížení | Real-time refresh při návratu na screen (background fetch) |
| Deep link na neexistující akci | Error state „Akce nenalezena" + CTA na homepage |
Mobilní patterny a odlišení od webu
Co přebíráme z webu
- Dark hero se základním obrázkem a overlay gradientem
- Seznam termínů s cenami a CTA
- Foto galerie v horizontálním scroll
- Related events sekce
Co děláme jinak a proč
- Sticky CTA bar (fixed bottom) — na webu je CTA jen u termínů, na mobilu musí být vždy dostupné kvůli menšímu viewportu (uživatel nemusí scrollovat k termínům)
- Collapsible popis — na webu je popis v plné délce, na mobilu zkracujeme po 3 řádcích s „Zobrazit více" kvůli vertikálnímu prostoru
- Fullscreen photo viewer — na webu lightbox, na mobilu nativní fullscreen s pinch-to-zoom a swipe navigací
- Share button — nativní systémový share sheet (web má jen sociální ikony), podporuje AirDrop, Messages, WhatsApp atd.
- „Přidat do kalendáře" — přímá integrace s nativním kalendářem (EventKit/CalendarProvider), web toto neumí
- Haptic feedback — jemná vibrace při tapu na „Koupit" a „Hlídat" pro taktilní potvrzení akce
Aplikované patterny
- iOS:
UIScrollViews parallax efektem na hero,PHPickerViewControllerpattern pro galerii,UIActivityViewControllerpro share - Android:
CollapsingToolbarLayout/TopAppBarDefaults.exitUntilCollapsedScrollBehavior()pro parallax hero,ShareSheet(Material 3)
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 | Přes PORTAL cache — EventProgramItem s cenami, dostupností, tagy |
| Detail tour (varianta) | GET /catalog/tour/{id} | Pokud je akce typu tour | Timed prohlídky |
| Detail circuit (varianta) | GET /catalog/circuit/{id} | Pokud je akce typu circuit | Non-timed okruhy |
| Detail předplatného | GET /catalog/subscription/{id} | Pokud je akce součást abonmá | Vazba na pořadatele |
| Rozšířené metadata | GET /catalog/extra-infos | Volitelné doplnění | Dodatečné informace k akcím |
CoreAPI poznatek
API rozlišuje title_id (obecný titul, např. „La Traviata") a event_id (konkrétní datum/termín). EventProgramItem obsahuje event_tag_name + event_tag_color (#RRGGBBAA) — lze využít pro vizuální tagy. Obrázky (image_url) jsou kompletní HTTP URL z Colossea; galerie, video a credits jsou v 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ředemInspirace z CineStar
CineStar zobrazuje pre-purchase upozornění (věkové omezení, doporučení příchodu) jako alert dialog ještě před výběrem míst. Zvážit podobný pattern — zobrazit důležitá upozornění před vstupem do nákupního flow, ne až v košíku.