通过 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中文网其他相关文章！