# WooCommerce-szerkesztő áttekintése

> A Bricks beépített WooCommerce-szerkesztője: sablontípusok, bolt oldal, elemek, WooCommerce dinamikus adatok, Bricks-beállítások, témastílusok és a termék-lekérdezés.

A WooCommerce ingyenes bővítmény, amely a WordPress-oldalad webáruházi funkcióit kezeli. A Bricks beépített **WooCommerce-szerkesztőjével** a teljes boltodat megtervezheted: a fő bolt oldalt, a termékoldalt, a termékarchívumokat, a kosarat, a pénztárat és a fiókoldalakat.

Ehhez a Bricks WooCommerce-specifikus elemeket és sablontípusokat ad. Egyes elemek csak egy adott sablontípus szerkesztésekor jelennek meg. A **Pénztár vevőadatai** elem például csak a **WooCommerce - Pénztár** sablonban érhető el.

A Kosár, a Pénztár és a Fiókom a haladó moduláris menettel is építhető: ilyenkor több WooCommerce-oldalállapotot közvetlenül a hozzárendelt oldalon szerkesztesz a Kosár v2, a Pénztár v2 és a Fiókoldal v2 elemmel (lásd [haladó moduláris elemek](https://hub.hellowp.io/hu/plugins/bricks-child/woocommerce-modularis-elemek/)). A klasszikus sablonos menet továbbra is támogatott a meglévő boltokhoz és ott, ahol külön sablonrészeket szeretnél. A [Woo beállítási varázsló](https://hub.hellowp.io/hu/plugins/bricks-child/woocommerce-beallito-varazslo/) ellenőrzi a WooCommerce-beállítást, és előre elkészített mintákból létrehozza vagy javítja a klasszikus és a v2 elrendezéseket.

## Első lépések

1. Telepítsd és aktiváld az ingyenes WooCommerce bővítményt a **Bővítmények → Új hozzáadása** oldalon.
2. Aktiválás után beállíthatod a boltot a WooCommerce beállítóvarázslójával, vagy kézzel a WooCommerce beállításai között. A varázslóban nem kell új sablont választanod, mert a Bricks maga is sablon, és teljesen támogatja a WooCommerce-t.
3. A beállítás és néhány termék felvétele után elkezdheted vizuálisan megépíteni a WooCommerce-elrendezéseket Bricksszel.

## WooCommerce-sablonok

| Sablontípus | Leírás |
|---|---|
| WooCommerce - Termékoldal | Egyedi termékoldal. |
| WooCommerce - Termékarchívum | Archívumoldalak: termékkategóriák, címkék, tulajdonságok stb. A láthatóságot a sablonfeltételekkel állítod. |
| WooCommerce - Kosár | A kosár, ha van benne termék. |
| WooCommerce - Üres kosár | Az üres kosár. |
| WooCommerce - Pénztár | A pénztár képernyő, ahol a vásárló megadja a számlázási és szállítási adatait, és kiválasztja a fizetési módot. |
| WooCommerce - Fizetés | A képernyő, ahol a vásárló a fizetési adatokat adja meg. |
| WooCommerce - Köszönjük | A sikeres rendelés után jelenik meg. |
| WooCommerce - Rendelés visszaigazolása | A rendelés visszaigazolásának megtekintésekor jelenik meg. |
| WooCommerce - Fiók - Bejelentkezés | A Fiókom oldal, ha a látogató nincs bejelentkezve. |
| WooCommerce - Fiók - Elfelejtett jelszó | Az elfelejtett jelszó oldal. |
| WooCommerce - Fiók - Elfelejtett jelszó (Megerősítés) | Az elfelejtett jelszó űrlap elküldése után jelenik meg. |
| WooCommerce - Fiók - Jelszó visszaállítása | A jelszó-visszaállító e-mailben lévő hivatkozásra kattintás után jelenik meg. |
| WooCommerce - Fiók - Vezérlőpult | A Fiókom oldal bejelentkezve. |
| WooCommerce - Fiók - Rendelések | A Fiókom oldal „Rendelések” lapja. |
| WooCommerce - Fiók - Megrendelés megtekintése | Egy rendelés megtekintésekor. |
| WooCommerce - Fiók - Letöltések | A „Letöltések” lap. |
| WooCommerce - Fiók - Fizetési módok | A mentett fizetési módok megtekintésekor. |
| WooCommerce - Fiók - Fizetési mód hozzáadása | Új fizetési mód hozzáadásakor. |
| WooCommerce - Fiók - Címek | A „Címek” lap. |
| WooCommerce - Fiók - Cím szerkesztése | A számlázási vagy szállítási cím szerkesztésekor. |
| WooCommerce - Fiók - Fiók szerkesztése | A fiókadatok szerkesztésekor. |

## Fiókszerkesztő

A fiókoldalt (a bejelentkezési, regisztrációs, elfelejtett és visszaállított jelszó oldalt is) vizuálisan megtervezheted. A részleteket a [Fiókszerkesztő](https://hub.hellowp.io/hu/plugins/bricks-child/woocommerce-fiok-epito/) fejezet írja le.

## Bolt oldal

A bolt oldal különleges WooCommerce-oldal, a termékek archívuma. Egyedi elrendezéséhez közvetlenül a Bolt oldalt is szerkesztheted Bricksszel. Vagy a **WooCommerce - Termékarchívum** sablonban adj hozzá sablonfeltételt, hogy a sablon a Bolt oldalon is érvényesüljön. Mivel a bolt oldal a termék bejegyzéstípus archívuma, ezt a feltételt pont így kell beállítani.

## WooCommerce elemek

A Bricks célja, hogy a WooCommerce-sablonok vizuális tervezésében a lehető legnagyobb rugalmasságot adja anélkül, hogy elveszne a WooCommerce funkciója és horgai, amelyekre sok harmadik féltől származó bővítmény épít.

Az általános WooCommerce-elemek és a **Termékek** elem mellett vannak külön elemek egyes sablontípusokhoz, például a kosárhoz és a pénztárhoz. Összesen több mint 30 WooCommerce-specifikus elem áll rendelkezésre.

A WooCommerce-specifikus elemek közül néhány: Kosárba, Termékcím, Termékgaléria, Termékár, Termék készlete, Termék metaadatai, Termékértékelés, Termékvélemények, Termék tartalma, Termék rövid leírása, Termék további információi, Termékfülek, Termék up/cross-sell és Kapcsolódó termékek. Leírásukat a [termékoldal sablon](https://hub.hellowp.io/hu/plugins/bricks-child/woocommerce-termekoldal-sablon/) fejezetben találod.

## Dinamikus adatok

A WooCommerce-integráció új dinamikus adatcímkéket ad a termék és a rendelés tulajdonságainak eléréséhez. Az alábbi `{woo_...}` címkék közül a termékoldalon használhatók a termékcímkék, a rendelési címkék pedig a Köszönjük és a Rendelés visszaigazolása sablonban.

### Termékcímkék

| Címke | Mit ad vissza |
|---|---|
| `{woo_product_price}` | A teljes termékár pénznemmel és HTML-lel. |
| `{woo_product_regular_price}` | Az eredeti ár pénznemmel és HTML-lel. |
| `{woo_product_sale_price}` | Az akciós ár pénznemmel és HTML-lel. Ha nincs akciós ár, üres szöveg. |
| `{woo_product_regular_price:plain}` | Az eredeti ár pénznemmel, HTML nélkül. |
| `{woo_product_regular_price:value}` | Az eredeti ár egyszerű szövegként (például 65.3, 2.5, 5). |
| `{woo_product_cat_image}` | A termékkategória képe. |
| `{woo_product_images}` | A kiemelt kép és a galéria képei. Használható a **Körhinta** és a **Képgaléria** elemben. A `:value` szűrővel a galéria képazonosítóit adja vesszővel elválasztva. |
| `{woo_product_gallery_images}` | A galéria képei a kiemelt kép nélkül. Szintén használható a **Körhinta** és a **Képgaléria** elemben, és a `:value` szűrő itt is képazonosítókat ad. |
| `{woo_add_to_cart}` | A „Kosárba” gomb. |
| `{woo_product_on_sale}` | Az akciós jelvény, ha a termék akciós. |
| `{woo_product_rating}` | A termékértékelés. |
| `{woo_product_rating:plain}` | Az értékelés szövegesen, például „Rated 5.00 out of 5”. |
| `{woo_product_rating:format}` | Az értékelés akkor is, ha még nem érkezett értékelés. |
| `{woo_product_sku}` | A cikkszám. Használható a termékoldalon és az egyéni Kosár tartalma ciklusban is. |
| `{woo_product_gtin}` | A GTIN (globális kereskedelmi azonosító) a WooCommerce egyedi azonosító mezőjéből. Alapból `span.gtin` burkolóban jön, a `:value` szűrővel sima szöveg. Termékoldalon és az egyéni Kosár tartalma ciklusban használható, ha a telepített WooCommerce támogatja. |
| `{woo_product_excerpt}` | A termék rövid leírása. |
| `{woo_product_stock}` | A készlet. A `value` szűrővel a készleten lévő darabszámot adja. |
| `{woo_product_stock_status}` | `instock`, `outofstock` vagy `onbackorder` (elemfeltételekhez hasznos). |
| `{woo_product_badge_new}` | „Új” jelvény `.badge.new` osztállyal, ha a feltétel teljesül. A **Bricks → Beállítások → WooCommerce → Termékek** beállításától függ. |
| `{woo_product_badge_new:plain}` | Csak az „Új” szöveg, ha a feltétel teljesül. |
| `{woo_product_type}` | A WooCommerce termék típusa. |

### Kosár tartalma ciklus címkéi

A Kosár tartalma lekérdezési cikluson belül a következő kosárcímkék is használhatók:

| Címke | Mit ad vissza |
|---|---|
| `{woo_cart_product_name}` | A hivatkozott kosártermék neve a hagyományos, összevont metaadat-kimenettel. |
| `{woo_cart_product_title}` | A termék címe kosártétel-metaadat nélkül. A **Kosártétel adatai** elemmel együtt hasznos, ha a cím és a változat adatai külön stílust kapnak. |
| `{woo_cart_item_price}` | Az egységár formázva, akciónál az eredeti és az aktuális ár jelöléssel. A `:value` formázatlan aktuális egységárat ad. |
| `{woo_cart_item_save}` | A megtakarítás a teljes tételmennyiségre formázva. A `:value` formázatlan összeget, a `:percentage` a kedvezmény százalékát adja számként. |
| `{woo_cart_remove_link}` | A kosártétel eltávolító hivatkozása. |
| `{woo_cart_quantity}` | A mennyiségmező. |
| `{woo_cart_subtotal}` | A kosártétel részösszege. |
| `{woo_cart_update}` | A kosár frissítése gomb. |

### Rendelési címkék

A Köszönjük és a Rendelés visszaigazolása sablonban a Bricks rendelési címkéket is ad:

| Címke | Mit ad vissza |
|---|---|
| `{woo_order_id}` | A rendelés azonosítója. |
| `{woo_order_number}` | A rendelés száma. |
| `{woo_order_date}` | A rendelés dátuma. |
| `{woo_order_total}` | A rendelés összege. |
| `{woo_order_payment_title}` | A rendelés fizetési módja. |
| `{woo_order_email}` | A rendelés e-mail-címe. |
| `{woo_order_failed_text}` | A sikertelen rendelés üzenete. Haladó moduláris elemeket igényel. |

### Alap címkék

Az alap dinamikus címkék is használhatók: `{post_id}` (a termék azonosítója), `{post_title:link}` (a termékcím hivatkozással), `{post_terms_product_cat}` (a termékkategóriák hivatkozásokkal), `{post_terms_product_cat:plain}` (a kategóriák hivatkozás nélkül).

### WooCommerce v2 dinamikus adatok

Ha a haladó moduláris elemek be vannak kapcsolva, a Bricks további WooCommerce-címkéket ad ezekhez:

- kosárösszegek, felhasznált kuponok, díjak, adók, szállítási összegek és az ingyenes szállítás haladása;
- pénztárlépés-adatok és WooCommerce-oldal- és végpont-URL-ek;
- fiókcímek és a fiók címszerkesztő állapotának adatai;
- rendelés részletei, tételei, összegei, műveletei, letöltései és vásárlói megjegyzései.

A legtöbb címke egy v2 oldalállapot vagy lekérdezési ciklus környezetében működik. Például a `{woo_order_item_title}` a `wooOrderItems` cikluson belül, a `{woo_cart_applied_coupon}` a `wooCartCoupons` cikluson belül használható. A teljes lista: [WooCommerce v2 ciklusok és címkék](https://hub.hellowp.io/hu/plugins/bricks-child/woocommerce-v2-ciklusok-cimkek/).

## Bricks beállítások: WooCommerce

A WooCommerce-integráció külön lapja a **Bricks → Beállítások → WooCommerce** oldalon van.

![A Bricks WooCommerce-beállításai: Egyéb, Termékek, Termékoldal és AJAX-os kosárba tétel csoport](./kepek/woocommerce-beallitasok.webp)

*A Bricks WooCommerce-beállításai: Egyéb, Termékek, Termékoldal és AJAX-os kosárba tétel csoport* (https://minta-bolt.hu/wp-admin/admin.php?page=bricks-settings)

A képen az **Egyéb** csoport kapcsolói látszanak fent, alatta a **Termékek**, a **Termékoldal** és az **AJAX-os kosárba tétel** csoport.

| Beállítás | Mit csinál |
|---|---|
| WooCommerce Builder letiltása | Kikapcsolja a Bricks WooCommerce-integrációját. |
| Bricks WooCommerce „Notice” elem bekapcsolása | Eltávolítja a natív WooCommerce-értesítéseket, így a **Értesítés** elemet te helyezed el kézzel. |
| Bricks WooCommerce „Checkout coupon” elem bekapcsolása | Eltávolítja a natív pénztári kuponűrlapot, és a **Pénztár kupon** elemet te helyezed el. A WooCommerce **Kuponkódok használatának engedélyezése** beállításának aktívnak kell lennie az Általános részen. |
| Bricks WooCommerce „Checkout login” elem bekapcsolása | Eltávolítja a natív pénztári belépési űrlapot, és a **Pénztár belépés** elemet te helyezed el. A WooCommerce **Pénztári belépés bekapcsolása** beállításának aktívnak kell lennie a **Fiókok és adatvédelem** részen. |
| Mennyiségi beviteli mező megjelenítése a terméklistában | Mennyiségmezőt mutat a megvásárolható, készleten lévő egyszerű termékeknél. |
| Termékváltozat-minták bekapcsolása | A változatok legördülő menüit szín-, kép- vagy címkeminták váltják a **Kosárba** elemben. |
| Termékjelvény „Akció” | Választhatsz: nincs jelvény, „Akció” felirat vagy a kedvezmény százaléka. |
| Termékjelvény „Új” | „Új” jelvény, ha a termék a megadott napnál kevesebb ideje jelent meg. |
| A termékgaléria nagyításának letiltása | Kikapcsolja a termékgaléria nagyítását. |
| A termékgaléria lightboxának letiltása | Kikapcsolja a termékgaléria lightboxát. |
| AJAX-os kosárba tétel bekapcsolása | Bekapcsolja a Bricks AJAX-os kosárba tételét a megvásárolható, készleten lévő egyszerű termékeknél és a termékváltozatoknál a terméklistákban, ha támogatják az `ajax_add_to_cart` műveletet. |
| AJAX-os kosárba tétel szövegei és értesítései | Testreszabható a „hozzáadás folyamatban” és a „hozzáadva” gombszöveg, a visszaállítás késleltetése, a „Kosár megtekintése” gomb láthatósága, az értesítések kimenete és az értesítéshez görgetés. |
| AJAX-os kosárba tétel hibaművelete | Hiba esetén: „Átirányítás a termékoldalra” vagy „Értesítés megjelenítése”. Az értesítésnél be lehet kapcsolni az értesítéshez görgetést is. |

A **Termékváltozat-minták** részleteit a [Termékváltozat-minták](https://hub.hellowp.io/hu/plugins/bricks-child/woocommerce-valtozat-mintak/) fejezet, a haladó moduláris elemek kapcsolóját a [haladó moduláris elemek](https://hub.hellowp.io/hu/plugins/bricks-child/woocommerce-modularis-elemek/) fejezet írja le.

## Témastílusok

Ha a WooCommerce aktív, a **Témastílusok** panelen két vezérlőcsoport jelenik meg:

- **WooCommerce - Gomb**
- **WooCommerce - Értesítés**

## WooCommerce termékek lekérdezési ciklus

A **Lekérdezés szerkesztése** vezérlőben a WooCommerce részben jelölőnégyzetekkel egyszerűen lekérheted a WooCommerce-termékeket. Válaszd ki a **Termékek** bejegyzéstípust, különben a WooCommerce rész rejtve marad.

A Bricks a haladó moduláris elemekhez WooCommerce-lekérdezési ciklusokat is ad kosárkuponokhoz, díjakhoz, adókhoz, rendelésekhez, rendelési tételekhez, letöltésekhez, vásárlói megjegyzésekhez, fiókrendelésekhez, fiók-rendelési műveletekhez, fiók-letöltésekhez és fiókcímekhez. A teljes lista: [WooCommerce v2 ciklusok és címkék](https://hub.hellowp.io/hu/plugins/bricks-child/woocommerce-v2-ciklusok-cimkek/).