购物车、更改产品数量和 Woocommerce 块

Question

任务是当产品购物车中的产品数量达到时向分析发送事件。无法使用标准 woocommerce 挂钩，因为使用了 woocommerce 块。我已经伤透了头，也许告诉我能做什么。我已经到达 MutationObserver，但事件仍然没有触发（

function track_cart_quantity_change_js()
{
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            function sendCartUpdateEvent(productData) {
                window.dataLayer = window.dataLayer || [];
                dataLayer.push({
                    ecommerce: null
                });
                dataLayer.push({
                    'event': 'addToCart',
                    'ecommerce': {
                        'currencyCode': 'EUR',
                        'add': {
                            'products': [productData]
                        }
                    }
                });
            }

            var observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.type === 'childList' || mutation.type === 'subtree') {
                        $('.woocommerce-cart-form__cart-item').each(function() {
                            var $row = $(this);
                            var product_id = $row.find('.product-remove > a').data('product_id');
                            var product_name = $row.find('.product-name').text().trim();
                            var product_quantity = parseInt($row.find('.qty').val());
                            var product_price = $row.find('.product-subtotal').text().trim().replace(/[^0-9.,]/g, '').replace(',', '.');

                            var product_brand = $row.find('.product-brand').text().trim();
                            var product_category = $row.find('.product-category').text().trim();
                            var product_variant = $row.find('.product-variant').text().trim();

                            var productData = {
                                id: product_id,
                                name: product_name,
                                brand: product_brand,
                                category: product_category,
                                variant: product_variant,
                                quantity: product_quantity,
                                price: product_price
                            };

                            sendCartUpdateEvent(productData);
                        });
                    }
                });
            });

            var cartElement = document.querySelector('.woocommerce-cart-form');
            if (cartElement) {
                observer.observe(cartElement, {
                    childList: true,
                    subtree: true
                });
            }

            $(document).on('change', '.qty', function() {
                var $row = $(this).closest('.woocommerce-cart-form__cart-item');
                var product_id = $row.find('.product-remove > a').data('product_id');
                var product_name = $row.find('.product-name').text().trim();
                var product_quantity = parseInt($(this).val());
                var product_price = $row.find('.product-subtotal').text().trim().replace(/[^0-9.,]/g, '').replace(',', '.');

                var product_brand = $row.find('.product-brand').text().trim();
                var product_category = $row.find('.product-category').text().trim();
                var product_variant = $row.find('.product-variant').text().trim();

                var productData = {
                    id: product_id,
                    name: product_name,
                    brand: product_brand,
                    category: product_category,
                    variant: product_variant,
                    quantity: product_quantity,
                    price: product_price
                };

                sendCartUpdateEvent(productData);
            });
        });
    </script>
    <?php
}

add_action('wp_footer', 'track_cart_quantity_change_js');

Answer 1

如果

MutationObserver

不起作用，您可以采取相同的步骤来解决该问题：

如果卡元素已加载：

如果

MutationObserver

元素在初始化时不存在，则

.woocommerce-cart-form

将不起作用。确保购物车表格完全加载后设置观察者。

尝试：

var cartElement = document.querySelector('.woocommerce-cart-form');
if (cartElement) {
    console.log('Cart element found, initializing observer...');
    observer.observe(cartElement, {
        childList: true,
        subtree: true
    });
} else {
    console.log('Cart element not found.');
}

添加控制台日志以验证是否找到购物车元素并且观察者是否已初始化

调试观察者回调：

问题可能出在观察者的回调函数中。在回调中添加控制台日志以检查它是否被触发

var observer = new MutationObserver(function(mutations) {
    console.log('Mutation observed:', mutations);
    mutations.forEach(function(mutation) {
        if (mutation.type === 'childList' || mutation.type === 'subtree') {
            console.log('Child list or subtree change detected');
            handleCartChange();
        }
    });
});

替代方法 - 手动触发：

• 如果 MutationObserver 仍未触发，请考虑通过监听特定事件（如数量变化或 DOM 更新）来手动触发事件。

替代方法：

• 如果可以的话可以直接绑定数量变更：

$(document).on('change', '.qty', function() {
    console.log('Quantity changed');
    handleCartChange();
});

检查冲突：

1. 有时，页面上的其他脚本可能会干扰您的观察者或事件处理程序。
2. 使用禁用的其他插件或脚本进行测试以排除冲突。尝试在测试环境中隔离您的脚本。

检查事件的时间安排：

1. 如果通过 AJAX 或类似方法动态更新购物车，请确保 MutationObserver 在正确的时间处于活动状态。
2. 确保在任何可能动态呈现购物车的潜在 AJAX 调用之后设置观察者。