php - 使用 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事件:

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>

我希望这可以帮助某人？