Woocommerce ajax 删除按钮不会从购物车中删除商品，但会返回 { success: false }

Question

在我正在构建的商店的设计中，woocommerce 主题覆盖的 woocommerce/content-product.php 文件上的“添加到购物车”按钮更改为“从购物车中删除”按钮，以允许用户更正添加到的商品卡。

仅当单击删除按钮时，用户才会被发送到主页并且该商品仍在购物车中。如果我检查 javascript，ajax 调用确实返回成功，但值为“false”，我无法真正找出导致此情况的原因。

在 woocommerce/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>

将商品添加到购物车时，我会使用返回的内容更新删除按钮上的数据，并在有人单击该按钮时添加事件处理程序。

它会使用哈希值进行更新，并且 url 会使用正确的值进行更新。但是单击它会显示状态 { success: false } 并且没有任何暗示问题所在的信息。 该代码看起来与 Woocoommerce 在 add-to-cart.js 中所做的几乎相同

jQuery('body').on('added_to_cart',function(event, fragments, cart_hash, $button) {
    // Retrieve information about the product from the button's data attributes
    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');
        // Send AJAX request to remove the item from the cart
        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) {
                // Handle success response (optional)
                event.preventDefault();
            },
            error: function(xhr, status, error) {
                // Handle error response (optional)
                event.preventDefault();
            },
            dataType: 'json'
        });
    });
});

编辑：所以我设法解决了它。返回的消息让我感到困惑，并让我朝错误的方向寻找。有关该消息的详细信息，请参阅下面的评论。

这是有效的代码：

jQuery('body').on('added_to_cart',function(event, fragments, cart_hash, $button) {
    // Retrieve information about the product from the button's data attributes
    var productId = $button.data('product_id');
    // fragments returns the mini cart, the hash isn't passed separately anymore
    var $fragments = jQuery(Object.values(fragments)[0]);

    var remove_button = document.getElementById('remove-' + productId);
    // Get the remove buttons for all the products returned, and find the one matching the one I want
    var $remove_buttons = $fragments.find('.remove_from_cart_button');
    for (var btn of $remove_buttons) {
        if ( productId == jQuery(btn).data('product_id') ) {
            // If this is the right product, set the values on the button. The rest is as it was
            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');
        // Send AJAX request to remove the item from the cart
        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) {
                // Handle success response (optional)
                event.preventDefault();
            },
            error: function(xhr, status, error) {
                // Handle error response (optional)
                event.preventDefault();
            },
            dataType: 'json'
        });
    });
});

Answer 1

解决方案是我被一个不明确的错误迷惑了，这个错误冒充成功消息。我使用的是购物车哈希而不是产品哈希。

固定代码在帖子中，也在下面。我希望这是正确的方法吗？

jQuery('body').on('added_to_cart',function(event, fragments, cart_hash, $button) {
    // Retrieve information about the product from the button's data attributes
    var productId = $button.data('product_id');
    // fragments returns the mini cart, the hash isn't passed separately anymore
    var $fragments = jQuery(Object.values(fragments)[0]);

    var remove_button = document.getElementById('remove-' + productId);
    // Get the remove buttons for all the products returned, and find the one matching the one I want
    var $remove_buttons = $fragments.find('.remove_from_cart_button');
    for (var btn of $remove_buttons) {
        if ( productId == jQuery(btn).data('product_id') ) {
            // If this is the right product, set the values on the button. The rest is as it was
            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');
        // Send AJAX request to remove the item from the cart
        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) {
                // Handle success response (optional)
                event.preventDefault();
            },
            error: function(xhr, status, error) {
                // Handle error response (optional)
                event.preventDefault();
            },
            dataType: 'json'
        });
    });
});