Tovább a tartalomhoz

Szűrők az oldalon

A szűrők elhelyezése blokkal, widgettel vagy elemmel: a szolgáltató kiválasztása, a működési mód, a további beállítások, az aktív szűrők és címkék.

A mentett szűrő magától nem jelenik meg az oldalon. Azt az oldalt kell szerkesztened, amelyiken a szűrendő tartalom van, és oda kell tenned a szűrő blokkját (Gutenberg), widgetjét (Elementor) vagy elemét (Bricks). Mindhárom szerkesztőben ugyanazok a beállítások vannak, a blokkoknál kiegészülnek a Haladó panellel (TOVÁBBI CSS OSZTÁLY(OK)).

Minden szűrőtípusnak megvan a saját blokkja, widgetje és eleme: jelölőnégyzetek, kiválasztás, tartomány, jelölőnégyzetes tartomány, dátumtartomány, dátum szerinti időszak, választógomb, értékelés, ábécé, keresés és vizuális. Külön elemként elérhető még az aktív szűrők, az aktív címkék, az alkalmazás gomb, a szűrők törlése, a lapozó és a rendezés.

Szűrő elhelyezése lépésről lépésre

Szekció neve “Szűrő elhelyezése lépésről lépésre”

Példa Gutenberg-szerkesztővel, WooCommerce shortcode-dal:

  1. Szerkeszd az oldalt, és add hozzá a szűrendő tartalmat, például egy Rövidkód blokkot a [products limit="12" columns="3"] tartalommal.
  2. Add hozzá a szűrő blokkját (például Checkboxes) a tartalom fölé.3. A jobb oldali sávban a SELECT FILTER listából válaszd ki a korábban létrehozott szűrőt.
  3. A THIS FILTER FOR listából válaszd ki a szolgáltatót, vagyis azt a tartalmat, amelyet a szűrő szűkít (például WooCommerce shortcode).
  4. Mentsd az oldalt, és nézd meg a nyilvános oldalon.
https://minta-bolt.hu/wp-admin/post.php?post=36&action=edit
A jelölőnégyzetes szűrő blokkja a szerkesztőben

A szerkesztő sávjában a blokk általános beállításai látszanak. A kiválasztott szolgáltató nélküli szűrő nem szűr semmit.

https://minta-bolt.hu/szurok/
A szűrők a nyilvános oldalon

A nyilvános oldalon a keresőmező, a kategória jelölőnégyzetei és az ár csúszkája a termékek fölött jelennek meg.

Ha a látogató kijelöl egy kategóriát, a lista frissül, és az Active tags blokk kiírja az aktív szűrőt:

https://minta-bolt.hu/szurok/
Kijelölt kategória az aktív címkék között

A szűrőtípusok együtt is használhatók egy oldalon:

https://minta-bolt.hu/szurotipusok/
Több szűrőtípus egy oldalon

Az alábbi mezők minden szűrőnél megvannak. A blokkoknál nagybetűs feliratok vannak, az Elementorban és a Bricksben ugyanezek kisbetűvel.

Beállítás Mit csinál
SELECT FILTER A megjelenítendő szűrő. Az Elementorban a név első betűit begépelve keres a lista.
THIS FILTER FOR A szolgáltató, amelyhez a szűrő kapcsolódik. A lista az oldalon használható és az Általános beállítások oldalon engedélyezett szolgáltatókat mutatja.
APPLY TYPE A szűrés módja. AJAX: az oldal újratöltése nélkül frissül az eredmény. Page reload: az oldal újratöltődik (ilyenkor alkalmazás gombot használj). Kevert: nincs újratöltés, de az URL megváltozik, így a szűrt találati oldal linkje megosztható. A Page reload és a Kevert módosítja az oldal URL-jét. Keresésnél további mód az „AJAX on typing”: a keresés akkor indul, ha a látogató elég betűt (a Min number of letters mezőben megadott számút) írt.
APPLY ON Value change: a szűrés a kijelölés megváltozásakor azonnal megtörténik. Click on apply button: csak az alkalmazás gombra kattintva.
Show apply button Alkalmazás gombot jelenít meg. A gomb szövege megadható. Akkor kapcsold be, ha az APPLY ON értéke Click on apply button.
Show filter label Megjeleníti a szűrő Szűrőcímke feliratát a szűrő fölött.
QUERY ID Akkor kell kitölteni, ha több azonos típusú tartalom van az oldalon, és csak az egyiket kell szűrni. Például két Listing Grid közül csak az egyik szűrendő: ennek a Haladó fülén a CSS ID mezőbe írj egy egyedi nevet, ugyanezt add meg itt.
Additional Providers Enabled Bekapcsolva egy szűrő több szolgáltatóra is hat. Az Add Item gombbal veszel fel újabb szolgáltatókat, mindegyikhez tartozik Additional Provider és Additional Query ID.

