將 JavaScript 變量傳遞給 PHP，然后傳遞給 woo commerce 電子商務網站中的購物車和訂單項

Question

自從我開始在 woocommerce 中進行開發以來不久。 我可能不知道 woocommerce 的局限性，所以在我解釋我的問題時請耐心等待。

我想創建一個產品定制器。 對於僅應要求提供的產品（家具）。 所以這是我做的前端。 https://skmfurniture.com.au/KAALIKA/product/blow-me-away/

我創建的是一個用 SVG 改變顏色的產品（因為它的變化有超過 2k 種顏色創建圖像是不夠的）。 它有價格、皮革/物品類型、主色、強調色、尺寸、床墊價格和保修價格。

問題：您可以啟動控制台並觀察我成功登錄的 javascript 變量。 我使用 ajax 將 javascript 變量更改為 PHP 變量，然后嘗試將其插入購物車。 由於這一切都是在 woocomerce 的單個產品頁面中的模式中完成的，因此當我提交值時會顯示“請選擇產品選項”消息。

這是使用的ajax代碼：

    // 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/");
    });
    

這是 function.php 文件的樣子：

// 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;


  }
 

我已經編寫了將它們放入購物車，然后結帳，最后在后端訂購商品的函數，但不確定我在這些步驟中是否已經錯了。 我只是打印出是否傳遞了變量，但確定為什么我沒有得到任何信息。

如果您能在正確的方向上尋找並引導我，我將不勝感激。

Answer 1

問題

您正在嘗試在服務器上回顯您使用 ajax 發布的值，但沒有看到任何輸出。

原因

在您的成功函數中，您是console.log(chase)而不是msg 。 msg是您傳遞給成功函數的參數，因此它是范圍內的數據。

// 錯誤道！

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

例子

這應該顯示從服務器返回的字符串。

// 正確的方法！

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

專家提示

如果您無法按預期在 DOM 中看到值，請始終檢查 Chrome Dev Tools 中的 Network 選項卡。 您可以單擊 Network -> Response 查看來自服務器的響應。 至少你會知道數據是否被返回。 這將幫助您追蹤問題。