# JavaScript-hibák elhárítása

> Hol használ a WooCommerce JavaScriptet, hogyan találod meg a hibákat a böngésző konzolján, és hogyan derítsd ki, melyik bővítmény okozza őket.

A JavaScript-hibák megakaszthatják a WooCommerce fontos funkcióit: a termékek megjelenítését, a pénztárat és az űrlapok küldését. Ebben a fejezetben megtudod, hol keresd ezeket a hibákat, és hogyan szűkítsd le az okukat.

> **Megjegyzés**
>
> Ez a fejezet haladó hibakeresésről szól. Ha nem érzed magadénak, kérj segítséget egy tapasztalt WordPress- vagy WooCommerce-fejlesztőtől.

## Mi a JavaScript szerepe

A JavaScript közvetlenül a böngészőben fut, nem a szerveren. Ezért reagál gyorsan a látogató műveleteire (például kosárba tétel, mennyiség módosítása), anélkül, hogy az egész oldalt újratöltené. Egyetlen hiba megszakíthat egy funkciót, és az ugyanazon az oldalon lévő többit is érintheti.

A WooCommerce többek között itt használ JavaScriptet:

- **Kosár és pénztár:** a szállítási módok és költségek automatikusan frissülnek, ha a vásárló megváltoztatja a szállítási címet.
- **Fizetési módok a pénztárban:** a számlázási címhez illő fizetési módok töltődnek be.
- **Változó termékek oldala:** a variációk képei és a készletinformáció betöltődik, amikor a vásárló kiválaszt egy variációt.
- **Kosárba tétel gombok:** a bolt- és kategóriaoldalakról újratöltés nélkül (AJAX-szal) tehető kosárba a termék.
- **Az admin termékkezelése:** a termékfülek, a variációlisták és a termék- és kategóriakereső mezők is JavaScripttel működnek.

Ha ezek közül valami nem működik jól, például végtelenül forog a töltésjelző, vagy nem frissülnek a képek, valószínűleg JavaScript-hiba áll a háttérben.

## A hibák megkeresése a böngészőben

A legtöbb böngésző beépített fejlesztői eszközeiben megtalálod a JavaScript-hibákat.

### Chrome

1. Nyisd meg a webhelyedet Chrome-ban (Macen és Windowson is).
2. Kattints jobb gombbal az oldalra, és válaszd az **Inspect** menüpontot, vagy nyomd meg a `Cmd+Option+J` (Mac) vagy `Ctrl+Shift+J` (Windows) billentyűket a **Console** megnyitásához.
3. Keresd a pirossal kiemelt hibaüzeneteket. Ezek jelzik azokat a JavaScript-hibákat, amelyek hatással lehetnek a webhely működésére.

### Safari

1. Csak Macen elérhető (Windowson nincsenek fejlesztői eszközei). Nyisd meg a webhelyedet Safariban.
2. Kapcsold be a **Develop** (Fejlesztés) menüt: **Safari → Settings**, **Advanced** fül, majd jelöld be a **Show features for web developers** négyzetet.
3. Nyisd meg a konzolt: **Develop → Show JavaScript Console**, vagy `Cmd+Option+C`.
4. Keresd a pirossal jelölt hibákat.

### Firefox

1. Nyisd meg a webhelyedet Firefoxban (Macen és Windowson is).
2. Kattints jobb gombbal az oldalra, és válaszd az **Inspect** menüpontot, vagy nyomd meg a `Cmd+Option+K` (Mac) vagy `Ctrl+Shift+K` (Windows) billentyűket a konzol megnyitásához.
3. A JavaScript-hibák piros szövegként jelennek meg, és megmutatják, hol van a gond.

## Mit olvass ki a konzolról

