# Fiókom oldal

> A Fiókom oldal widgetjei, a végpontok külön sablonjai és a teljesen saját Fiókom oldal menüvel és tartalomwidgettel.

A WooCommerce Fiókom oldala több részből áll: a kezdőlapból (vezérlőpult) és úgynevezett végpontokból, például rendelések, letöltések, címek, fiókadatok. A végpont a Fiókom oldal címének kiegészítése: a rendelések oldala például a `webhelyed/fiokom/orders` cím alatt érhető el. A WooCommerce a végpontokat magától létrehozza, a JetWooBuilder pedig külön sablont adhat mindegyikhez.

## Előkészületek

1. A **Fiókom** oldalon legyen a **[woocommerce_my_account]** shortcode (shortcode-blokkban). Enélkül a widgetek nem működnek: a JetWooBuilder sablonja leváltja az alapértelmezett kinézetet, de az alapként szolgáló oldalnak a shortcode-dal együtt léteznie kell.
2. A **WooCommerce → Beállítások → Haladó** fülön az oldalbeállításoknál a **Fiókom** oldalhoz ez az oldal legyen kiválasztva. Ha nincs hozzárendelve, a widgetek üresen maradhatnak.
3. A **WooCommerce → Beállítások → JetWooBuilder** fülön a **Widgetek megjelenítési módja** legyen **Elementor alapértelmezése**.
4. Kapcsold be a widgeteket a **Crocoblock → JetPlugins Settings → JetWooBuilder → Widgetek** oldal **A Fiókom oldal widgetjei** szakaszában. A felesleges widgeteket hagyd kikapcsolva.

Ha a belépési és regisztrációs űrlapot a JetFormBuilderrel készíted, gondoskodj arról, hogy az űrlap megfelelően kapcsolódjon a WooCommerce hitelesítéséhez.

## A Fiókom oldal widgetjei

| Widget (a szerkesztőben) | Mit csinál |
|---|---|
| **Fiók vezérlőpultja** | A Fiókom kezdőoldala: üdvözlő üzenet, kijelentkezés és hivatkozások a rendelésekre, címekre és fiókadatokra. Stílusa: szöveg színe, tipográfia, igazítás, a hivatkozások normál és rámutatási színe. |
| **Fiók részletei** | Űrlap a személyes adatok (név, e-mail-cím) és a jelszó módosítására, **Módosítások mentése** gombbal. A leírás, a címkék, a mezők, a gomb és a jelszómódosítás stílusa külön állítható. |
| **Fiókcímek** | A számlázási és szállítási cím felvétele és szerkesztése. A mentett címek a pénztárban automatikusan megjelennek. |
| **Fiók letöltései** | A letölthető termékek (például alkalmazás, film) listája, amit a vásárló már megvett. Hasonló a rendelésekhez, de a letölthető termékeket mutatja. |
| **Fiókbejelentkezési űrlap** | Belépési űrlap felhasználónévvel és jelszóval. |
| **Kijelentkezés a fiókból** | Kijelentkezési hivatkozás. A Fiók vezérlőpultja is tartalmaz egyet, ez a widget egy másikat tesz az oldal tetejére vagy aljára. A normál és a rámutatási állapot stílusa állítható. |
| **Fiók rendelései** | A bejelentkezett vásárló rendeléseinek táblázata: szám, dátum, állapot, végösszeg. A megtekintés gomb a rendelés részleteit nyitja meg. Ha még nincs rendelés, a WooCommerce alapüzenete jelenik meg. |
| **Fiókregisztrációs űrlap** | Regisztrációs űrlap e-mail-címmel, **Regisztráció** gombbal, és értesítés az adatkezelési tájékoztatóra mutató hivatkozással. |
| **Fiók fizetési módjai** | A vásárló mentett fizetési módjai. Hozzáadható, törölhető és alapértelmezettnek jelölhető. A WooCommerce „payment-methods” végpontjához kapcsolódik. Új fizetési mód hozzáadásakor a vásárló megadja a kártya adatait. |
| **Fiók tartalma** | A Fiókom oldal fő tartalmi területe: dinamikusan betölti a kiválasztott végpont tartalmát. Együtt működik a menüvel, amellyel a vásárló végpontot vált. |

A widgetek **Stílus** fülén a táblázatok fejléce, cellái, a gombok és az űrlapmezők külön formázhatók.

## Végpontok külön sablonjai

A végpontokhoz érdemes külön sablont készíteni, és menüvel jeleníteni meg őket, mert ez gyorsabb weboldalt eredményez: nem kell minden egy oldalra.

Az alábbi sablonok készíthetők, mindegyikhez a megfelelő widgettel:

| Sablon | Widget |
|---|---|
| Saját fiók vezérlőpultjának sablonja | **Fiók vezérlőpultja** |
| Saját fiók rendelési végpontjának sablonmintája | **Fiók rendelései** |
| Saját fiók letöltési végpontjának sablonmintája | **Fiók letöltései** |
| Saját fiók címvégpontjának sablonmintája | **Fiókcímek** |
| Saját fiók adatainak szerkesztési végpontjának sablonja | **Fiók részletei** |
| Saját fiók fizetési módjainak végpontsablonja | **Fiók fizetési módjai** |

Lépések:

