Add variation to cart using AJAX API - WooCommerce?

Question

I have an element with the following data:

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

When the user clicks the Add to Cart button, I would 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" }); 

Then on the recycle page I would like to make another Ajax request using the WC API and get the contents of the recycle bin.

I did not find any documentation (official or unofficial) on how to do this with the client using Javascript.

Does anyone know and can provide me an example?

Also, does anyone know why the WooCommerce Api Documentation is so horrible (there is no information on obvious / standard issues like the one above). I seriously think about our company switching to Shopify.

Answer 1

You can explore how WooCommerce adds items to the cart through ajax directly in the code .... the callback is 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 him.

At the beginning of this file there is a loop with all the actions of Ajax WooCommerce, but we can track that adding to the cart is basically this:

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

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

If you want to see their addition to the basket ajax call, the JS for it is in assest/js/frontend/add-to-cart.js .

EDIT

Now that I know that you want to add an option, perhaps we can fine-tune the above.

First, I think you 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 ); 

Then your AJAX call will 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" }); 

Basically, to add a specific option, you will need a change identifier in addition to all its specific parameters.

And finally, a new callback for the woocommerce_add_variation_to_cart ajax action will look like this:

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

Basically, I just copy the WooCommerce approach and add to the 2 variables needed to add options. Totally untested, but I hope this helps.

Answer 2

If someone is interested, I also wrote a “delete from basket” function to meet adding to the basket. My project called the radio buttons when placing an order, so I needed to add a product and remove the alternative that it is already there:

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

And here is 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"); }); } 

If (empty) ... in php was like this, I could call the function from the server side if I need to.