cloudwp | WooCommerce 繁體中文使用手冊

JavaScript 錯誤疑難排解

什麼是 JavaScript？

JavaScript 是一種直接在瀏覽器（而非伺服器）上執行的程式語言。這使其能快速回應使用者動作（如將商品加入購物車或更新數量），無需重新載入整個頁面。

單一 JavaScript 錯誤可能中斷這些功能並影響同一頁面上的其他功能。瞭解 JavaScript 在網站中的角色有助於有效識別並解決這些錯誤。

JavaScript 如何與 WooCommerce 搭配運作？

在 WooCommerce 中，JavaScript 在增強網站功能方面扮演關鍵角色。以下是 JavaScript 常用的一些區域：

  • 購物車與結帳頁面：當顧客變更物流地址時，JavaScript 會自動更新物流方式和費用。
  • 結帳時的金流方式：根據顧客的帳單地址載入正確的金流選項。
  • 變體商品頁面：當顧客選擇商品變體時，JavaScript 會載入變體圖片和庫存狀態。
  • 加入購物車按鈕：允許顧客使用 AJAX 直接從商店和分類頁面將商品加入購物車，頁面不會重新載入。
  • WP-Admin 商品管理：JavaScript 支援商品標籤、變體清單，以及商品和分類的搜尋框。

如果這些元素無法正常運作（例如載入圖示無限期旋轉或圖片未更新），可能是 JavaScript 錯誤造成問題。

如何找到 JavaScript 錯誤

可使用大多數瀏覽器內建的開發者工具來找出 JavaScript 錯誤。以下是在 MacOS 和 Windows 上的 Chrome、Safari 和 Firefox 中存取這些工具的快速概覽。

Google Chrome

  1. MacOS 和 Windows：在 Chrome 中開啟 WooCommerce 網站。
  2. 在頁面上按右鍵並選取檢查，或按 Cmd+Option+J（Mac）或 Ctrl+Shift+J（Windows）開啟主控台。
  3. 在主控台中尋找任何紅色錯誤訊息。這些訊息會突顯可能影響網站功能的 JavaScript 錯誤。

Safari

  1. 僅限 MacOS（Windows 上不提供開發者工具）：在 Safari 中開啟 WooCommerce 網站。
  2. 首先，透過 Safari > 設定啟用開發選單。在進階標籤下，勾選顯示網頁開發者功能方塊。
  3. 前往 開發 > 顯示 JavaScript 主控台或按 Cmd+Option+C 開啟主控台。
  4. 尋找紅色錯誤，這表示 JavaScript 問題。

Mozilla Firefox

  1. MacOS 和 Windows：在 Firefox 中開啟 WooCommerce 網站。
  2. 在頁面上按右鍵並選取檢查，或按 Cmd+Option+K（Mac）或 Ctrl+Shift+K（Windows）開啟主控台。
  3. 任何 JavaScript 錯誤都會以紅色文字顯示，顯示網站上可能發生問題的位置。

使用這些工具，可以識別 JavaScript 錯誤並開始有效進行疑難排解。

要尋找的錯誤

以下是要尋找的內容：

  • GET 或 POST 訊息：這些訊息表示某些內容未從伺服器正確載入，例如訂單詳情未更新或圖片連結損壞。雖然這些通常只是關於遺失資源的警告，但如果未造成可見問題，可在主控台設定 > 隱藏網路中隱藏。
  • 白色和黃色訊息：這些通常是 HTTPS 警告或除錯訊息，大多無害且不會影響網站功能。
  • 紅色錯誤（不包括 GET 或 POST）：這些訊息指向可能中斷 WooCommerce 網站功能的實際 JavaScript 錯誤。請專注於這些紅色錯誤訊息，因為它們最有可能造成功能問題。

如何解讀 JavaScript 錯誤

JavaScript 錯誤有多種類型，其中 SyntaxError 最具破壞性：

  • SyntaxError：此錯誤表示瀏覽器完全無法讀取 JavaScript 程式碼結構，導致無法解譯頁面上的任何 JavaScript。一個外掛或擴充功能中的 SyntaxError 甚至可能破壞透過不相關外掛或佈景主題載入的 JavaScript，影響整個網站的功能。
  • 其他 JavaScript 錯誤：非 SyntaxError 的錯誤可能僅影響發生錯誤的特定程式碼部分。然而，這些錯誤通常會產生連鎖反應，同時破壞頁面上的其他 JavaScript 功能。

看到錯誤時，首先檢查訊息以瞭解原因。快速搜尋通常有助於識別問題來源和可能的解決方案。

找出 JavaScript 錯誤的來源

錯誤訊息通常會在右上角顯示檔案名稱。將滑鼠懸停在此檔案名稱上可查看檔案的完整路徑，或按右鍵並選取複製連結位址來檢視 URL。

例如：

如果檔案路徑顯示 https://woostore.mystagingwebsite.com/wp-content/plugins/woocommerce-subscriptions/assets/js/variable.min.js?ver=4.9.5，此檔案可能屬於 WooCommerce Subscriptions 外掛。如果在此處遇到錯誤，請先嘗試停用此外掛，再執行完整的衝突測試。

與檔案名稱相關的錯誤通常表示外掛/擴充功能中有損壞的程式碼，或 JavaScript 程式庫的不同版本之間存在衝突。

使用錯誤訊息

某些情況下，錯誤訊息本身會提供有關問題的有用資訊。例如，來自金流閘道的訊息可能表示不支援某個國家/地區。透過 WooCommerce > 一般設定調整網站 WP 管理儀表板中的國家/地區設定，可能無需停用外掛/擴充功能即可解決此類錯誤。

當沒有檔案名稱時

有時錯誤不會指定特定外掛/擴充功能，而是參照 index 或 cache 等一般檔案。

在這些情況下，請嘗試以下方法：

  1. 停用快取和最佳化外掛：快取外掛經常干擾 JavaScript 相依性，因此暫時停用可協助識別是否為錯誤原因。
  2. 執行完整衝突測試：如果問題持續存在，請停用所有外掛和擴充功能（WooCommerce 除外）並切換至預設佈景主題，查看錯誤是否仍然存在。
  3. 檢查文字小工具中的 JavaScript：有時新增至文字小工具的自訂 JavaScript 可能導致錯誤。檢視這些小工具以確保它們不會引入問題。

這些步驟可協助隔離並解決 WooCommerce 網站中 JavaScript 錯誤的來源。