WooCommerce 是一款功能強(qiáng)大的開源電子商務(wù)插件，專為 WordPress 設(shè)計，可將您的網(wǎng)站轉(zhuǎn)變?yōu)楣δ荦R全的在線商店。其用戶友好的界面以及廣泛的可定制主題和插件庫使其成為各種規(guī)模企業(yè)的理想選擇，無論您是要開設(shè)小型精品店還是大型零售業(yè)務(wù)。

開發(fā)人員面臨的一個常見挑戰(zhàn)是當(dāng)購物車為空時隱藏購物車圖標(biāo)?？紤]到它的簡單性，這個問題出現(xiàn)的頻率令人驚訝，但它發(fā)生的原因如下：

WooCommerce 使用動態(tài)數(shù)據(jù)來控制購物車圖標(biāo)的顯示方式。如果購物車中有商品，WooCommerce 使用數(shù)據(jù)屬性（例如 data-cart-items-count）動態(tài)更新購物車元素。然而，這種動態(tài)更新會產(chǎn)生時間問題。例如，您可以添加如下 CSS 規(guī)則：

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

但是在數(shù)據(jù)屬性更新之前購物車圖標(biāo)仍然會短暫出現(xiàn)，導(dǎo)致出現(xiàn)不良閃爍。

解決方案：JavaScript！

為了解決這個問題，我們需要 JavaScript 來動態(tài)控制購物車的可見性。由于 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');

確保文件路徑與您的主題結(jié)構(gòu)相匹配。

第 2 步：添加 JavaScript 代碼

在您剛剛?cè)腙牭?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 完全加載。
• 它選擇購物車圖標(biāo)（更新選擇器以匹配您主題的購物車元素）。
• 最初，購物車是隱藏的。
• updateVisibility 函數(shù)檢查 data-cart-items-count 屬性并切換購物車的可見性。
• MutationObserver 監(jiān)視屬性更改，以根據(jù)需要動態(tài)更新購物車。
• 通過此設(shè)置，只有當(dāng)購物車中至少有一件商品時，您的購物車圖標(biāo)才會出現(xiàn)，從而消除了因數(shù)據(jù)更新延遲而導(dǎo)致的閃爍問題。

請告訴我這是否對您有幫助！我還很想聽聽您正在構(gòu)建什么樣的 WooCommerce 網(wǎng)站以及您如何使用這個出色的插件。

以上是通過 JavaScript 排隊隱藏空時的 WooCommerce 購物車的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！