使用WooCommerce选择变体时更新产品页面上的价格

Question

使用WooCommerce在产品页面本身上显示产品的更新价格时，我遇到了一些问题。

基本上，我们有一个自定义构建器页面，该页面允许用户选择不同的选项（在这种情况下为变体），然后在将其添加到购物车中时计算出正确的价格。一切正常。

我遇到的问题是，我们希望在他们更改选项时在屏幕上显示价格。

因此，假设我选择了一个长度为6米的蓝色商品，价格应该为100英镑，但是如果我选择长度为1米的红色商品，价格为10英镑。

我猜想有些jQuery或某些可以动态更新页面的信息，但是我不知道该在哪里或如何执行此操作。

它需要在更改表单选择框时触发我假设的功能。

目前，我正在使用此价格显示...。

$product = new WC_Product(538);

echo esc_attr($product->get_price());

我认为无论如何都是错误的，因为那是基本价格而不是变动价格，但是无论哪种方式，我仍然需要找到一种无需刷新即可更新屏幕价格的方法。

这是我的SELECT表单项之一，尽管页面上有很多。

<select id="frame-depth" class="kad-select" name="attribute_frame-depth" data-attribute_name="attribute_frame-depth"" data-show_option_none="yes">
<option value="Standard depth"  selected="selected">Standard depth</option>
<option value="Extra Deep" >Extra Deep</option>
</select>

任何帮助将不胜感激！

如果我需要更详细地更新问题，可以这样做。我只是认为我会保持简单！

西蒙

Answer 1

我在 JS 中使用事件大致如下found_variation：

\n

var currentVariation = null;\n\nfunction calcTotalPrice(variation = null) {\n  if (variation) {\n    currentVariation = variation;\n  }\n  if (!currentVariation) {\n    var $price = $(\'#product-price\');\n    if ($price && $price.length) {\n      currentVariation = {\n        display_price: $price.val()\n      };\n    }\n  }\n  if (currentVariation) {\n    var qty = $(\'#quantity\').val();\n    var total = currentVariation.display_price * qty;\n    $(\'#total-price-result\').html(\'\xe2\x82\xac \' + number_format(total, 2, \',\', \' \'));\n  }\n}\n\n$(\'form.variations_form\').on(\'found_variation\', function(e, variation) {\n  calcTotalPrice(variation);\n});\n$(\'#quantity\').on(\'input change\', function() {\n  calcTotalPrice();\n});\n$(\'form.variations_form\').on(\'hide_variation\', function() {\n  $(\'#total-price-div\').hide();\n});\n$(\'form.variations_form\').on(\'show_variation\', function() {\n  $(\'#total-price-div\').show();\n});\n

\n

在 HTML/模板方面，我覆盖woocommerce/single-product/add-to-cart/variable.php并编辑定价部分，使其与此类似：

\n

<div id="total-price-div">\n    <h4><label>{{ __("Total", "my-text-domain") }}</label></h4>\n    <div class="value">\n        <span class="total-price"><span id="total-price-result" class="total-price"></span></span>\n    </div>\n</div>\n

\n

我希望这可以帮助别人？

\n