Eltérő elemszám minden töréspontnál

A Listing Grid képernyőmérettől függően más számú elemet (bejegyzést, kifejezést, felhasználót stb.) mutathat. Az Items Number Switcher szűrőt a JetSmartFilters adja, a Lekérdezéskészítő egyéni lekérdezésével együtt működik, és Elementorban, a blokkszerkesztőben és Bricksben is használható.

Előfeltételek: Elementor (az ingyenes változat elég), blokkszerkesztő vagy Bricks; aktív JetEngine és aktív JetSmartFilters.

1. Az Items Number Filter külső modul bekapcsolása

A JetEngine → JetEngine → Modulok → Külső modulok fülön kapcsold be az Items Number Filter kapcsolót. A modul külön bővítményként települ és kapcsol be.

https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine

A képen az Items Number Filter kapcsolója a külső modulok utolsó sorában látszik.

2. Lekérdezés létrehozása

1. Nyisd meg a JetEngine → Lekérdezéskészítő oldalt, és kattints az Új hozzáadása gombra.
2. Add meg a lekérdezés Név mezőjét, és válaszd ki a Lekérdezés típusa listából a típust. Ha egyéni bejegyzéstípus elemeit jelenítenéd meg, a Bejegyzések lekérdezése típus a jó.
3. Írd be az Egyéni lekérdezés-ID mezőbe az azonosítót. Ezt később a szűrő és a Listing Grid beállításainál is használni fogod. Egyedinek kell lennie, és csak kisbetűt, számot, kötőjelet vagy aláhúzást tartalmazhat.
4. Állítsd be a lekérdezés többi részét: például a Bejegyzések lekérdezése szakasz Általános fülén a bejegyzéstípust („Állások”).

3. Listázási sablon

Készíts listázási sablont a megjelenítendő elemekhez (a bejegyzéstípusok sablonjának lépéseit lásd: Listázási sablon bejegyzéstípushoz Elementorban).

4. Items Number Switcher és Listing Grid beállítása

Elementorban

1. Nyisd meg az oldalt vagy sablont, és húzd be az Items Number Switcher widgetet.
2. A Posts number mezőben eszközönként adhatod meg az elemek számát. Az eszközikonok között váltva állítsd be mindegyiket, például asztali nézetben 6-ot, mobilon 2-t.
3. A This filter for értéke legyen JetEngine.
4. A Query ID mezőbe írd az egyéni lekérdezés azonosítóját.
5. Az Additional Providers Enabled kapcsolót akkor kapcsold be, ha több widgetet is szűrnöd kell.
6. Húzd be a Listing Grid widgetet, és válaszd ki a Listing sablont. Az oszlopok számát is eszközönként állíthatod (például 3 asztali és 1 mobil nézetben).
7. A Custom Query szakaszban kapcsold be a Use Custom Query kapcsolót, és válaszd ki a létrehozott lekérdezést.
8. A Haladó fülön a CSS ID mezőbe írd az egyéni lekérdezés azonosítóját.

A blokkszerkesztőben

1. Add hozzá az Items Number Switcher blokkot. Az ismétlő tételekkel képernyőszélességenként (töréspontonként) adhatod meg az elemek számát: a példában 2 elem a 767 (mobil), 3 a 1024 (tablet), 6 az 1920 (asztali) töréspontnál. A ITEMS NUMBER az elemek száma, a BREAKPOINT a képernyő szélessége.
2. A THIS FILTER FOR listában válaszd a Listing Grid lehetőséget.
3. A QUERY ID mezőbe írd az egyéni lekérdezés azonosítóját.
4. Add hozzá a Listing Grid blokkot, és válaszd ki a LISTING sablont. Szükség szerint állítsd be a COLUMNS NUMBER, COLUMNS NUMBER(TABLET) és COLUMNS NUMBER(MOBILE) értékét.
5. A Custom Query szakaszban kapcsold be a Use Custom Query kapcsolót, és válaszd ki a lekérdezést.
6. A Haladó fülön a CSS ID mezőbe írd az egyéni lekérdezés azonosítóját.

Bricksben

1. Add hozzá az Items Number Switcher elemet, és a Posts number mezőben eszközönként állítsd be az elemek számát.
2. A This filter for értéke legyen JetEngine, a Query ID az egyéni lekérdezés azonosítója. Több elem szűréséhez kapcsold be az Additional Providers Enabled kapcsolót.
3. Add hozzá a Listing Grid elemet, válaszd ki a Listing sablont, és állítsd be az oszlopok számát eszközönként.
4. A CUSTOM QUERY szakaszban kapcsold be a Use Custom Query kapcsolót, és válaszd ki a lekérdezést.
5. A STYLE szakasz CSS részén a CSS ID mezőbe írd az egyéni lekérdezés azonosítóját.

Az eredmény ellenőrzése

Nyisd meg az oldalt a frontenden. Asztali nézetben a rács a beállított számú elemet mutatja (a példában hatot). A tablet és a mobil nézetet a böngésző fejlesztői eszközeivel nézheted meg (Chrome-ban Ctrl+Shift+I, Mac-en Cmd+Opt+I): válaszd ki az eszközt a méretek listájában, vagy állítsd a szélességet. Mobilnézetben a példában két elem látszik, és az oszlopok száma is megváltozik.