Tento návod stane sa dedičstvom môjho kráľovstva. Všetci z mojej krvi, budú zviazaní s jeho osudom, lebo som ho vytvoril v mnohej bolesti…
Ak ste niekedy skúšali v Elementore vytvoriť taby, viete, že sa do nich dá písať len raw text. To je nám samozrejme v roku 2021 k ničomu. Existuje ale taký jednoduchý hack, že si najprv vytvoríme šablónu a pomocou shortcodu ju vložíme do tabu. Zdalo by sa, že toto je riešenie na naše problémy, avšak skúste si taby preklikať a čochvíľa príde trpké sklamanie.
Čo sa stane?
Pokiaľ máte v tabe umiestnený akýkoľvek carousel, čiže obrázkový kotúč, media carousel, testimonial carousel, slider, alebo niečo, čo pochádza z externých Elementor pluginov (napr. Essential addons for Elementor), pri preklikávaní medzi tabmi nastane situácia, kedy carousel zomrie. Proste prestane fungovať časovač, ktorý automaticky točí obrázky, resp. iný obsah, ba dokonca nebude reagovať ani klik na šípky. Jedine drag&dropom si vieme pretočiť ďalší obrázok, po ktorom sa carousel znova rozbehne. To je bug a prostredníctvom tohto návodu ho odstránime.
Čo na to Elementor?
Samozrejme, písal som na Elementor oficiálnu podporu, že čo to má znamenať. Odpoveď bola ako studená sprcha:
Bohužiaľ, taby nie sú optimalizované na to, aby sa do nich vkladali šablóny cez shortcode.
Tým to pre nich končí, nápravy sa MOŽNO dočkáme v niektorej aktualizácií Elementora, čo môže byť zajtra, alebo v ďalšej dekáde.
Aký je problém?
Nie som Chuck Norris na javascript, každopádne, berte to tak, že niečo som si už v oblasti tvorby webových stránok prešiel. Všetky carousle, ktoré sú tvorené Elementorom, používajú tzv. Swiper.js, je to javascriptová knižnica, ktorá, dalo by sa povedať, slúži na tvorbu a obsluhu carouselov. Problémom, pri použití tabov je to, že jedna inštancia obsluhuje všetky carousle na všetkých taboch. Pri preklikávaní sa proste zacykli a môžme si pískať.
Na každý problém nájdeme riešenie 🙂
Aby sme tento stav zvrátili, potrebujeme zabezpečiť to, aby sa carousel po zmene tabu „reinicializoval“, alebo „updatol“. To dosiahneme javascriptovým kódom, ktorý som krvopotne našiel na Googli, a s ktorým mi pomohlo iks programátorov. Tu je:
var refreshSliders = function(){
jQuery( ".swiper-container" ).each(function( index ) {
swiperInstance = jQuery(this).data('swiper');
swiperInstance.params.observer = true;
swiperInstance.params.observeParents = true;
swiperInstance.update();
});
}
window.onload = function()
{
console.log('Document loaded');
jQuery(".elementor-tab-title").on("click", function(){
console.log('Tab has been clicked');
var $this = jQuery(this);
refreshSliders();
jQuery('html,body').animate({
scrollTop: $this.offset().top - 220}, 500);
});
}
Tento kód je potrebné vložiť do nejakého javascriptového súboru, nie do functions.php. Ak máte a používate child-theme, tak najlepšie miesto pre neho je tam. Ja child-theme vytváram vždy. V najhoršom prípade, ak sa s tým naozaj nechcete piplať, otvorte vo Vašej téme súbor footer.php a celkom dole, tesne nad značku </body> vložte
a uložíte. K súboru footer.php sa jednoducho dostanete vo wp-admine cez Vzhľad -> Editor -> napravo pohľadáte súbor footer.php.
Pozor, zmazanie nesprávnej bodkočiarky, zátvorky, úvodzovky, alebo iného znaku vnútri footer.php, bude mať na 99% za následok znefunkčnenie stránky!!!
To ale stále nie je všetko
Hlavný kód spôsobí to, že hľadá <div> s triedou „swiper-container“, čo je vlastne obal carousela, ktorý sa automaticky vygeneruje do stránky vtedy, keď pridáte carousel. V tomto obale nájde vlastnosti Observer a observeParents, nastaví im hodnotu na „true“ a updatuje celý carousel.
Ak však budete mať niekde na danej podstránke carousel, v ktorom je len jeden obrázok, vyššie uvedený kód spadne. Nájde síce triedu swiper-container, avšak nenájde hodnoty Observer a observeParents, čo vyústi do javascriptovej chyby „Cannot read property of params“. V takom prípade sa reinicializácia carouselu nevykoná a vy si môžete trieskať hlavu o stenu ako ja.
Pokiaľ je v carouseli len jeden obrázok, nepôjde Vám to. Musíte zabezpečiť, aby mal každý carousel na stránke (aj slider, aj testimonials carousel, aj každý iný) minimálne dve položky!
Ak potrebujete v carouseli len jednu položku, máte prakticky dve možnosti:
- Namiesto carousela použiť obrázok. Proste zmažete carousel a dáte miesto neho obrázok. Ak ide napr. o slider s textom, a máte len jednu položku, namiesto toho použite napr. element „Call for action“, ktorý sa dá vizuálne spracovať tak, ako slider.
- Ostane carousel, existujúcu položku zduplikujete a nastavíte prechod medzi položkami s časom 0 milisekúnd a na prepnutie položiek použijete fade efekt namiesto slide efektu. V konečnom dôsledku teda dosiahnete to, že na pozadí sa budú prepínať dve položky, ktoré sú ale rovnaké. Takže návštevník na stránke bude prakticky vidieť jediný obrázok, hoci na pozadí sa tieto dve položky budú meniť. Návštevník stránky to ale nemá šancu zistiť. Dopad na výkon je minimálny, skoro až nulový, takže žiadne strachy. Pridám ešte ilustračný obrázok:
Toto riešenie je overené v praxi a funguje. Rozhodne ho nepokladám za konečné riešenie týchto problémov. Konečným riešením bude, keď sa tomu na zúbok pozrú Elemenťáci. Ale dovtedy, verím, že tento návod niekomu pomôže 😉
