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

Posted 2023-02-24

【中文标题】使用 WooCommerce 选择变体时更新产品页面上的价格

【英文标题】：Updating the price on product page when variations are chosen with WooCommerce

【发布时间】：2017-07-12 16:41:19

【问题描述】：

我在使用 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>

任何帮助将不胜感激！

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

西蒙

【问题讨论】：

嘿@Simon 面临同样的挑战 :( 你找到解决办法了吗？它一定是 javascript。

【参考方案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>

我希望这可以帮助别人？