透過 JavaScript 排隊隱藏空時的 WooCommerce 購物車

WooCommerce 是一款功能強大的開源電子商務插件，專為 WordPress 設計，可將您的網站轉變為功能齊全的線上商店。其用戶友好的介面以及廣泛的可自訂主題和插件庫使其成為各種規模企業的理想選擇，無論您是要開設小型精品店還是大型零售業務。

開發人員面臨的一個常見挑戰是當購物車為空時隱藏購物車圖示。考慮到它的簡單性，這個問題出現的頻率令人驚訝，但它發生的原因如下：

WooCommerce 使用動態資料來控制購物車圖示的顯示方式。如果購物車中有商品，WooCommerce 使用資料屬性（例如 data-cart-items-count）動態更新購物車元素。然而，這種動態更新會產生時間問題。例如，您可以新增以下 CSS 規則：

[data-cart-items-count="0"] {
顯示：無；
}

但是在資料屬性更新之前購物車圖示仍然會短暫出現，導致出現不良閃爍。

解決方案：JavaScript！

為了解決這個問題，我們需要 JavaScript 來動態控制購物車的可見度。由於 WordPress 依賴排隊來正確載入腳本，因此您可以按照以下方式實作解決方案：

第 1 步：將 JavaScript 排入佇列

在主題的functions.php 檔案中，新增以下程式碼以將自訂 JavaScript 檔案排入佇列：

function enqueue_custom_script() {
    wp_enqueue_script(
        'custom-cart-script', // Handle name
        get_stylesheet_directory_uri() . '/path/to/js/script.js', // Path to the JS file
        array('jquery'), // Dependencies
        '1.0.0', // Version
        true // Load in the footer
    );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_script');

確保檔案路徑與您的主題結構相符。

第 2 步：新增 JavaScript 程式碼

在您剛入隊的 JavaScript 檔案中，加入以下程式碼：

document.addEventListener('DOMContentLoaded', function () {
    const miniCart = document.querySelector('.wc-block-mini-cart'); // Update selector as needed

    if (miniCart) {
        // Initially hide the mini-cart
        miniCart.style.display = 'none';

        const updateVisibility = () => {
            const itemCount = miniCart.getAttribute('data-cart-items-count');
            miniCart.style.display = itemCount === '0' ? 'none' : 'block';
        };

        // Run the visibility check on page load
        updateVisibility();

        // Monitor changes to the mini-cart for dynamic updates
        const observer = new MutationObserver(updateVisibility);
        observer.observe(miniCart, { attributes: true, attributeFilter: ['data-cart-items-count'] });
    }
});

它是如何運作的

• 腳本等待 DOM 完全載入。
• 它選擇購物車圖示（更新選擇器以符合您主題的購物車元素）。
• 最初，購物車是隱藏的。
• updateVisibility 函數檢查 data-cart-items-count 屬性並切換購物車的可見性。
• MutationObserver 監視屬性更改，以根據需要動態更新購物車。
• 透過此設置，只有當購物車中至少有一件商品時，您的購物車圖示才會出現，從而消除了因資料更新延遲而導致的閃爍問題。

請告訴我這對您是否有幫助！我還很想聽聽您正在建立什麼樣的 WooCommerce 網站以及您如何使用這個出色的外掛程式。

以上是透過 JavaScript 排隊隱藏空時的 WooCommerce 購物車的詳細內容。更多資訊請關注PHP中文網其他相關文章！