További beállítások (Additional Settings)

Szekció neve “További beállítások (Additional Settings)”

A jelölőnégyzetes, választógombos és jelölőnégyzetes tartományszűrő kiegészítő lehetőségei. Alapból mind ki vannak kapcsolva.

Kapcsoló Mit csinál
Search Enabled Keresőmező a szűrő fölött. A Search Placeholder a mező szövege.
More/Less Enabled A lista egy részét elrejti, és „More” / „Less” gombbal nyitható. A Less Items Count az alapból látható elemek száma, a More Text és a Less Text a gombok felirata.
Dropdown Enabled Az opciók legördülő listába kerülnek. A Placeholder a lista felirata. Az N Selected a kijelölt elemek számát mutatja a nevek helyett: a Number of Named Items azt adja meg, hány név látszik, a Generic text pedig az utána álló szöveg (a {number} jelölő helyére kerül a darabszám). Az Add apply button kapcsolóval alkalmazás gomb kerül a listába, a szövegét az Apply button text adja.
Scroll Enabled Görgethető lista. A Scroll Height(px) a lista magassága képpontban.

A jelölőnégyzetes szűrő elemén a Show Checkbox kapcsoló (Bricks) a jelölőnégyzeteket tudja elrejteni.

Az indexelő megmutatja, hány elem tartozik egy-egy opcióhoz. Az Indexelő beállításai oldalon be kell kapcsolni az indexelt szűrők használatát (Beállítások), majd az egyes szűrőn:

Beállítás Mit csinál
Apply Indexer A szűrő adatait adatbázisban tárolja, és onnan olvassa vissza.
Show Counter Számláló jelenik meg az opciók mellett. Elérhető mellé a Counter Prefix (a számláló előtt) és a Counter Suffix (utána).
If Item Empty Mi történjen azzal az opcióval, amelyhez nem tartozik elem: megjelenik, elrejtődik vagy letiltódik.
Change Counters Mikor változzanak a számlálók: Always, Never vagy Other Filters Changed.

Két külön elem mutatja a látogatónak, milyen szűrők vannak alkalmazva, és lehetővé teszi, hogy visszavonja őket. Ha nincs aktív szűrő, az elem rejtve marad. Az elemek a szűrők Aktív szűrőcímke feliratát használják.

Active Filters (aktív szűrők): a szűrők listája, amelyből egyenként kikapcsolhatók.

Beállítás Mit csinál
Show active filters for A szolgáltató, amelynek a szűrőit mutatja.
Apply type AJAX vagy Page Reload: így frissül a lista egy szűrő kikapcsolásakor.
Label A lista felirata.
Query ID, Additional Providers Enabled Ugyanúgy működnek, mint a szűrőknél.

Active Tags (aktív címkék): címkeként jeleníti meg a kiválasztott szűrőket, mindegyik mellett egy „×” jellel, amellyel a szűrő kikapcsolható.

Beállítás Mit csinál
This active tags for A szolgáltató.
Apply type AJAX, Page Reload vagy Mixed.
Label A címkelista felirata.
Clear item Bekapcsolva egy hivatkozás megszünteti az összes alkalmazott szűrőt. Gutenbergben a CLEAR ITEM LABEL mezőben a hivatkozás szövegét is megadhatod.
Query ID, Additional Providers Enabled Ugyanúgy működnek, mint a szűrőknél.
https://minta-bolt.hu/wp-admin/post.php?post=26&action=edit
Az Active Tags blokk beállításai a Gutenberg oldalsávjában

A képen az Általános panel látszik: a szolgáltató, az alkalmazási mód, a Query ID, a FELIRAT és a Clear Item kapcsoló a hivatkozás szövegével.

