WooCommerce Ajax移除按钮无法删除购物车商品，返回{success:false}

问题背景 #

在搭建电商店铺时，我通过重写WooCommerce主题的woocommerce/content-product.php文件，将「加入购物车」按钮替换为「从购物车移除」按钮，方便用户修正已加入购物车的商品。但点击移除按钮后，页面会跳转到首页，商品却仍留在购物车中。查看Ajax请求发现返回{success:false}，且无任何错误提示，无法定位问题根源。

最初实现代码 #

PHP部分（在content-product.php中添加移除按钮） #

<a href="" class="remove remove_from_cart_button" 
aria-label="Remove <?php echo($product->get_name() ); ?> from cart" 
data-product_id="<?php echo($product->get_id() ); ?>" 
data-cart_item_key="" data-product_sku="<?php echo($product->get_sku()); ?>" 
id="remove-<?php echo($product->get_id() ); ?>">Remove from enquiry</a>

JavaScript部分（更新按钮信息并绑定点击事件） #

jQuery('body').on('added_to_cart',function(event, fragments, cart_hash, $button) {
    // 从按钮的data属性中获取商品信息
    var productId = $button.data('product_id');

    var remove_button = document.getElementById('remove-' + productId);
    remove_button.setAttribute('data-cart_item_key', cart_hash);
    remove_button.setAttribute('href', '?remove_item=' + cart_hash);

    remove_button.addEventListener('click', function(event) {
        event.preventDefault();
        var updated_hash = event.target.getAttribute('data-cart_item_key');
        // 发送Ajax请求移除购物车商品
        jQuery.ajax({
            type: 'POST',
            url: wc_add_to_cart_params.wc_ajax_url.toString().replace("%%endpoint%%", "remove_from_cart"),
            data: {
                //action: 'woocommerce_remove_cart_item',
                cart_item_key: updated_hash
            },
            success: function(response, status, xhr) {
                // 可选：处理成功响应
                event.preventDefault();
            },
            error: function(xhr, status, error) {
                // 可选：处理错误响应
                event.preventDefault();
            },
            dataType: 'json'
        });
    });
});

问题根源 #

原代码中直接使用added_to_cart事件返回的cart_hash作为单个商品的cart_item_key，但实际上这个cart_hash是整个购物车的哈希值，并非对应单个商品的唯一标识，导致Ajax请求无法匹配到要移除的目标商品，最终返回success:false。

修复后的代码 #

jQuery('body').on('added_to_cart',function(event, fragments, cart_hash, $button) {
    // 获取当前商品ID
    var productId = $button.data('product_id');
    // 从fragments中提取迷你购物车的DOM内容
    var $fragments = jQuery(Object.values(fragments)[0]);

    var remove_button = document.getElementById('remove-' + productId);
    // 遍历迷你购物车中的所有移除按钮，找到当前商品对应的按钮
    var $remove_buttons = $fragments.find('.remove_from_cart_button');
    for (var btn of $remove_buttons) {
        if ( productId == jQuery(btn).data('product_id') ) {
            // 给自定义移除按钮设置正确的商品标识参数
            remove_button.setAttribute('data-cart_item_key', jQuery(btn).data('cart_item_key') );
            remove_button.setAttribute('data-product_sku', jQuery(btn).data('product_sku') );
        }
    }

    remove_button.addEventListener('click', function(event) {
        event.preventDefault();
        var updated_hash = event.target.getAttribute('data-cart_item_key');
        // 发送移除商品的Ajax请求
        jQuery.ajax({
            type: 'POST',
            url: wc_add_to_cart_params.wc_ajax_url.toString().replace("%%endpoint%%", "remove_from_cart"),
            data: {
                cart_item_key: updated_hash,
            },
            success: function(response, status, xhr) {
                // 可选：自定义成功后的处理逻辑
                event.preventDefault();
            },
            error: function(xhr, status, error) {
                // 可选：自定义错误后的处理逻辑
                event.preventDefault();
            },
            dataType: 'json'
        });
    });
});

内容的提问来源于stack exchange，提问作者Rogier