Ugrás a fő tartalomhoz

YITH Infinite Scrolling Premium

Mi ez a bővítmény és milyen problémát old meg?​

A YITH Infinite Scrolling Premium egy WordPress/WooCommerce bővítmény, amellyel a klasszikus lapozást végtelen görgetésre, „Továbbiak” gombra vagy AJAX‑os lapozóra cserélheted. Célja, hogy a látogatónak ne kelljen új oldalra kattintania, hanem gördítés közben folyamatosan érkezzenek az új termékek/bejegyzések. Ez csökkenti a lemorzsolódást, gyorsítja a felfedezést, és különösen mobilon ad természetes, „feed‑szerű” élményt.

Fő funkciók és működés​

Többszekciós beállítás​

  • Korlátlan számú szekciót hozhatsz létre külön oldalakon (pl. Bolt főoldal, kategória, Blog archívum, értékelések).
  • Minden szekció saját szelektorokkal és viselkedéssel működik, így finoman hangolhatod az élményt oldalanként.

Lapozási módok​

  • Végtelen görgetés: automatikusan betöltődik a következő oldal tartalma, amikor a lista aljára érsz.
  • „Továbbiak” gomb: a felhasználó kézzel kérhet újabb elemeket (jobb kontroll, stabil mérhetőség).
  • AJAX‑os lapozó: a hagyományos lapozást modernizálja, az oldalt újratöltés nélkül vált.

Dinamikus URL‑frissítés​

  • Gördítés közben a bővítmény módosíthatja a böngésző címsorát (pushState).
  • Előnyei: a Vissza gomb megfelelően működik, a látogató visszatérve ugyanarra a helyre jut; a megoszthatóság és a mérés is pontosabb (oldalmegtekintések küldése lapozás közben).

Betöltési élmény testreszabása​

  • Választható loader ikonok, saját ikon feltöltése.
  • Animációk (pl. fade, zoom) az új elemek beszúrásakor.
  • Személyre szabható gombfelirat és extra CSS‑osztály, hogy illeszkedjen a témád arculatához.

Mobil támogatás​

  • Külön opciók a mobil nézetekhez: be‑/kikapcsolás, módváltás, így gyors marad az oldal és nem lesz „végtelen” túltöltés.

Integrációk és fejlesztői horgok​

  • Kész integráció AJAX‑os termékszűréssel, így szűrés után is gördülékeny a betöltés.
  • JavaScript események:
    • yith_infs_adding_elem: elemek beszúrása előtt
    • yith_infs_added_elem: elemek beszúrása után
    • yith_infs_url_changed: URL frissítésekor
  • Ezekkel egyedi logikát, mérést, animációt kapcsolhatsz az eseményekhez.

Gyakorlati példák​

  • WooCommerce kategóriaoldal: a vásárló görget, és a következő termékoldal elemei automatikusan betöltődnek. A címsor frissül, így a „Vissza” gomb pontosan a korábbi pozícióra visz.
  • Blog archívum: „Továbbiak” gombbal adagolod a bejegyzéseket, hogy a lábléc elérhető maradjon, és jobban kontrolláld a teljesítményt.
  • Szűrt terméklista: ár- vagy színszűrés után is működik az AJAX‑os lapozás; a felhasználó nem veszti el a fókuszt, a lista folyamatos.

Gyorsstart (szekció beállítása)​

  1. Telepítés és aktiválás után nyisd meg a bővítmény beállításait.
  2. Hozz létre egy új szekciót (pl. „Shop archívum”).
  3. Válaszd ki a Működési módot: Infinite Scrolling, Load more vagy Ajax Pagination.
  4. Add meg a kötelező CSS szelektorokat:
Navigation selector: .woocommerce-pagination
Next selector: .woocommerce-pagination a.next, .page-numbers .next
Item selector: .products li.product
Content selector: .products
  1. Kapcsold be az URL‑frissítést, ha fontos a visszalépés és a mérés.
  2. Állítsd be a loadert, animációt és – ha kell – a „Továbbiak” gomb feliratát.
  3. Mentsd a szekciót, teszteld asztali és mobil nézetben.

Fejlesztői események példák:

// Új elemek beszúrása után animáció vagy mérés
document.addEventListener('yith_infs_added_elem', function (e) {
  // pl. lazyload frissítés, komponensek újrainicializálása
});

// URL-váltáskor oldalletöltés küldése (GA4 / dataLayer példa)
document.addEventListener('yith_infs_url_changed', function () {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'page_view',
    page_location: location.href
  });
});

Előnyök és értékajánlat​

  • Kevesebb súrlódás: a felhasználó nem keresgél „Következő oldal” gombot.
  • Gyorsabb felfedezés: több terméket látnak rövidebb idő alatt.
  • Jobb mobil UX: természetes, folyamatos görgetés.
  • Mérhetőség: URL‑frissítéssel pontosabb analitikát kapsz a listanézetben.
  • Rugalmas testreszabás: módok, animációk, gombszöveg, fejlesztői horgok.

A bővítmény nem gyűjt személyes adatot, és együttműködik elterjedt témákkal és többnyelvű bővítményekkel.

Free vs Premium​

  • Free: egyetlen szekció, alap loader, mobil támogatás, saját ikon feltöltése.
  • Premium: korlátlan szekció, három lapozási mód, dinamikus URL‑frissítés, animációk, gombtestreszabás, AJAX‑szűréssel való integráció, fejlesztői események.

Kinek ajánlott?​

  • WooCommerce boltoknak, ahol fontos a termékfelfedezés sebessége és a mobil konverzió.
  • Tartalomoldalaknak/blogoknak, ahol a folyamatos olvasási élmény növeli az oldalon töltött időt.
  • Ügynökségeknek/fejlesztőknek, akik skálázható, testreszabható megoldást szeretnének különböző archívumokra.
  • Adatvezérelt csapatoknak, akik pontos mérésre és SEO‑barát megvalósításra törekednek.

Bevezetési megfontolások​

  • Teljesítmény: végtelen görgetésnél sok elem gyűlhet össze. Használj kép‑lazyloadot, gyorsítótárat, ésszerű elemszámot és mértékletes animációt.
  • SEO: kapcsold be az URL‑frissítést, és biztosíts külön is elérhető, lapozott URL‑eket. Így az „infinite scroll” használható keresőbarát módon.
  • Analitika: kösd az oldalmegtekintés‑küldést az yith_infs_url_changed eseményhez, hogy a görgetés közben betöltött oldalak is mérve legyenek.
  • UX döntési mátrix:
    • Nagy katalógus, mobil fókusz: végtelen görgetés.
    • Stabil lábléc/konverziós elemek megőrzése: „Továbbiak” gomb.
    • Precíz oldalankénti mérés és kontroll: AJAX‑os lapozó.

Ezzel a bővítménnyel gyors, modern és mérhető listanézetet hozhatsz létre WordPressen és WooCommerce‑en – pontosan ott és úgy, ahol neked a legnagyobb értéket adja.