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

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

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

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

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

解決方案：JavaScript！

為了解決這個(gè)問(wèn)題，我們需要 JavaScript 來(lái)動(dòng)態(tài)控制購(gòu)物車(chē)的可見(jiàn)度。由於 WordPress 依賴(lài)排隊(duì)來(lái)正確載入腳本，因此您可以按照以下方式實(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 完全載入。
• 它選擇購(gòu)物車(chē)圖示（更新選擇器以符合您主題的購(gòu)物車(chē)元素）。
• 最初，購(gòu)物車(chē)是隱藏的。
• updateVisibility 函數(shù)檢查 data-cart-items-count 屬性並切換購(gòu)物車(chē)的可見(jiàn)性。
• MutationObserver 監(jiān)視屬性更改，以根據(jù)需要?jiǎng)討B(tài)更新購(gòu)物車(chē)。
• 透過(guò)此設(shè)置，只有當(dāng)購(gòu)物車(chē)中至少有一件商品時(shí)，您的購(gòu)物車(chē)圖示才會(huì)出現(xiàn)，從而消除了因資料更新延遲而導(dǎo)致的閃爍問(wèn)題。

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

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