Pass JavaScript variable to PHP and then to cart and order line items in woo commerce powered e-commerce site

Question

It has not been long since I started developing in woocommerce. I may not know the limitations of woocommerce so bear with me when I explain my problem.

I want to create a product customizer. For products(furniture) that are available upon request only. So this is the frontend I've done. https://skmfurniture.com.au/KAALIKA/product/blow-me-away/

What I've created is a product that changes color with SVG(because its variation had more than 2k colors creating images was not enough). It has a price, leather/item type, main color, accent color, size, mattress price, and warranty price.

PROBLEM: You can fire up the console and watch the javascript variable that I successfully logged. I changed the javascript variable to PHP variable with ajax and then tried to insert it into the cart. Since it was all done in a modal in the single-product page of woocomerce shows "Please choose product option" message when I submit values.

This is the ajax code used:

    // adding to cart
    $('#addToCart a').click(function(e){ 
    
     $.ajax({
            type: "POST",
            data: {                             
                chase: chase,
                item : item,
                price: price,
                size: size,
                mainHex: mainHex,
                accentHex: accentHex,
                mattress: mattress,
                warranty: warranty,
                action: 'your_ajax_function'  
            },
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            dataType: "text",
            success: function (msg) {
                console.log("Chase", chase);
                console.log("Price", price);
                console.log("Item", item);
                console.log("Size", size);
                console.log("Main Color", mainHex);
                console.log("Accent Color", accentHex);
                console.log("Matt", mattress);
                console.log("Warr", warranty);
            },
            error: function (errormessage) {
                  console.log( "ERROR in ajazx" );
            }
      });
    
     window.location.replace("https://skmfurniture.com.au/KAALIKA/cart/");
    });
    

Here is how function.php file looks like:

// getting values from ajax into php
add_action('wp_ajax_nopriv_your_ajax_function','your_ajax_function'); // Ajax Function should be hooked like this for unauthenticated users
add_action('wp_ajax_your_ajax_function','your_ajax_function'); 

  function your_ajax_function(){

    $price = $_POST['price'];
    $chase = $_POST['chase'];
    $item = $_POST['item'];
    $price = $_POST['price'];
    $size = $_POST['size'];
    $mainHex = $_POST['mainHex'];
    $accentHex = $_POST['accentHex'];
    $mattress = $_POST['mattress'];
    $warranty = $_POST['warranty'];

    echo $chase;
    echo $item;


  }
 

I have written functions to place them in the cart, then checkout, and then finally to order items in the backend but unsure if I'm already wrong in these steps. I'm just printing out the if variables are passed or not but sure why I don't get anyting.

If you could just look and guide me in the right direction would be much appreciated.

Answer 1

Problem

You are trying to echo the values on the server that your are posting with ajax but do not see any output.

Reason

In your success function, you are console.log(chase) instead of msg. msg is the parameter that you are passing into the success function so it is the data in scope.

// Wrong Way!

success: function (msg) {
   console.log("Chase", chase);
},

Example

This should show you the string returned from the server.

// Right Way!

success: function (msg) {
   console.log("Chase", msg);
}

Pro Tip

If you can not see the value in the DOM as expected, always check the Network tab in Chrome Dev Tools. You can click Network -> Response to see the response from the server. At least then you will know if the data is being returned or not. That will help you track down the problem.