# Termékarchívum sablon és dinamikus archívumoldalak

> A WooCommerce Termékarchívum sablon elemei, és lépésenként egy olyan archívumsablon, amely a beállítástól függően kategóriákat, termékeket vagy mindkettőt mutatja.

A termékarchívum oldalait (termékkategóriák, címkék, attribútumok és a bolt főoldala) a **WooCommerce - Termékarchívum** típusú Bricks-sablonnal tervezed meg.

![A Bolt oldal a látogatói oldalon: találatszám, rendezés és terméklista](./kepek/woocommerce-bolt-archivum.webp)

*A Bolt oldal a látogatói oldalon: találatszám, rendezés és terméklista* (https://minta-bolt.hu/bolt/)

A képen a termékarchívum szokásos részei látszanak: az oldal címe, az **Összesen 1 találat** felirat, a rendezési választó és a termékrács.

## A sablon létrehozása

1. Nyisd meg a Bricks sablonok képernyőjét, és adj hozzá új sablont.
2. A jobb felső legördülőben válaszd a **WooCommerce - Termékarchívum** sablontípust.
3. Kattints a **Közzététel** vagy a **Piszkozat mentése** gombra.
4. Kattints a **Szerkesztés Bricks-szel** gombra a szerkesztő megnyitásához.

Ezt és a többi sablont a Bricks szerkesztőfelületén is létrehozhatod és szerkesztheted a mappák ikonra kattintva vagy a CMD / CTRL + SHIFT + L billentyűkombinációval.

## A Termékarchívum sablon elemei

### Archívum címe

A termékarchívumhoz nincs külön címsor-elem. Ehhez használhatod a **Bejegyzés címe** elemet, vagy egy **Címsor** elemet az `{archive_title}` címkével.

### Breadcrumbok

A **Breadcrumbok** elem a „Kezdőlaptól” a magasabb szintű kategóriákon át az oldalon megjelenített tartalomig mutatja a navigációs hivatkozásokat. Az elem a WooCommerce alapértelmezett morzsamotorját használja az útvonal egyes részeihez.

### Termékarchívum leírása

Megjeleníti a termékkategória (vagy más terméktaxonómia-kifejezés) leírását. Ha a bolt főoldalát megjelenítő sablonban használod, az oldal tartalmát írja ki (a Gutenberg/blokkszerkesztőből).

### Termékek

A termékeket rácsban listázó fő elem. Vezérlőkkel testre szabhatod a stílust és az elrendezést, módosíthatod a lekérdezést, és kiválaszthatod, milyen tartalom (mező) jelenjen meg minden termékről.

Az elem együttműködik a **Termékszűrő**, a **Termékek lapozása**, a **Termékek rendezési szempontja** és az **Összes terméktalálat** elemmel. Ezért a lekérdezés eredményét a szűrők és a rendezési feltételek befolyásolják, ami hatással van a lapozás és az összes találat kimenetére is.

A Termékek elem lekérdezése összefésüli az elem lekérdezési argumentumait az alapértelmezett WooCommerce-lekérdezéssel, ha az oldal a termékarchívum vagy egy terméktaxonómia-archívum (termékkategória vagy címke). Ha tehát egy adott termékkategória archívumoldalát nézed, csak az adott kategória termékei látszanak.

### Termékszűrő

A **Termékszűrő** elemmel lekérdezési szűrőket adhatsz az oldalhoz, hogy a látogató keresni vagy szűkíteni tudja a termékek listáját. Három szűrőtípust tartalmaz:

- **Taxonómia:** a listát egy vagy több taxonómiakifejezés szerint szűri.
- **Termékattribútumok:** a listát termékattribútumok, például méret, szín vagy bármely más egyéni attribútum szerint szűri.
- **Egyebek:** különleges szűrők, például ár kettős csúszkás szűrő, **csillagos értékelés** szerinti szűrő, készletállapot-szűrő vagy egyszerű keresőmező. Itt találod a szűrők alaphelyzetbe állítása lehetőséget is, amellyel szűrők visszaállító gombot adhatsz.

A taxonómia- és attribútumszűrőknél különféle beviteli elemeket választhatsz: legördülő menü, jelölőnégyzetek, rádiógombok, szöveges lista vagy dobozlista.

### Termékek lapozása

A lapszámhivatkozások listája, amellyel a látogató a terméklista különböző oldalai között lép.

### Termékek rendezési szempontja

Legördülő menüt ad az elrendezéshez, amellyel a látogató megváltoztathatja a termékek sorrendjét. Az alapértelmezett rendezési lehetőségek: népszerűség, átlagos értékelés, legfrissebb, ár (növekvő és csökkenő). A lista a WooCommerce alapértelmezett listáját használja, és WooCommerce-horgokkal vagy harmadik féltől származó bővítményekkel bővíthető.

### Összes terméktalálat

Az aktuális termékekre vonatkozó lekérdezés találatainak számát írja ki.

Az elemek beállításait a [WooCommerce elemek: Termékek, Termékek lapozása és Összes terméktalálat](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-woo-termekek-lapozas-talalatok/) és a [WooCommerce elemek: Értesítés, Termékarchívum leírása, Termékszűrő és Termékek rendezési szempontja](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-woo-ertesites-arhivum-szuro-rendezes/) fejezet részletezi.

## Dinamikus archívumoldal: kategóriák és termékek

Ebben a példában egyéni WooCommerce-archívumsablont készítesz, amely termékkategóriákat és termékeket is meg tud jeleníteni. Ezzel egy időben a WordPress **Megjelenés → Testreszabás → WooCommerce → Termékkatalógus** oldalon a **Bolt oldal megjelenítése** és a **Kategóriaoldal megjelenítése** beállítással szabályozhatod, mikor jelenjenek meg a kategóriák vagy a termékek.

### 1. lépés: termékek és termékkategóriák előkészítése

Győződj meg róla, hogy a termékkategóriáid között vannak alkategóriák is. Vegyél fel néhány terméket, és rendeld őket különböző termékkategóriákhoz. A legjobb, ha minden kategóriához adsz képet, mert a sablonban azt is kiírjuk.

### 2. lépés: a WooCommerce-archívum létrehozása

1. Hozz létre új sablont, és válaszd a megfelelő sablontípust (**WooCommerce - Termékarchívum**).
2. Állítsd be a sablon feltételeit a **Sablonbeállítások → Feltételek** alatt, hogy a sablon a WooCommerce bolt oldalán és a termékkategóriák és címkék archívumoldalain érvényesüljön.
3. Hozz létre két különböző lekérdezési ciklust, amelyeket feltételekkel renderelsz dinamikusan a látogatói oldalon. A példában két szakasz van: az egyik a termékkategóriák ciklusa, a másik a termékeké.

### 3. lépés: a termékkategóriák szakasz

A termékkategóriák dinamikus megjelenítéséhez a **Szülő** mezőben a `get_queried_object_id()` PHP-függvényt kell használnod. Ehhez a Bricks `echo` dinamikus címkéjét használd: írd a **Szülő** mezőbe az `{echo:get_queried_object_id}` címkét.

A szakasz feltételes megjelenítéséhez a WooCommerce `woocommerce_get_loop_display_mode()` függvényét is használod. Ez a beállításaid szerint `products`, `subcategories` vagy `both` szöveget ad vissza.

A kategóriák szakaszra állítsd be a feltételt:

```text
{echo:woocommerce_get_loop_display_mode} != products
```

Ez a szakasz akkor jelenik meg, ha nem a „Termékek megjelenítése” van kiválasztva.

A ciklus képének és szövegének beállításai a példában: a `{woo_product_cat_image}` a kategória képét, a `{term_name:link}` a kategória nevét hivatkozással írja ki.

### 4. lépés: a termékek szakasz

A termékek lekérdezésének beállításai egyszerűek: csak az oldalankénti bejegyzések számát kell megadnod. A termékek szakaszra állítsd be a feltételt:

```text
{echo:woocommerce_get_loop_display_mode} != subcategories
```

Ez a szakasz akkor jelenik meg, ha nem az „Alkategóriák megjelenítése” vagy „Kategóriák megjelenítése” van kiválasztva. A ciklusban a termékek beállításainál csak a használt dinamikus címkékre figyelj, a stílus nem lényeges.

Ha egy terméknél több termékkategória is be van jelölve, de te csak az elsőt akarod kiírni, hogy a címke ne legyen túl hosszú, használhatsz egy egyszerű egyéni függvényt. Cseréld ki a `{post_terms_product_cat}` címkét az `{echo:product_first_category_name}` címkére:

```php
// A gyermektéma functions.php fájljába
// Egy termék első kategóriájának nevét adja vissza
function product_first_category_name() {
  global $product;
  if ( $product && is_a( $product, 'WC_Product' ) ) {
    // A termék kategóriái
    $terms = get_the_terms( $product->get_id(), 'product_cat' );
    $cats = [];
    // Végigmegyünk a kategóriákon, és a $cats tömbhöz adjuk őket
    foreach ( $terms as $term ) {
      $cats[] = $term->name;
    }
    // Az első kategória visszaadása
    if ( ! empty( $cats ) ) {
      ob_start();
      echo $cats[0];
      return ob_get_clean();
    }
  }
}
```

### Az eredmény ellenőrzése

Ezután a bolt oldalnak és a termékkategória-oldalaknak a várt módon kell működniük. A kategóriák és a termékek szakasz megjelenését bármikor szabályozhatod a WordPress vezérlőpultján a **Megjelenés → Testreszabás → WooCommerce → Termékkatalógus** beállításaival.