A kinézet az Elementorban a Style fülön (a cím, a címkelista és a címkék), Gutenbergben a JetStyleManager ingyenes bővítménnyel (cím, szűrők, elemek), Bricksben a CONTENT és STYLE fülön állítható. A Haladó fül az elrendezést, a dinamikus láthatóságot, a mozgáseffekteket és az átalakítást adja. Az oldalon a címkék az alkalmazott szűrőket mutatják, a címke melletti „×” jelre kattintva az adott szűrő kikapcsolódik.

A szolgáltatók listája a THIS FILTER FOR mezőben az oldalon elérhető bővítmények szerint alakul. Gutenbergben az Elementor- és a JetWooBuilder-szolgáltatók nem szerepelnek, de elérhető a WooCommerce shortcode és a JetEngine-szolgáltatók. Bricksben a JetEngine-változatok mellett a Bricks Query Loop is választható. Az Elementor szolgáltatói közé tartozik a JetEngine Listing Grid és Calendar, az Elementor Pro Posts, Archive, Loop Grid, Portfolio, Products, Archive Products és a JetWooBuilder terméklista és termékrács.

A Dátumtartomány és Dátum szerinti időszak szűrő JetEngine, JetEngine Calendar és JetEngine Maps szolgáltatókkal használható.

A Location & distance widget (Elementor és Gutenberg) a JetEngine Query Builder földrajzi lekérdezésén (Geo Search) alapul, és csak akkor érhető el, ha a JetEngine Maps Listings modulja be van kapcsolva, a térképbeállítások pedig ki vannak töltve.

  1. Hozz létre szűrőt Location & Distance típussal, és adj neki Szűrőcímkét és Aktív szűrőcímkét. Más beállítása nincs.
  2. A JetEngine Query Builderben készíts lekérdezést (bejegyzés, kifejezés, felhasználó vagy egyéni tartalomtípus), és a Geo Search fülön add meg a térkép középpontját, a címet tartalmazó metamező kulcsát (Address Field), a Distance sugarat és a mértékegységet (Units).
  3. Tedd a widgetet az oldalra: a Placeholder a keresőmező szövege, a Text for user geolocation control a helymeghatározó ikon súgószövege. A Distance List fülön a távolság mértékegysége (kilométer vagy mérföld) és a választható távolságok (alapból 5, 10, 25, 50, 100) szerkeszthetők.

Gutenbergben a blokk neve Listing Distance Filter. Az Általános panel ugyanazokat a beállításokat adja, mint az Elementor Content füle, és van Show filter label kapcsoló is, amely a szűrő feliratát megjeleníti. A Distance Control panelen a távolságok egyetlen szövegmezőben, vesszővel elválasztva szerepelnek. A Haladó panel TOVÁBBI CSS OSZTÁLY(OK) mezőjébe a blokk stílusához szükséges osztályokat írhatod. Bricksben az elem Content és Distance List fülei az Elementoréval azonosak.

A további beállítások (Elementor Content fül): Select filter (a szűrő neve), This filter for (a szolgáltató), Apply type (AJAX, Page Reload, Mixed), Apply on (Value change vagy Click on apply button; az utóbbihoz az alkalmaz gomb elemet is az oldalra kell tenni), Query ID és Additional Providers Enabled (az Add Item gombbal felvett szolgáltatókhoz külön Additional Provider és Additional Query ID tartozik).

Szolgáltatóként térkép-listázást (Map Listing) tegyél az oldalra. Az Általános fülén add meg az előre elkészített listinget és a címeket tároló metamezőt (Address Meta Field), az egyéni lekérdezés (Custom Query) fülén pedig kapcsold be a Use Custom Query kapcsolót, és válaszd ki a Query Builderben készített lekérdezést. Gutenbergben ugyanez a Map Listing blokk (LISTING, ADDRESS META FIELD).

Az oldalon a térkép kezdetben a lekérdezésben megadott pont körül áll. A keresőmezőbe írt helyhez a rendszer találatokat kínál, mellette a távolság mértékegységét lehet választani, és a kettő együtt a megadott távolságon belüli elemeket mutatja. A Your current location gomb a látogató aktuális helyére állítja a térképet, a beállított távolsággal.

Ez a szűrőtípus csak aktív JetEngine mellett jelenik meg a típusok között.

Készült: Frissítve:

Tiszteletben tartjuk a magánszférádat

Sütiket használunk a böngészési élmény javítására és a forgalom elemzésére. Az analitika csak akkor indul, ha engeded. Adatvédelmi irányelvek, Sütitájékoztató.

Sütibeállítások