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

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.

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).

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).
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.