使用AJAX添加变化到购物车 – WooCommerce API？

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

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创build另一个Ajax请求，并检索购物车的内容。

我还没有find任何文件（官方或非官方）如何从客户端使用Javascript来做到这一点。

有谁知道，可以给我一个例子吗？

另外，有没有人知道为什么WooCommerce Api文档是如此可怕（缺乏关于上述显而易见的/标准问题的任何types的信息）。 我正在认真考虑让我们的公司改用Shopify。

Answer 1

您可以调查WooCommerce如何通过ajax直接在代码中将项目添加到购物车….callback位于includes/class-wc-ajax.php 。 WooCommerce已经在产品“循环”（产品档案）上做了这个，所以我不认为你需要重新发明轮子，如果他们现有的代码不适合你正在做的事情，那么你应该能够借从它严重。

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

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

它的callback是在文件的后面：

 /** * 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 。

编辑

现在，我知道你正在寻找添加变化， 也许我们可以调整上述。

首先，我认为您需要将AJAXurl传递给您的脚本：

 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动作的新callback将符合以下几点：

 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个variables。 完全没有经过testing，但我希望它有帮助。

Answer 2

如果有人有兴趣，我也写了一个“从购物车中删除”function，以反对添加到购物车。 我的项目在结帐时调用单选button，所以我需要添加一个产品，并删除它已经存在的替代scheme：

这里的PHP：

 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' ); 

然后这里是jQuery：

 function remove_item_from_cart(product){ var data = { "action" : "remove_from_cart", "product_id" : product, }; jQuery.post(WC_VARIATION_ADD_TO_CART.ajax_url, data, function(response) { $(document.body).trigger("update_checkout"); }); } 

如果（空）…在PHP是如此，我可以从服务器端调用函数，以及如果我需要。