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

我使用found_variation事件在JS中大致像这样：

var currentVariation = null;

function calcTotalPrice(variation = null) {
  if (variation) {
    currentVariation = variation;
  }
  if (!currentVariation) {
    var $price = $('#product-price');
    if ($price && $price.length) {
      currentVariation = {
        display_price: $price.val()
      };
    }
  }
  if (currentVariation) {
    var qty = $('#quantity').val();
    var total = currentVariation.display_price * qty;
    $('#total-price-result').html('€ ' + number_format(total, 2, ',', ' '));
  }
}

$('form.variations_form').on('found_variation', function(e, variation) {
  calcTotalPrice(variation);
});
$('#quantity').on('input change', function() {
  calcTotalPrice();
});
$('form.variations_form').on('hide_variation', function() {
  $('#total-price-div').hide();
});
$('form.variations_form').on('show_variation', function() {
  $('#total-price-div').show();
});

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

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

我希望这可以帮助某人？

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

1 个答案: