将 JavaScript 变量传递给 PHP，然后传递给 woo commerce 支持的电子商务网站中的购物车和订单项

Posted 2023-05-08

【中文标题】将 JavaScript 变量传递给 PHP，然后传递给 woo commerce 支持的电子商务网站中的购物车和订单项

【英文标题】：Pass JavaScript variable to PHP and then to cart and order line items in woo commerce powered e-commerce site

【发布时间】：2021-03-06 19:28:19

【问题描述】：

我开始在 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;


  
 

我已经编写了将它们放入购物车的函数，然后结帐，最后在后端订购商品，但不确定我在这些步骤中是否已经错了。我只是打印出是否通过了变量，但确定为什么我没有得到任何结果。

如果您能看一下并指导我正确的方向，将不胜感激。

【参考方案1】：

问题

您正尝试在服务器上回显您使用 ajax 发布的值，但没有看到任何输出。

原因

在你的成功函数中，你是console.log(chase) 而不是msg。 msg 是您传递给成功函数的参数，因此它是范围内的数据。

// 错误的方式！

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

示例

这应该会显示从服务器返回的字符串。

// 正确的方式！

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

专业提示

如果您无法按预期看到 DOM 中的值，请始终检查 Chrome 开发工具中的网络选项卡。您可以单击网络 -> 响应以查看来自服务器的响应。至少你会知道数据是否被返回。这将帮助您找出问题所在。

【讨论】：

感谢您的专业提示.. 我得到了整个 html 文档作为响应.. 有没有办法我可以得到我想要的变量？

做两件事，你能删除第二个echo，所以你只返回“追逐”。另外，在 PHP 函数内部，你能不能做mail("youremail", "test", chase); 来验证函数是否真的在运行并且接收到值“chase”。

另外，需要明确的是，这听起来像是在工作。由于您没有提供 URL，因此您正在向 SELF 发帖。所以从技术上讲，您会在响应中看到 HTML 页面。您只需要确保您正在访问您所依赖的值。在您的控制台日志中使用 msg 并验证您是否可以看到它们。此外，您必须从服务器返回数据，不能只将其分配给变量。最好的情况是创建 JSON，因此 msg 是一个 JSON 对象，包含从服务器返回的所有键值对。

我添加了 ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ) ?>' 作为 url 并观看网络选项卡，我可以根据需要完美地看到响应。非常感谢您的帮助。

惊人而伟大的工作。如果你猜对了，请选择其中一个答案。不客气！