- **GET vagy POST üzenetek:** valami nem töltődött be rendesen a szerverről, például nem frissülnek a rendelés adatai, vagy törött egy képhivatkozás. Általában csak hiányzó fájlra figyelmeztetnek, és ha nem okoznak látható hibát, elrejtheted őket a konzol beállításaiban (**Console Settings → Hide Network**).
- **Fehér és sárga üzenetek:** többnyire HTTPS-figyelmeztetések vagy hibakeresési üzenetek. Általában ártalmatlanok, a webhely működését nem érintik.
- **Piros hibák (a GET és POST kivételével):** valódi JavaScript-hibák, amelyek zavarhatják a bolt funkcióit. Elsősorban ezekre figyelj, mert ezek okozzák a legvalószínűbben a működési gondokat.

### A hibák típusai

- **SyntaxError:** a legsúlyosabb. A böngésző egyáltalán nem tudja értelmezni a kód szerkezetét, ezért az oldal egyetlen JavaScriptjét sem tudja futtatni. Egy bővítmény SyntaxErrorja akár más, független bővítmények vagy a téma JavaScriptjét is megbéníthatja, így az egész webhely működését érintheti.
- **Más JavaScript-hibák:** általában csak a kód azon részét érintik, ahol keletkeztek. Gyakran mégis továbbgyűrűznek, és más JavaScript-funkciókat is elrontanak ugyanazon az oldalon.

## Az ok megkeresése

Hibaüzenetnél először olvasd el az üzenetet, hogy kiderüljön, mi okozza. Egy gyors keresés sokszor megmutatja a hiba forrását és a lehetséges megoldást.

### A hiba a fájlnévből

A hibaüzenet jobb oldalán gyakran fájlnév áll. Vidd fölé az egeret a teljes elérési útért, vagy kattints rá jobb gombbal, és válaszd a hivatkozás címének másolását.

Például ha a fájl útvonala `https://pelda.hu/wp-content/plugins/woocommerce-subscriptions/assets/js/variable.min.js?ver=4.9.5`, akkor a fájl valószínűleg a WooCommerce Subscriptions bővítményhez tartozik. Ilyenkor kapcsold ki ezt a bővítményt, mielőtt teljes ütközésvizsgálatot végzel ([Bővítmény- és témaütközések tesztelése](https://hub.hellowp.io/hu/manuals/woocommerce/hibaelharitas/hibaelharitas-utkozesek-tesztelese/)).

A fájlnévhez kötődő hibák általában azt jelentik, hogy a bővítmény kódja hibás, vagy két bővítmény eltérő verziójú JavaScript-könyvtárat használ.

### A hiba az üzenet szövegéből

Néha maga az üzenet is segít. Például egy fizetési átjáró jelezheti, hogy egy ország nem támogatott. Ilyenkor a **WooCommerce → Beállítások → Általános** oldalon átállíthatod az ország beállításait, és a bővítményt ki sem kell kapcsolnod.

### Ha nincs konkrét bővítmény a hibában

Előfordul, hogy a hiba nem nevez meg bővítményt, csak általános fájlokat (például `index` vagy `cache`). Ilyenkor:

1. **Kapcsold ki a gyorsítótárazó és optimalizáló bővítményeket.** Ezek gyakran megzavarják a JavaScript-függőségeket, ezért ideiglenes kikapcsolásukkal kiderül, ők okozzák-e a hibát.
2. **Végezz teljes ütközésvizsgálatot.** Ha a hiba megmarad, kapcsold ki az összes bővítményt a WooCommerce kivételével, és válts alapértelmezett témára, majd nézd meg, megmarad-e a hiba (lásd: [Bővítmény- és témaütközések tesztelése](https://hub.hellowp.io/hu/manuals/woocommerce/hibaelharitas/hibaelharitas-utkozesek-tesztelese/)).
3. **Nézd át a szövegmodulokat (widgeteket).** Néha az oda beillesztett egyedi JavaScript okoz hibát, ezért ellenőrizd, hogy nem tartalmaznak-e hibás kódot.

Ezekkel a lépésekkel leszűkítheted, és sokszor meg is oldhatod a WooCommerce-boltod JavaScript-hibáit.