WooCommerce에서 바리에이션 선택 시 제품 페이지 가격 업데이트

WooCommerce에서 바리에이션 선택 시 제품 페이지 가격 업데이트

WooCommerce를 사용하여 제품 페이지 자체에 업데이트된 가격을 표시하는 데 몇 가지 문제가 있습니다.

기본적으로 커스텀 빌더 페이지는 사용자가 다양한 옵션(또는 이 경우 변형)을 선택하여 장바구니에 추가하면 올바른 가격이 계산됩니다.다 잘 될 거야.

제가 안고 있는 문제는 그들이 옵션을 바꿀 때 화면에 가격을 표시하기를 원한다는 것입니다.

그래서 6m 길이의 블루 아이템을 선택했다고 칩시다.가격은 100파운드입니다만, 1m 길이의 레드 아이템을 선택하면 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>

어떤 도움이라도 주시면 감사하겠습니다!

질문을 더 자세히 업데이트해야 할 경우 업데이트 할 수 있습니다.그냥 간단하게 하려고요!

사이먼

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>

이게 도움이 됐으면 좋겠는데?

언급URL : https://stackoverflow.com/questions/42394759/updating-the-price-on-product-page-when-variations-are-chosen-with-woocommerce