Woocommerce 单品 Ajax 使用自定义购物车项目数据添加到购物车

Question

我正在尝试在 WooCommerce 中使用 Ajax 构建“添加到购物车”按钮。在此处和 Google 上搜索了几个小时后，我的问题是我能够在通话中获得

200

状态，但没有任何内容添加到购物车中。我希望订单能够以这种状态添加到购物车中。

我的活动子主题中有以下代码

functions.php

:

function add_to_cart() {
  $product_id = intval($_POST['product_id']);
  $quantity = intval($_POST['quantity']);
  $height = sanitize_text_field($_POST['height']);
  $width = sanitize_text_field($_POST['width']);
  $totalArea = sanitize_text_field($_POST['totalArea']);
  $cost = sanitize_text_field($_POST['cost']);
  $numPanels = intval($_POST['numPanels']);
  $enteredHeight = sanitize_text_field($_POST['enteredHeight']);
  $enteredWidth = sanitize_text_field($_POST['enteredWidth']);

  WC()->cart->add_to_cart($product_id, $quantity, 0, array(), array('height'=>$height, 'width'=>$width, 'totalArea'=>$totalArea, 'cost'=>$cost, 'numPanels'=>$numPanels, 'enteredHeight'=>$enteredHeight, 'enteredWidth'=>$enteredWidth));

  wp_die();
}
add_action('wp_ajax_add_to_cart', 'add_to_cart');
add_action('wp_ajax_nopriv_add_to_cart', 'add_to_cart');

function enqueue_add_to_cart_script() {
  if(function_exists('is_product') && is_product()) {
    wp_enqueue_script('add_to_cart', get_stylesheet_directory_uri() . '/js/add-to-cart-ajax.js');
    wp_localize_script('add_to_cart', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('ajax_nonce')));
  }
}
add_action('wp_enqueue_scripts', 'enqueue_add_to_cart_script');

我创建的子主题的

js

文件夹中还有以下代码：

document.addEventListener('DOMContentLoaded', () => {
  const ADD_TO_CART = document.getElementById('add-to-cart');
  const URL = wc_add_to_cart_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'add_to_cart' );

  ADD_TO_CART.addEventListener('click', (e) => {
    e.preventDefault();
    ADD_TO_CART.disabled = true;

    const ORDER = {
      action: 'add_to_cart',
      quantity: 1,
      product_id: '123ABC',
      height: '96 in.',
      width: '120 in.',
      totalArea: '80 sq ft',
      cost: '$636.00',
      numPanels: 5,
      enteredHeight: '96 in.',
      enteredWidth: '120 in.',
    };

    fetch(URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(ORDER),
    })
    .then((response) => console.log('success:', response))
    .catch((error) => console.error('Error:', error));
  });
});

console.log('order: ', ORDER);

正在按照我的预期创建对象。正如我之前所说，

console.log('success: ', response);

返回

200

。

但是没有任何东西被添加到购物车中。对于我的一生，我无法弄清楚我错在哪里。有人看到我在这里缺少什么（可能很简单）步骤吗？

这里有一个快速的小“添加到购物车”按钮，供任何人测试：

<?php
  function add_to_cart() { ?>
    <button id="add-to-cart">Add to Cart</button>
<?php }

谢谢。

Answer 1

下面，我们使用 jQuery（就像 WordPress/WooCommerce 已经做的那样）。我重命名了一些函数以避免现有函数出现问题（也重命名了其他一些参数）。

尝试以下重新访问的代码：

按钮 HTML 代码：

<button class="custom add-to-cart">Add to Cart</button>

PHP 代码：

// Only in single product pages: Enqueue and localize scripts
add_action('wp_enqueue_scripts', 'enqueue_custom_add_to_cart_scripts');
function enqueue_custom_add_to_cart_scripts() {
    if( function_exists('is_product') && is_product() ) {
        wp_enqueue_script( 'custom-add-to-cart', get_stylesheet_directory_uri() . '/js/custom-add-to-cart.js', array('jquery'), '1.0', true );
        wp_localize_script( 'custom-add-to-cart', 'wc_params_custom', array(
            'ajax_url' => admin_url('admin-ajax.php'), 
            'nonce'    => wp_create_nonce('nonce_custom_atc')
        ) );
    }
}

// PHP WP Ajax receiver
add_action('wp_ajax_custom_add_to_cart', 'custom_add_to_cart');
add_action('wp_ajax_nopriv_custom_add_to_cart', 'custom_add_to_cart');
function custom_add_to_cart() {
    $cart_item_key = null; // Initializing

    if (isset($_POST['nonce']) && wp_verify_nonce($_POST['nonce'], 'nonce_custom_atc')) {
        $cart_item_key = WC()->cart->add_to_cart(
            intval($_POST['product_id']), 
            intval($_POST['quantity']), 
            0, 
            array(), 
            array(
                'height'        => sanitize_text_field($_POST['height']), 
                'width'         => sanitize_text_field($_POST['width']), 
                'totalArea'     => sanitize_text_field($_POST['totalArea']), 
                'cost'          => sanitize_text_field($_POST['cost']), 
                'numPanels'     => intval($_POST['numPanels']), 
                'enteredHeight' => sanitize_text_field($_POST['enteredHeight']),  
                'enteredWidth'  => sanitize_text_field($_POST['enteredWidth']), 
            )
        );
    }
    wp_die( $cart_item_key ? "Cart item key: {$cart_item_key}" : "Error: not added!" );
}

代码位于您子主题的

functions.php

文件中。

JavaScript 代码：

jQuery( function($) {
    if (typeof wc_params_custom === 'undefined')
        return false;

    $('.custom.add-to-cart').on('click', function(e) {
        e.preventDefault();

        $.ajax({
            type: 'POST',
            url:  wc_params_custom.ajax_url,
            data: {
                'action'        :'custom_add_to_cart',
                'nonce'         : wc_params_custom.nonce, // ==> nonce
                'product_id'    : '123', // ==> integer
                'quantity'      : 1,
                'height'        : '96 in.',
                'width'         : '120 in.',
                'totalArea'     : '80 sq ft',
                'cost'          : '$636.00',
                'numPanels'     : 5,
                'enteredHeight' : '96 in.',
                'enteredWidth'  : '120 in.'
            },
            success: function (response) {
                $(document.body).trigger("wc_fragment_refresh");
                console.log(response);
            },
            error: function (error) {
                console.log(error); 
            }
        });
    });
});

代码位于子主题文件夹内的

js/custom-add-to-cart.js

文件中。

经过测试并有效。

相关：Ajax 添加到购物车以获取 WooCommerce 单一产品中的简单和可变产品