Repeater je jedno z polí, ktoré môžeme zvoliť v Advanced Custom Fields. Ako už jeho názov vypovedá, bude sa prostredníctvom neho niečo opakovať. V reálnom živote prostredníctom repeatora môžeme vytvárať súbor opakujúcich sa polí, resp. ak nevieme koľko takých polí bude, repeater je vhodné ACF na tento účel.
Príklady zo skutočného života:
Recepty
Suroviny, ktoré potrebujeme na prípravu koláča, torty, mäsa a pod. Každá surovina má názov a každá surovina má množstvo. Nevieme dopredu, koľko surovín bude pri ktorom recepte, resp. iné množstvo surovín budeme potrebovať na palacinky a iné množstvo na trojchodový obed.
Počet účastníkov
Repeater možno použiť aj napr. pri registrácií účastníkov na nejaký event. Nevieme dopredu, koľko účastníkov bude, ale vieme, že od každého z nich potrebujeme meno, priezvisko, e-mail, telefón a rok narodenia (napríklad). Vytvoríme si teda repeater s týmito fieldami a necháme užívateľa, aby si zvolil presne toľko účastníkov, koľko potrebuje. Áno, repeater sa skutočne dá napojiť aj na form (ale to nie je obsahom tohto článku).
Ako teda používať repeater?
Jednoducho v skupine polí pridáme nové pole, nastavíme mu označenie a meno (slug). Ja som si to lukratívne nazval ako Fičúry zájazdu. Typ poľa zvolíme Opakovač. Asi to prekladal nejaký angličtinár, lvl. eksper.
Ďalej sú pre nás dôležité podpolia. V nich si vlastne definujeme jeden riadok repeatera. V mojom prípade teda font-awesome ikonka (ale o tom niekedy nabudúce) a Názov fičúry.
Konkrétne tento repeater slúži na zobrazovanie fičúr zájazdov, čiže proste zájazd, v rámci ktorého ideš napr. do hvezdárne (Ikona star a názov „Návšteva hvezdárne“). Takýchto fičúr bude v rámci zájazdu viac.
Nastavíme podmienky zobrazenia a pri tvorbe / úprave postu sa nám bude zobrazovať repeater.
V poste
V poste sa nám potom takto zobrazí repeater. Treba kliknúť na modrý button Pridať riadok, na prvýkrát je to také mätúce. Potom už len pridávame riadkov koľko chceme a v každom vyberieme ikonu a napíšeme názov fičúry (to je vlastne klasický text).
Celkom jednoduché nie?
A ako to zobraziť na front-ende?
Elementor sa chvastá, že má integráciu s ACF, čo aj má, ale beztak skoro nič nevie. Takže na repeater v Elementore rovno zabudnite. Existuje síce nejaký plugin, ale nepodarilo sa mi zistiť, ako funguje. Podľa infa od kolegov to vedia aj všeobecné addony do Elementora ako Dynamic.ooo. Priznám sa, že sa mi nechcelo s tým zaondievať a tak som si radšej napísal vlastný shortcode. Výhoda je taká, že tento shortode bude fungovať aj mimo Elementora. A keď si ho človek upraví, bude sa dať použiť aj na iné polia, ako som uviedol ja.
Shortcode
function lava_generate_repeater() {
$repeater = get_field('ficury_zajazdu');
$html = '';
if(is_array($repeater):
$html = '<ul class="lava-repeater">';
foreach($repeater as $rep) {
$html .= '<li><i class="'.$rep['ikona'].'"></i>'.$rep['nazov_ficury'].'</li>';
}
$html .= '</ul>';
endif;
return $html;
}
add_shortcode('lava_journey_repeater', 'lava_generate_repeater');
Takže je to veľmi jednoduché. Pridám shortcode lava_journey_repeater. Tak sa volá preto, lebo ho používam pri zájazdoch. Ten shortcode bude používať funkciu lava_generate_repeater.
Vo funkcií je základom funkcia get_field(), ktorá pochádza z ACF a ktorá vráti hodnotu pre aktuálne post_id, pokiaľ nie je zadané iné post_id. V mojom prípade zadané nie je, takže sa berie IDčko z current postu. Takto to bude super vypisovať na detaile postu, aj na post archive.
Musím si ešte overiť, či mi príde reálna hodnota z databázy, môže sa stať, že user pri vyplňovaní postu nepridá ani jeden riadok repeatora, takže by to spadlo (too few arguments for foreach). Takže zistím, či get_field() vrátilo array, ak áno, môžem ho poforeachovať a vygenerovať toľko riadkov, koľko riadkov má repeater. Ak nie, tak mi vráti len prázdny string, pod premennou $html (definovaný na riadku 3).
Následne už len vygenerujem príslušné HTMLko, definujem si <ul> aj s jedinečnou classou, aby som ju vedel pomocou CSS zamerať.
Vo foreachi prebehnem všetky hodnoty, ktoré daný repeater vráti. V cykle tak vygenerujem toľko <li>, koľko repeatorových položiek je zadaných pri každom článku a pri každom vykreslím ikonku a napíšem text.
Po foreachi uzatvorím </ul> a celú premennú vypíšem cez echo.
Pozn.: Ak by niekto náhodou nevedel, tak operátor = priradí do premennej hodnotu, pričom starú prepíše, ak existuje. Operátor .= však neprepíše starú hodnotu, ale pridá k nej novú. Takýmto štýlom si viem teda vytvoriť celý <ul> kompletne.
