添加一个变异购物车使用AJAX - WooCommerce API？ [英] Add a Variation to Cart using AJAX - WooCommerce API?
问题描述
我有以下数据项：
var item = {
id : "124",
name : "xxx",
price : "13.13",
quantity : 1,
options : {
"size" : "xl",
"color": "pink"
}
};
当用户点击加入购物车我想使用WC API一个Ajax请求和上述项目添加到购物车中。
When the user clicks on "Add to Cart" I'd like to make an Ajax Request using the WC API and add the above item to the Cart.
jQuery.ajax({
url: "some/woocommerce/api/add/to/cart/request/path",
data: item,
type: "POST"
});
然后在购物车页面，我想使用WC API另一个Ajax请求和检索购物车的内容。
Then on the Cart Page I'd like to make another Ajax Request using the WC API and retrieve the contents of the cart.
我还没有发现任何文件（正式或非正式）就如何做到这一点从使用JavaScript客户端。
I haven't found any documentation (official or unofficial) on how to do that from the client using Javascript.
有谁知道，可以为我提供一个例子吗？
Does anyone know and can provide me with an example please?
此外，没有人知道为什么WooCommerce API文档是如此可怕的（缺乏有关，如上述明显的/标准的问题，任何类型的信息）。我在认真思考有我们公司的交换机到Shopify的。
Also, does anyone know why the WooCommerce Api Documentation is so horrible (lacking any kind of information regarding obvious/standard questions like the above). I'm seriously thinking of having our company switch to Shopify.
推荐答案
您可以研究如何WooCommerce通过AJAX直接在code将项目添加到购物车....回调位于包含/类-WC-ajax.php 。 WooCommerce已经这样做了产品的循环（产品档案），所以我不认为你需要推倒重来，如果现有的code不为工作，你正在做什么，那么你就应该能够从中大肆借贷。
You can investigate how WooCommerce is adding items to the cart via ajax directly in the code.... the callback is located in includes/class-wc-ajax.php. WooCommerce already does this on product "loops" (product archives), so I don't think you need to reinvent the wheel and if their existing code doesn't work for what you are trying to do, then you should be able to borrow heavily from it.
这是文件的开头与所有WooCommerce阿贾克斯动作循环，但我们可以追踪该添加到购物车基本上是这样的：
The beginning of that file has a loop with all the WooCommerce Ajax actions, but we can track down that the add to cart is basically this:
add_action( 'wp_ajax_nopriv_woocommerce_add_to_cart', array( 'WC_AJAX', 'add_to_cart' ) );
和它的回调是一个小更远的文件：
And it's callback is a little further down the file:
/**
* 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对于位于入资产/ JS /前端/添加到cart.js 。
If you want to view their add to cart ajax call, the JS for that is located in assest/js/frontend/add-to-cart.js.
修改
现在，我知道你希望增加的变化，的也许的，我们可以调整上述。
Now that I know you are looking to add a variation, maybe we can tweak the above.
首先，我认为你需要的AJAX URL传递给您的脚本：
First, I think you'll need to pass the AJAX url to your script:
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调用看起来是这样的：
Then your AJAX call would look something like this:
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外的所有添加特定的变化是特定的选项。
Basically to add a specific variation you need the variation's ID in addition to all it's specific options.
最后的 woocommerce_add_variation_to_cart 阿贾克斯行动将遵循以下的行新的回调：
And finally the new callback for the woocommerce_add_variation_to_cart ajax action would be along the lines of the following:
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, $variation ) ) {
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个变量加入。完全未经测试，但我希望它能帮助。
Mostly, I'm just copying WooCommerce's approach and adding in the 2 variables needed for adding variations. Totally untested, but I hope it helps.
这篇关于添加一个变异购物车使用AJAX - WooCommerce API？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