1. Nyisd meg a **Crocoblock → Woo Page Builder** oldalt, és kattints az **Új sablonminta létrehozása** gombra.
2. Válaszd a **Fiókom** típust, add meg a nevet (például „Rendelések végpont”), és kattints a **Sablonminta létrehozása** gombra.
3. A szerkesztőben húzd be a megfelelő widgetet (például a **Fiók rendelései** widgetet), és állítsd be a stílusát. További elemeket is hozzáadhatsz: képet, termékcsúszkát, utoljára megtekintett termékeket, szövegblokkot. Tedd közzé.
4. Hozd létre a többi sablont is.
5. A **WooCommerce → Beállítások → JetWooBuilder** fül **Saját fiók oldal** szakaszában jelöld be az **Egyéni Saját fiókoldal** és **A Saját fiókoldal egyéni végpontjai** jelölőnégyzetet.
6. A megfelelő listákban válaszd ki a sablonokat: a vezérlőpult, a rendelés, a letöltés, a cím, az adatszerkesztés és a fizetési módok sablonját.
7. Mentsd a beállításokat, és nyisd meg a Fiókom oldalt: a végpontokon a saját sablonok jelennek meg.

Fontos: a végpontsablonok csak akkor működnek helyesen, ha a **Saját fiók sablonja** listában az **Alapértelmezett** érték van kiválasztva. Ha a végpontsablonokat egyéni Fiókom oldalsablonnal akarod együtt használni, a **Fiók tartalma** widget kell (lásd lent).

![A Fiókom oldal rendeléseinek végpontja](./kepek/fiokom-rendelesek.webp)

*A Fiókom oldal rendeléseinek végpontja* (https://minta-bolt.hu/fiokom/orders/)

A képen a Fiókom oldal rendelések végpontja látszik: a rendelések táblázata az azonosítóval, dátummal, állapottal, összeggel és a **Megtekintés** gombbal.

## Teljesen saját Fiókom oldal menüvel

Ha a Fiókom oldal minden része egységes kinézetű legyen, az oldalt magad építed fel: egy menüből és a **Fiók tartalma** widgetből.

### A menü elkészítése

1. Nyisd meg a **Megjelenés → Menük** oldalt, és hozz létre új menüt (például „Fiók menü”).
2. A menüelemek hozzáadása részben nyisd ki a WooCommerce végpontok szakaszt, jelöld be a kívánt végpontokat, és add a menühöz.
3. A menüelemek felirata a navigációs címke mezőben átírható. A sorrend húzással módosítható.
4. A vezérlőpult elemhez az egyéni hivatkozások szakaszban adj hozzá hivatkozást a Fiókom oldal címére.
5. A fizetési módok végpontjához szintén egyéni hivatkozás kell, a fiókom oldal címe és a `/payment-methods/` végpont összefűzésével.
6. Ha a menüpontokhoz ikont szeretnél, azt a menüelem beállításaiban (JetMenu) adhatod meg, majd mentsd a menüt.

### Az oldalsablon elkészítése

1. A **Crocoblock → Woo Page Builder** oldalon hozz létre új **Fiókom** típusú sablont.
2. A szerkesztőben osszd két oszlopra az oldalt. Az egyik oszlopba tedd a menüt (például a JetMenu Vertical Mega Menu widgetjét, amelynél kiválaszthatod a létrehozott menüt), a másikba a **Fiók tartalma** widgetet.
3. A **Fiók tartalma** widget attól függően mutatja a megfelelő végpontot, hogy melyik menüpontra kattint a látogató.
4. Állítsd be a stílust, adj hozzá további widgeteket (például címsort a menü fölé), és tedd közzé.
5. A **WooCommerce → Beállítások → JetWooBuilder** fülön a **Saját fiók sablonja** listában válaszd ki a sablont, és mentsd.
6. Nyisd meg a Fiókom oldalt, és kattints a menüpontokra: a végpontokat a **Fiók rendelései**, **Fiókcímek** és a többi widget írja ki.

![A Fiókom oldal a sablonnal](./kepek/fiokom-frontend.webp)

*A Fiókom oldal a sablonnal* (https://minta-bolt.hu/fiokom/)

## Oldalsablon JetThemeCore-ral

Ha a Fiókom oldalnak saját fejléc és lábléc is kell, a JetThemeCore oldalsablonjában az **Include**, **WooCommerce**, **Account Page** feltételt állítsd be, és a törzsnek (body) add hozzá a JetWooBuilder sablont a könyvtárból. Ha a törzset a JetThemeCore-ral készíted, az **Add body** gomb után a **Create template** lehetőségnél válaszd az **Elementor** tartalomtípust, adj nevet, majd a **Create** gombbal hozd létre. A megjelenő üzenetben az **Edit later** a Theme Builderben hagy, a **Go to editor** az Elementor szerkesztőjébe visz, ahol a fent leírt menüs elrendezést építheted fel. Kész sablont az **Add from library** gombbal, majd a **Use** gombbal adhatsz hozzá. A fejlécet és a láblécet az **Add header** gombbal vedd fel. Ilyenkor a **WooCommerce → Beállítások → JetWooBuilder** fülön az **Egyéni Saját fiókoldal** jelölőnégyzetet kapcsold ki (lásd [Sablonok létrehozása és hozzárendelése](https://hub.hellowp.io/hu/plugins/jet-woo-builder/sablonok/)).

## Gyakori buktatók

- Ha a Fiókom oldal nincs hozzárendelve a WooCommerce beállításaiban, a widgetek üresek lehetnek vagy nem működnek.
- Ha az oldalról hiányzik a **[woocommerce_my_account]** shortcode, a WooCommerce nem tudja kirajzolni a fiók tartalmát.
- Ha a belépési és regisztrációs űrlapot a JetFormBuilderrel készíted, az űrlapot a WooCommerce hitelesítéséhez kell kapcsolni.