WooCommerce 是一款功能強大的開源電子商務插件，專為 WordPress 設計，可將您的網站轉變為功能齊全的線上商店。其用戶友好的介面以及廣泛的可自訂主題和插件庫使其成為各種規模企業的理想選擇，無論您是要開設小型精品店還是大型零售業務。
開發人員面臨的一個常見挑戰是當購物車為空時隱藏購物車圖示。考慮到它的簡單性，這個問題出現的頻率令人驚訝，但它發生的原因如下：
WooCommerce 使用動態資料來控制購物車圖示的顯示方式。如果購物車中有商品，WooCommerce 使用資料屬性（例如 data-cart-items-count）動態更新購物車元素。然而，這種動態更新會產生時間問題。例如，您可以新增以下 CSS 規則：
[data-cart-items-count="0"] {
顯示：無；
}
但是在資料屬性更新之前購物車圖示仍然會短暫出現，導致出現不良閃爍。
為了解決這個問題，我們需要 JavaScript 來動態控制購物車的可見度。由於 WordPress 依賴排隊來正確載入腳本，因此您可以按照以下方式實作解決方案：
在主題的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');
確保檔案路徑與您的主題結構相符。
在您剛入隊的 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'] });
}
});
請告訴我這對您是否有幫助！我還很想聽聽您正在建立什麼樣的 WooCommerce 網站以及您如何使用這個出色的外掛程式。
以上是透過 JavaScript 排隊隱藏空時的 WooCommerce 購物車的詳細內容。更多資訊請關注PHP中文網其他相關文章！
