将 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 查看来自服务器的响应。 至少你会知道数据是否被返回。 这将帮助您追踪问题。