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

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

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

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

但是在資料屬性更新之前購物車圖示仍然會短暫出現(xiàn)，導(dǎo)致出現(xiàn)不良閃爍。

解決方案：JavaScript！

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

第 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è)腙?duì)的 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'] });
    }
});

它是如何運(yùn)作的

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

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

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