Egyedi programajánló és kedvencek modul

1. A kihívás: Átláthatóság több helyszínen, több napon át

A kiindulási helyzet a következő volt: a rendezvénynek több mint 25 különböző helyszíne (pincészete) van. A programok három különböző napon (péntek, szombat, vasárnap), eltérő időpontokban és kategóriákban (pl. gasztro, élőzene, szakmai beszélgetés, különleges programok) zajlanak. A célunk az volt, hogy:

1. A látogatók egyetlen kompakt, gyorsan áttekinthető listában lássák az összes napi programot.
2. A programok szigorúan időrendi sorrendben kövessék egymást.
3. Ne kelljen a szervezőknek duplán rögzíteniük az adatokat: ha egy programot feltöltenek, az jelenjen meg a fő programlistában és az adott pincészet saját aloldalán is.

2. A háttértechnológia: Hogyan kapcsolódnak össze a helyszínek és a programok?

A legegyszerűbb felhasználó számára is érthető módon: a weboldal motorját adó WordPress rendszert úgy készítettük fel, hogy „értse” a helyszínek és a hozzájuk tartozó események kapcsolatát. Ehhez az Advanced Custom Fields (ACF) bővítmény úgynevezett Relationship (Kapcsolat) mezőjét hívtuk segítségül.

Hogyan működik ez a gyakorlatban?

Először a rendezvény szervezője rögzít egy új programot a weboldal adminisztrációs felületén. Meg kell adnia az esemény nevét, időpontját, kategóriáját,és egyéb adatokat a programmal kapcsolatban. Utána az adott pincészethez tudjuk kapcsolni bármelyik programot a pincészet aloldalán. A háttérben futó kódunk automatikusan elvégzi az összekapcsolást. Így a látogató a pincészet egyedi aloldalán is pontosan azt a programot fogja látni, ami a központi listában is szerepel. Nincs elgépelés, nincs duplán végzett munka.

3. Dinamikus megjelenítés és automatikus időrend

Miután az adatok összekapcsolásra kerültek, egy egyedi PHP programkód és a hozzá tartozó WordPress shortcode-ok (rövid kódok) segítségével jelenítettük meg az információkat. Az elrendezést szándékosan szuper-kompaktra terveztük:

• Bal oldalon: egy kisméretű, diszkrét logó vagy kép azonosítja a helyszínt.
• Középen: az időpont (ikonnal jelölve), a program kategóriája (színes, figyelemfelkeltő címkeként), a program címe és egy rövid, lényegre törő leírás kapott helyet.
• Jobb oldalon: egy egyszerű kedvencek gomb (szív ikon) helyezkedik el.

A rendszer a programokat három külön napra bontva (péntek, szombat, vasárnap) listázza ki, és a háttérben futó algoritmus automatikusan gondoskodik arról, hogy az események a kezdési időpontjuk szerint, növekvő sorrendben kövessék egymást.

4. Azonnali, villámgyors szűrés oldalújratöltés nélkül

Egy fesztiválon a mobilinternet akadozhat, a látogatók türelmetlenek, ezért a lassú, oldalújratöltéssel járó szűrések szóba sem jöhettek. Készítettünk egy intelligens kategóriaszűrőt a napok fölé. Amikor a felhasználó rákattint egy gombra (például a „GASZTRO” vagy az „ÉLŐZENE” kategóriára), a rendszer azonnal elrejti az összes többi programot mindhárom nap esetében, és csak a kiválasztott stílusú eseményeket hagyja láthatóan. Mivel a szűrés böngészőoldali technológiával (JavaScript) történik, nincs adatforgalom, nincs várakozás: a telefonon azonnal az jelenik meg, amit a vendég keres.

5. A látogató saját programfüzete: „Kedvenc programjaim”

Ez a funkció teszi fel a koronát a felhasználói élményre. A programok böngészése közben a látogatóknak lehetőségük van arra, hogy a kis piros szívecskék bejelölésével elmentsék a számukra szimpatikus eseményeket. A „Kedvenc programjaim” aloldal egy teljesen személyre szabott felület:

• Dinamikus működés: Csak azokat a programokat mutatja meg napokra bontva és időrendi sorrendben, amelyeket a látogató előzőleg bejelölt.
• Azonnali, interaktív módosítás: Ha a felhasználó meggondolja magát, és kikattintja a szívet a kedvencek oldalán, a program egy finom animáció kíséretében azonnal eltűnik a listájáról anélkül, hogy az oldalt újra kellene töltenie.
• "PDF mentés" és "Nyomtatás gombok": Hogy a fesztiválozóknak ne kelljen folyamatosan a telefonjukat bújniuk, készítettünk egy külön shortcode-dal behívható gombcsoportot. Egyetlen kattintással kinyomtathatják a saját kis füzetüket, vagy elmenthetik azt PDF formátumban a mobiljukra.

Nyomtatásra és PDF-re optimalizált megjelenés

Amikor a látogató a nyomtatás vagy a mentés gombra kattint, a háttérben egy egyedi nyomtatási stíluslap (@media print) lép működésbe. Ez a kód gondoskodik arról, hogy a letöltött PDF-en vagy a kinyomtatott lapon ne szerepeljen a weboldal menüje, lábléce, a gombok, és a felesleges szívecskék. A betűméreteket és a sormagasságokat úgy tömörítettük össze, hogy egy oldalon kényelmesen elférjen akár 10-12 program is. Így egy tiszta, professzionális és jól olvasható, kézzelfogható itiner születik.