# A Listing Builder: listing és elem készítése

> A JetSmartFilters saját listingje: lekérdezés, elrendezés, elem (item), az elem linkje, és a GYIK.

A JetSmartFilters saját listing-megoldással is rendelkezik: egy oldalon megjeleníthetsz egy elemgyűjteményt, és szűrőket kapcsolhatsz hozzá. A listingnél két dolgot állítasz be: a **lekérdezést** (mely elemek jelenjenek meg) és az **elrendezést** (hogyan). Minden listinghez tartozik egy **elem** (item): ez egyetlen bejegyzés sablonja, blokkokkal (cím, kép, link és így tovább). A sablon minden találatra automatikusan megismétlődik.

## A listingek listája

A listingeket az **Intelligens szűrők → Listing Builder** oldalon találod. Itt látod a már létrehozott listingeket, vagy újat építhetsz.

![A listingek listája a Listing Builderben](./kepek/listing-lista.webp)

*A listingek listája a Listing Builderben* (https://minta-bolt.hu/wp-admin/admin.php?page=jsf-listing-builder)

A felső jobb sarokban az **All Listings** és az **All Items** gombbal váltasz a listingek és az elemek listája között. A lista fölött kereshetsz, a fogaskerék ikonnal pedig a megjelenő lista megjelenését és tulajdonságait állíthatod. Új listinghez kattints az **Add New Listing** gombra. Ha az **All Items** nézetben vagy, az **Add New Item** gombbal új elemet is felvehetsz önállóan.

![Az elemek listája](./kepek/listing-elemek-lista.webp)

*Az elemek listája* (https://minta-bolt.hu/wp-admin/admin.php?page=jsf-listing-builder)

## A listing három füle

Az **Add New Listing** után három fület látsz: **Query**, **Layout** és **Item**. Alapból a **Query** van nyitva. A **Listing Name…** mezőbe a listing nevét írd.

### Query: mi jelenjen meg

A **QUERY TYPE** mező az adatforrást adja meg:

- **Posts**: a Listing Builderben megadott beállítások szerint jelennek meg a bejegyzések;
- **JetEngine Query Builder**: egy korábban a JetEngine Query Builderében létrehozott lekérdezést használ. A lekérdezés teljes logikáját a JetEngine kezeli, a Listing Builder csak a visszakapott elemeket jeleníti meg. Ilyenkor a **QUERY** mezőben választod ki a lekérdezést.

A két lekérdezéstípus beállítása külön tárolódik, ezért a váltás nem írja felül a másik beállításait.

![Az új listing Query füle](./kepek/listing-uj-lekerdezes.webp)

*Az új listing Query füle* (https://minta-bolt.hu/wp-admin/admin.php?page=jsf-listing-builder)

A **Posts** típus beállításai:

| Szakasz | Beállítás | Mit csinál |
| --- | --- | --- |
| Content | **PER PAGE** | Hány elem jelenjen meg oldalanként (alapérték: 10). |
| Content | **OFFSET** | Hány elemet hagyjon ki a lista elejéről (alapérték: 0). Ha 2, az első két elem nem jelenik meg, a lista a harmadiktól indul. |
| Order | **ORDER BY** | A rendezés szempontja, például dátum, azonosító, szerző (alapérték: **By date**). |
| Order | **ORDER** | A rendezés iránya, növekvő vagy csökkenő (alapból csökkenő). |
| Posts | **POST TYPES** | A tartalomtípus, amiből a listing elemei jönnek. Több is választható. |
| Posts | **POST STATUS** | A megjelenítendő bejegyzések állapota. Több is választható. |
| Posts | **POST AUTHORS** | Azok a szerzők, akiknek a bejegyzései megjelennek. Több is választható. |
| Posts | **INCLUDE POSTS** | A felvenni kívánt bejegyzések. |
| Posts | **EXCLUDE POSTS** | A kihagyni kívánt bejegyzések. |
| Posts | **Ignore Sticky Posts** | Alapból ki van kapcsolva, ilyenkor a kiemelt (sticky) bejegyzések a lista tetején jelennek meg. Bekapcsolva a kiemelés nem hat, a bejegyzések a helyükön maradnak. |

A **Show advanced settings** gombra még két szakasz nyílik: **Taxonomies** és **Custom Fields**. Velük egy-egy taxonómiához vagy egyéni mezőhöz tartozó tartalmat jeleníthetsz meg.

**Taxonomies**, az **Add Clauses** gomb után:

| Beállítás | Mit csinál |
| --- | --- |
| **TAXONOMY** | A taxonómia, amiből a bejegyzések jönnek (kategóriák, címkék vagy egyéni taxonómia). |
| **FIELD** | A következő mezőben a kifejezések kiválasztásának szempontja: **Term ID**, **Name**, **Slug** vagy **Term taxonomy ID**. |
| **TERMS** | A lekérdezésben használt kifejezések. |
| **COMPARE OPERATOR** | Hogyan hasonlítsa össze a bejegyzés kifejezéseit a **TERMS** mezőben megadottakkal. |
| **Child Terms** | Alapból ki van kapcsolva. Bekapcsolva hierarchikus taxonómiánál az alárendelt kifejezéseket is belevonja. |

Az **Add Clause** gombbal „ÉS” (AND) kapcsolatú új feltételt veszel fel, az **Add Clauses** gomb ismételt megnyomásával „VAGY” (OR) kapcsolatú feltételcsoportot.

**Custom Fields**, az **Add Clauses** gomb után:

| Beállítás | Mit csinál |
| --- | --- |
| **FIELD KEY** | A lekérdezendő meta mező kulcsa (neve). |
| **FIELD TYPE** | A mező típusa a lekérdezésben: például **Char**, **Numeric**, **Date**. |
| **COMPARE WITH** | Az összehasonlítás művelete. |
| **FIELD VALUE** | Az az érték, amellyel az egyéni mező értékét összeveted. |

Itt is az **Add Clause** ÉS, az **Add Clauses** pedig VAGY kapcsolatú feltételt ad hozzá.

### Layout: az oszlopok

A **Layout** fülön egyetlen szakasz van, a **Sizing**. Alapból három sor van benne: háromoszlopos, kétoszlopos és egyoszlopos elrendezés a különböző képernyőszélességekhez. Törölheted vagy átállíthatod őket.

![Az új listing Layout füle](./kepek/listing-uj-elrendezes.webp)

*Az új listing Layout füle* (https://minta-bolt.hu/wp-admin/admin.php?page=jsf-listing-builder)

Egy sor beállításai:

| Beállítás | Mit csinál |
| --- | --- |
| **MAX WIDTH** | A listing tárolójának legnagyobb szélessége. |
| **COLUMNS** | Az oszlopok száma a listingben. |
| **SPACING** | A listing elemei közötti távolság. |

Új elrendezést az **Add Size** gombbal adsz hozzá. A sorokat a bal oldali fogantyúval átrendezheted, a két ikonnal pedig másolhatod vagy törölheted.

### Item: az elem hozzárendelése

Az **Item** fülön a legördülő listából kiválaszthatod a korábban megépített elemet, vagy a **Create new item** hivatkozással újat készíthetsz. Új elem készítése előtt érdemes a listinget elmenteni a **Save Listing** gombbal.

![A listing Item füle](./kepek/listing-uj-elem.webp)

*A listing Item füle* (https://minta-bolt.hu/wp-admin/admin.php?page=jsf-listing-builder)

## Az elem szerkesztése

A **Create new item** az elem szerkesztőoldalára visz. Az oldalsávban az elem beállításai két fülön vannak.

**General Settings**:

- **ITEM NAME**: az elem neve (add meg, mielőtt mentenél);
- **PREVIEW WIDTH**: az elem előnézetének szélessége a szerkesztőben.

**Item Link**: az **Item Link** kapcsolóval az egész listingelem kattinthatóvá válik. Bekapcsolva ezek a beállítások jelennek meg:

| Beállítás | Mit csinál |
| --- | --- |
| **SOURCE** | Honnan jöjjön a link címe: **Permalink** (az aktuális elem állandó linkje), **Attachment URL** (a kapcsolódó melléklet címe), **URL From Meta Field** (a kiválasztott meta mezőből), **URL From Options** (a megadott beállításmezőből). |
| **FALLBACK** | Tartalék cím, ha a kiválasztott forrás nem ad értéket. |
| **URL PREFIX** | Az érték elé fűzött előtag. |
| **URL ANCHOR** | A létrehozott címhez fűzött horgony. |
| **Open in a New Window** | Bekapcsolva a link új böngészőablakban nyílik meg. |
| **ADD “REL” ATTRIBUTE** | Legördülő lista: `rel` attribútumot adhatsz a linkhez. |

Ha az egész elemnek linknek kell lennie, használd az **Item Link** beállítást, ne külön **Listing Link** blokkot.

Tartalmat a „plusz” gombbal vagy a szerkesztőben a `/` karakterrel kezdett blokknévvel adhatsz az elemhez. A főbb blokkok: **Listing Field** (szöveg), **Listing Image** (dinamikus kép), **Listing Link** (szöveges link) és **Listing Terms** (a bejegyzés kifejezései). Mindegyiket a [Listing blokkok](https://hub.hellowp.io/hu/plugins/jet-smart-filters/listing-blokkok/) fejezet írja le. Ha kész az elem, a **Save** gombbal mentsd, majd a listing **Item** fülén válaszd ki a legördülő listából, és mentsd a listinget a **Save Listing** gombbal.

## Szűrő és listing az oldalon

A kész listinghez szűrőket rendelhetsz a **JSF Listing** blokkal, widgettel vagy elemmel. A lépések a [Szűrő és listing egy oldalon](https://hub.hellowp.io/hu/plugins/jet-smart-filters/listing-szuro-oldalon/) fejezetben vannak. Blokkszerkesztőben a JSF Listinget egy rugalmas tároló (Flexible Container) blokkba is teheted, hogy alakíthasd az elrendezést.

## Gyakori kérdések

**Miben különbözik a Listing Builder a JetEngine Listing Gridtől?**
A Listing Builder a JetSmartFiltersbe épített, saját listing-megoldás. A JetEngine Listing Grid a JetEngine külön listingrendszere. A választás a projekt igényeitől és a kedvelt munkamenettől függ.

**Milyen adatforrásokat támogat a Listing Builder?**
Jelenleg a szokásos **Posts** lekérdezést és a JetEngine Query Builderrel készített lekérdezést.

**Megmaradnak a beállítások, ha a Posts és a JetEngine Query Builder között váltok?**
Igen, mindegyik lekérdezéstípus beállítása külön tárolódik.

**Hogyan lehet a listinget kattinthatóvá tenni?**
Az elem szerkesztőjében az **Item Link** fülön kapcsold be az **Item Link** kapcsolót, és állítsd be a link forrását, a tartalék címet, az előtagot és a többit.

**Működnek a szűrők a JetEngine Query Builderre épülő listingekkel?**
Igen, ha a lekérdezés a szűrőkkel összeegyeztethető adatot ad vissza.

**Gyorsabb a Listing Builder, mint a külső listingszolgáltatók?**
Sok esetben igen: a listinget és a szűrést ugyanaz a rendszer kezeli, ezért kevesebb integráció kell, és ez csökkentheti a terhelést.