使用Ajax/Fetch移除WooCommerce购物车商品时出现500错误排查

请求触发以下错误：

POST http://localhost:3000/esport/wp-admin/admin-ajax.php
[HTTP/1.1 500 Internal Server Error 3046ms]

SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

怀疑问题与WC_Cart::remove_cart_item方法相关，相关代码及现象如下：

Latte模板代码 #

通过Latte循环购物车商品，为每个<li>元素添加data-key属性：

{var $cart_items = WC()->cart->get_cart()}
<section class="sidebar-checkout">
        <div class="sidebar-checkout__header">
            <h3 n:ifcontent>Varukorg</h3>
            <button class="cart-checkout-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-8 mr-4 icon-close"><path class="secondary" fill-rule="evenodd" d="M15.78 14.36a1 1 0 0 1-1.42 1.42l-2.82-2.83-2.83 2.83a1 1 0 1 1-1.42-1.42l2.83-2.82L7.3 8.7a1 1 0 0 1 1.42-1.42l2.83 2.83 2.82-2.83a1 1 0 0 1 1.42 1.42l-2.83 2.83 2.83 2.82z"></path></svg></button>
        </div>
        <ul class="sidebar-cart" n:if="$cart_items">
            <li n:foreach="$cart_items as $cart_item_key => $cart_item" class="sidebar-cart__item" data-key="{$cart_item_key}">
                {var $product = $cart_item['data']}
                {var $img_src = wp_get_attachment_image_url($product->get_image_id(), 'thumbnail')}
                {var $image_alt = get_post_meta($attachment_id, "_wp_attachment_image_alt", TRUE)}
                <img src="{$img_src}" alt="{$image_alt}" decoding="async" loading="lazy">
                <a href="{get_permalink($product->get_id())}">{$product->get_name()}</a>
                <button class="remove_from_cart_button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-8 mr-4 icon-trash"><path class="primary" d="M5 5h14l-.89 15.12a2 2 0 0 1-2 1.88H7.9a2 2 0 0 1-2-1.88L5 5zm5 5a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0v-6a1 1 0 0 0-1-1zm4 0a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0v-6a1 1 0 0 0-1-1z"></path><path class="secondary" d="M8.59 4l1.7-1.7A1 1 0 0 1 11 2h2a1 1 0 0 1 .7.3L15.42 4H19a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2h3.59z"></path></svg></button>
            </li>
            <div class="widget_shopping_cart_content"></div>
        </ul>
</section>

JavaScript代码 #

获取data-key值并通过Fetch发送请求到自定义Ajax接口：

const remove_from_cart_button = document.querySelectorAll('.remove_from_cart_button');
remove_from_cart_button.forEach(e => {
    e.addEventListener('click', async e => {
        const key = e.target.closest('.sidebar-cart__item').dataset.key;
        try {
            const response = await fetch('/esport/wp-admin/admin-ajax.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: 'action=my_custom_action&cart_item_key=' + key
                }
            );
            const data = await response.json();
            console.log('data', data);
        } catch (error) {
            console.error(error)
        }
    }
)})

PHP Ajax回调函数 #

自定义Ajax处理函数，调用WC_Cart::remove_cart_item移除商品：

add_action('wp_ajax_my_custom_action', 'my_custom_action_callback');
add_action('wp_ajax_nopriv_my_custom_action', 'my_custom_action_callback');

function my_custom_action_callback() {
    $cart_item_key = $_POST['cart_item_key'];
    foreach(WC()->cart->get_cart() as $key => $item) {
        if ($key == $cart_item_key) {
            WC()->cart->remove_cart_item($key);
            wp_send_json_success(array('message' => 'Cart item removed successfully'));
        }
    }
  
}

关键现象 #

• 移除代码中的WC()->cart->remove_cart_item($key);后，接口能正常返回JSON响应
• 尝试直接调用WooCommerce官方的woocommerce_remove_cart_item action时，同样触发500错误

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