Question

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

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。

Answer 1

您可以直接在代码中调查WooCommerce如何通过ajax向购物车添加商品....回调位于includes/class-wc-ajax.php。 WooCommerce已经在产品＆＃34;循环＆＃34; （产品档案），所以我认为你不需要重新发明轮子，如果他们现有的代码对你想要做的事情不起作用，那么你应该能够从中大量借用。

该文件的开头有一个包含所有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_cart ajax行动的新回调将遵循以下内容：

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(); }

大多数情况下，我只是复制WooCommerce的方法并添加添加变体所需的2个变量。完全未经测试，但我希望它有所帮助。

Answer 2

如果有人有兴趣，我还写了一个“从购物车中删除”功能来对抗添加到购物车。我的项目在结账时调用了单选按钮，所以我需要添加一个产品并删除它已存在的替代品：

这是php：

proximity

然后是jQuery：

function remove_from_cart( $product_id ) {
    $cart_contents  = WC()->cart->get_cart();

    if (empty($product_id)) { $product_id = $_POST['product_id']; }

    foreach ($cart_contents as $product_key => $product){
        if ($product['variation_id'] == $product_id){
            WC()->cart->remove_cart_item($product_key);
        }
    }
}

add_action( 'wp_ajax_nopriv_remove_from_cart', 'remove_from_cart' );

php中的if（空）...所以我可以从服务器端调用该函数，如果我需要的话。

使用AJAX - WooCommerce API将变体添加到购物车？

2 个答案: