自定义 WooCommerce Ajax 添加到购物车功能问题

Question

我尝试使用 JavaScript 和 PHP 将产品（我只有简单的产品）添加到购物车。我发送产品 ID，然后调用 funcis.php 中的

WC_Cart

add_to_cart()

方法。

这是我正在使用的 HTML（和 JavaScript）代码：

<button onclick="f1()" style="margin-block:100px;margin-inline:auto;">✅</button>
<script>
    function f1(){
        // const cartItems=[9660, 9568, 8625]
        const cartItems=9568
        const data = {
            action: 'AddtocartF',
            ProductsToPay: JSON.stringify(cartItems)
        };
        fetch('https://9effa.ma/wp-admin/admin-ajax.php', {
            method: 'POST',
            body: new URLSearchParams(data),
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            }
        })
            .then(response => response.json())
            .then(data => {
                console.log(data)
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }
</script>

PHP 代码：

add_action('wp_ajax_AddtocartF', 'AddtocartFunction');
add_action('wp_ajax_nopriv_AddtocartF', 'AddtocartFunction');

function AddtocartFunction(){
    if (!isset($_POST['ProductsToPay'])) {
        wp_send_json_error(['message' => "Veuillez ajouter les produits au panier avant de passer au paiement."]);
    }
    $product_id = $_POST['ProductsToPay'];
    $quantity = 1;
    $WC_Cart = new WC_Cart();
    $result = $WC_Cart->add_to_cart($product_id, $quantity);
    if (is_wp_error($result)) {
        // Handle the error case
        wp_send_json_error(['message' => $result->get_error_message()]);
    } else {
        // Product added successfully
        $response = ['success' => true, 'message' => 'Product added to cart', 'id' => $product_id, 'result value: ' => $result];
        wp_send_json_success($response);
    }
    wp_die();
}

我遇到的问题是它返回

true

（产品已添加到购物车），但事实上它没有：购物车是空的，在结账时我也没有看到任何产品。

这是我在控制台中收到的消息：

{
    "success": true,
    "data": {
        "success": true,
        "message": "Product added to cart",
        "id": "9568",
        "result value: ": "621d187a8e1a345cc07422a61c669654"
    }
}

我有最新的 WooCommerce 和 Elementor 版本，并且使用 Hello Elementor 主题。在 WooCommerce 状态选项卡中，一切看起来都很好，没有任何问题，我可以通过正常方式添加到购物车，我的意思是，如果我转到商店页面或产品页面并单击“添加到购物车”按钮。

我尝试禁用除 Elementor 和 WooCommerce 之外的所有插件。 我测试了很多不同的产品 ID。

Answer 1

您似乎实际上正在尝试一次添加多个产品：

// const cartItems=[9660, 9568, 8625]

以下内容基于 在 WooCommerce 中通过 JQuery 和 Ajax 添加到购物车多个变体答案线程，将通过 Ajax 使用自定义按钮将一个或多个产品添加到购物车。

它还处理每种产品的不同数量（可选）。

我已将您的自定义按钮 HTML 作为简码嵌入（请参阅最后的用法）。

代码：

add_shortcode( 'multi_atc', 'multi_add_to_cart_button_html');
function multi_add_to_cart_button_html( $atts ) {
    extract( shortcode_atts( array(
        'data'  => '',
        'text'  => '✅',
        'class' => 'multi-atc-btn'
    ), $atts, 'multi_atc' ) );

    //$data = '98:1,99:2,100:1';

    if( $data ):

    ob_start();

    wc_enqueue_js("const products = \"{$data}\";
    $(document.body).on('click', '.{$class}', function(e) {
        e.preventDefault();
        
        $.ajax({
            type: 'POST',
            url: '" . admin_url('/admin-ajax.php') . "',
            data: {
                'action': 'multi_add_to_cart',
                'nonce': '" . wp_create_nonce('multi_atc') . "',
                'products': products
            },
            success: function(response) {
                $(document.body).trigger('wc_fragment_refresh');
                console.log(response);
            },
            error: function (error) {
                console.log(error);
            }
        });
    });");

    echo "<style>.{$class}{margin-block:100px; margin-inline:auto;}</style>
    <button class=\"{$class}\">{$text}</button>";

    return ob_get_clean();
    endif;
}

add_action('wp_ajax_multi_add_to_cart', 'multi_add_to_cart');
add_action('wp_ajax_nopriv_multi_add_to_cart', 'multi_add_to_cart');
function multi_add_to_cart() {
    if ( isset($_POST['nonce']) 
    && wp_verify_nonce($_POST['nonce'], 'multi_atc')
    && isset($_POST['products']) && !empty($_POST['products']) ) {
        $response  = array();

        foreach( explode(',',esc_attr($_POST['products'])) as $values ) {
            $values = (array) explode(':',$values);
            if ( is_array($values) ) {
                $product_id = absint(current($values));
                $quantity   = count($values) == 2 ? end($values) : 1;
                $product    = wc_get_product( $product_id );

                $not_added  = array( 
                    'key'   => null,
                    'added' => 0,
                    'id'    => $product_id,
                );

                if ( ! is_a($product, 'WC_Product') ) {
                    $response[] = $not_added;
                    continue;
                }

                $quantity     = wc_stock_amount( wp_unslash( $quantity ) );
                $variation_id = 0;
                $variation    = array();

                if ( $product && 'variation' === $product->get_type() ) {
                    $variation_id = $product_id;
                    $product_id   = $product->get_parent_id();
                    $variation    = $product->get_variation_attributes(); 
                }
                
                if ( 'publish' !== get_post_status( $product_id ) ) {
                    $response[] = $not_added;
                    continue;
                }
                
                if ( $variation_id && 'publish' !== $product->get_status() ) {
                    $response[] = $not_added;
                    continue;
                }

                $cart_item_key = WC()->cart->add_to_cart( $product_id, $quantity, $variation_id, $variation );
                
                $response[] = array( 
                    'key'   => $cart_item_key,
                    'added' => $cart_item_key ? $quantity : '0',
                    'id'    => $variation_id ?: $product_id,
                );
            }
        }

        if ( ! empty($response) ) {
            wp_send_json($response);
        }
    }
    wp_die('Something went wrong.');
}

代码位于子主题的functions.php 文件中（或插件中）。经过测试并适用于所有产品类型。

---

用法示例 （产品 ID 以逗号分隔）:

您可以在 WordPress 文本编辑器、某些块、小部件中使用短代码......

• 未定义数量（按产品默认为 1）：

  [multi_atc data='9660,9568,8625']
  

• 不同数量（第一个产品 2 个，最后一个产品 4 个）：

  [multi_atc data='9660:2,9568,8625:4']
  

要在 PHP 代码中使用短代码，请使用

do_shortcode()

函数，例如：

echo do_shortcode("[multi_atc data='9660:2,9568,8625:4']");