# Szűrők összekötése a szolgáltatókkal egyéni Query ID-val

> Szolgáltatónként: hogyan kapcsold a szűrőt az Elementor Pro, a JetEngine, a JetWooBuilder, a WooCommerce és a JSF Listing elemeihez.

A szűrő akkor szűr, ha a **THIS FILTER FOR** (az Elementorban **This filter for**) mezőben kiválasztod a szolgáltatót, vagyis azt az elemet, amelynek a tartalmát szűkíti. Ha az oldalon több azonos típusú elem van, és csak az egyiket kell szűrni, egyedi azonosítót, **Query ID**-t is használsz. Ez a fejezet szolgáltatónként leírja, hová kell beírni az azonosítót.

## Előkészület

- A szolgáltatót előbb engedélyezni kell: **Smart Filters → Általános beállítások** ([Beállítások](https://hub.hellowp.io/hu/plugins/jet-smart-filters/beallitasok/)).
- A szűrőt és a szűrendő tartalmat (bejegyzések, termékek) előre elő kell készíteni.
- A **Query ID** legyen egyedi, ne tartalmazzon szóközt, speciális karaktert vagy számot, és ne ismétlődjön az oldalon.
- Több szolgáltató az egy oldalon: [Egy szűrő több widgetre](https://hub.hellowp.io/hu/plugins/jet-smart-filters/widgetek-tobb-szolgaltato/) és [A Query ID](https://hub.hellowp.io/hu/plugins/jet-smart-filters/altalanos-query-id/).

A menet a legtöbb szolgáltatónál ugyanaz:

1. A szűrő widgetjében válaszd ki a szűrőt (**Select filter**), a **This filter for** listában a szolgáltatót, és írd be a **Query ID**-t.
2. A szűrt elem **Haladó** (Advanced) fülén a **CSS ID** mezőbe másold be ugyanazt az azonosítót.
3. Mentsd az oldalt, és próbáld ki a nyilvános oldalon.

Az Elementor Pro **Portfolio** és **Posts** elemeinél más a menet, lásd lent.

## Elementor Pro szolgáltatók

| Szolgáltató | Szűrt elem | Megjegyzés |
| --- | --- | --- |
| **Elementor Pro Archive Products** | Archive Products widget | A widgetet a bolt archív oldalára kell tenni. A **CSS ID** mezőbe a **Query ID** kerül. |
| **Elementor Pro Archive** | Archive Posts widget | Archív sablonban használható. A bejegyzések számát a **Beállítások → Olvasás** oldal adja. A **CSS ID** mezőbe a **Query ID** kerül. |
| **Elementor Pro Loop Grid** | Loop Grid widget | Előtte el kell készíteni a ciklus sablonját. A widgetben kapcsold be az **Is Filterable** kapcsolót, a **CSS ID** mezőbe a **Query ID** kerül. |
| **Elementor Pro Portfolio** | Portfolio widget | A widget **Query** fülén a **Query ID** mezőbe a `jet-smart-filters` értéket írd. |
| **Elementor Pro Posts** | Posts widget | A widget **Query** fülén a **Query ID** mezőbe a `jet-smart-filters` értéket írd. |
| **Elementor Pro Products** | Products widget | A **CSS ID** mezőbe a **Query ID** kerül. |

Ha egy oldalon több Portfolio vagy több Posts widget van, és csak az egyiket kell szűrni, ott is ugyanazt az azonosítót add meg a szűrő **Query ID** mezőjében és a widget **Haladó** fülén a **CSS ID** mezőben.

## JetEngine szolgáltatók

A JetEngine szolgáltatók is a **Query ID**-n át kapcsolódnak. Ha a listázásra egyéni lekérdezés (Query Builder) van beállítva, ugyanazt az azonosítót a lekérdezés beállításai között is meg kell adni. Ha egy oldalon több lekérdezés van, mindegyiknek más azonosítót adj.

| Szolgáltató | Szűrt elem | Megjegyzés |
| --- | --- | --- |
| **JetEngine** | Listing Grid | A **Listing** mezőben válaszd ki a sablont, a **Haladó** fülön a **CSS ID** mezőbe a **Query ID** kerül. |
| **JetEngine Calendar** | Dynamic Calendar | A **Haladó** fülön a **CSS ID** mezőbe a **Query ID** kerül. |
| **JetEngine Maps** | Maps Listing | A **Haladó** fülön a **CSS ID** mezőbe a **Query ID** kerül. |
| **JetEngine Dynamic Table** | Dynamic Table | A szolgáltatóhoz be kell kapcsolni a **Dynamic Tables Builder** modult: **JetEngine → JetEngine → Modulok → Külső modulok**. A **CSS ID** mezőbe a **Query ID** kerül. |
| **JetEngine Dynamic Chart** | Dynamic Chart | A szolgáltatóhoz be kell kapcsolni a **Dynamic Chart Builder** modult ugyanott. A **CSS ID** mezőbe a **Query ID** kerül. |
| **JetEngine Multi-Day Calendar** | Multi-Day Calendar | A **CSS ID** mezőbe a **Query ID** kerül. |

## JetWooBuilder szolgáltatók

| Szolgáltató | Szűrt elem | Megjegyzés |
| --- | --- | --- |
| **JetWooBuilder Products Grid** | Products Grid widget | A **Haladó** fülön a **CSS ID** mezőbe a **Query ID** kerül. |
| **JetWooBuilder Products List** | Products List widget | A **Haladó** fülön a **CSS ID** mezőbe a **Query ID** kerül. |
| **WooCommerce Archive (by JetWooBuilder)** | Products Loop widget a bolt archív oldalán | A Products Loop widgetnek nincs külön beállítása. |

## WooCommerce szolgáltatók

| Szolgáltató | Megjegyzés |
| --- | --- |
| **Default WooCommerce Archive (Classic)** | A WooCommerce saját archív oldalát szűri. Nem kell **Query ID**. |
| **WooCommerce Shortcode** | A shortcode-ban a **Query ID** a `class` attribútum értéke lesz. |

A shortcode a **Query ID** megadása után így néz ki:

```text
[products limit="4" columns="4" orderby="id" order="DESC" visibility="visible" class="my_products"]
```

A szűrő **Query ID** mezőjébe ilyenkor a `my_products` kerül.

## JSF Listing

A **JSF Listing** szolgáltató a beépített Listing építővel készült listázásokat szűri ([Listing építő](https://hub.hellowp.io/hu/plugins/jet-smart-filters/listing-felepites/)). A JSF Listing widgetnek nincs külön beállítása a szűréshez: válaszd ki a szűrőt, rendeld hozzá a **JSF Listing** szolgáltatót, mentsd az oldalt.

## További szolgáltatók

A Dynamic Chart, a Dynamic Table és a Maps elemeket, valamint a Bricks Query Loop elemet a JetSmartFilters azokban az esetekben is támogatja, amikor a bővítmény megfelelő szolgáltatója be van kapcsolva.