使用AJAX向购物车添加变化-WooCommerce API？

Z时代
2024-01-10
分类：问答

我有一个包含以下数据的项目：

var item = {
  id : "124",
  name : "xxx",
  price : "13.13",
  quantity : 1,
  options : {
    "size" : "xl",
    "color": "pink"
  }
};

当用户单击“添加到购物车”时，我想使用WC API发出Ajax请求并将上述项目添加到购物车。

jQuery.ajax({
   url: "some/woocommerce/api/add/to/cart/request/path",
   data: item,
   type: "POST"
});

然后，我想在购物车页面上使用WC API发出另一个Ajax请求并检索购物车的内容。

我还没有从客户端使用Javascript找到任何文档（正式或非正式）。

有谁知道并且可以给我提供一个例子吗？

另外，有谁知道为什么WooCommerce Api文档如此恐怖（缺少有关上述明显/标准问题的任何信息）。我正在认真考虑让我们的公司改用Shopify。

回答：

您可以直接在代码中调查WooCommerce如何通过Ajax将商品添加到购物车中includes/class-wc-

ajax.php。回调位于。WooCommerce已经在产品“循环”（产品档案）上执行了此操作，因此我认为您不需要重新发明轮子，并且如果它们的现有代码对您要执行的操作无效，那么您应该可以借用从中

该文件的开头具有所有WooCommerce Ajax操作的循环，但是我们可以追踪到添加到购物车基本上是这样的：

add_action( 'wp_ajax_nopriv_woocommerce_add_to_cart', array( 'WC_AJAX', 'add_to_cart' ) );

它的回调距离文件更远：

/**
 * AJAX add to cart
 */
public static function add_to_cart() {
    ob_start();
    $product_id        = apply_filters( 'woocommerce_add_to_cart_product_id', absint( $_POST['product_id'] ) );
    $quantity          = empty( $_POST['quantity'] ) ? 1 : wc_stock_amount( $_POST['quantity'] );
    $passed_validation = apply_filters( 'woocommerce_add_to_cart_validation', true, $product_id, $quantity, $variation_id, $variations, $cart_item_data );
    if ( $passed_validation && WC()->cart->add_to_cart( $product_id, $quantity ) ) {
        do_action( 'woocommerce_ajax_added_to_cart', $product_id );
        if ( get_option( 'woocommerce_cart_redirect_after_add' ) == 'yes' ) {
            wc_add_to_cart_message( $product_id );
        }
        // Return fragments
        self::get_refreshed_fragments();
    } else {
        // If there was an error adding to the cart, redirect to the product page to show any errors
        $data = array(
            'error' => true,
            'product_url' => apply_filters( 'woocommerce_cart_redirect_after_error', get_permalink( $product_id ), $product_id )
        );
        wp_send_json( $data );
    }
    die();
}

如果要查看其添加到购物车ajax调用，则该JS位于assest/js/frontend/add-to-cart.js。

现在，我知道您正在寻找添加变体的方法，也许我们可以对以上内容进行调整。

首先，我认为您需要将AJAX网址传递给脚本：

wp_enqueue_script( 'wc-variation-add-to-cart', 'source-to-script/your-script.js' );
$vars = array( 'ajax_url' => admin_url( 'admin-ajax.php' ) );
wp_localize_script( 'wc-variation-add-to-cart', 'WC_VARIATION_ADD_TO_CART', $vars );

然后，您的AJAX调用将如下所示：

jQuery.ajax({
    url: WC_VARIATION_ADD_TO_CART.ajax_url,
    data: {
        "action" : "woocommerce_add_variation_to_cart",
        "product_id" : "124",
        "variation_id" : "125",
        "quantity" : 1,
        "variation" : {
            "size" : "xl",
            "color": "pink"
        },
    },
    type: "POST"
});

基本上，要添加特定的变体，除了所有特定选项外，还需要变体的ID。

最后，针对woocommerce_add_variation_to_cartajax操作的新回调将遵循以下内容：

add_action( 'wp_ajax_nopriv_woocommerce_add_variation_to_cart', 'so_27270880_add_variation_to_cart' );
function so_27270880_add_variation_to_cart() {
    ob_start();
    $product_id        = apply_filters( 'woocommerce_add_to_cart_product_id', absint( $_POST['product_id'] ) );
    $quantity          = empty( $_POST['quantity'] ) ? 1 : wc_stock_amount( $_POST['quantity'] );
    $variation_id      = isset( $_POST['variation_id'] ) ? absint( $_POST['variation_id'] ) : '';
    $variations         = ! empty( $_POST['variation'] ) ? (array) $_POST['variation'] : '';
    $passed_validation = apply_filters( 'woocommerce_add_to_cart_validation', true, $product_id, $quantity, $variation_id, $variations, $cart_item_data );
    if ( $passed_validation && WC()->cart->add_to_cart( $product_id, $quantity, $variation_id, $variations ) ) {
        do_action( 'woocommerce_ajax_added_to_cart', $product_id );
        if ( get_option( 'woocommerce_cart_redirect_after_add' ) == 'yes' ) {
            wc_add_to_cart_message( $product_id );
        }
        // Return fragments
        WC_AJAX::get_refreshed_fragments();
    } else {
        // If there was an error adding to the cart, redirect to the product page to show any errors
        $data = array(
            'error' => true,
            'product_url' => apply_filters( 'woocommerce_cart_redirect_after_error', get_permalink( $product_id ), $product_id )
        );
        wp_send_json( $data );
    }
    die();
}