shopify 顯示選定的變體價格

Question

我已將產品變體呈現為液體上的單選按鈕。 現在我正在嘗試聆聽變體的變化並相應地呈現不同的價格。 但是，我不知道如何在這里收聽變體的變化。 這是我的代碼：

<form>
   {% for product_option in product.options_with_values %} 
      {{ product_option.name }}
     
        {% for value in product_option.values %}
            <input type="radio" id = "{{ value }}" name="{{ product_option.name}}" value="{{ value }}" >
            <label for="{{ value }}">{{ value }}</label>  
        {% endfor %}
        <br>
    {% assign current = product.selected_or_first_available_variant %}
    {% endfor %}
    <p>Price: {{current.price}} </p> 
    <input type="number" min="1"> 
    <button type="submit">Add to Cart</button>
</form>  

價格僅顯示第一個可用變體。 即使我選擇不同的單選按鈕選項，變量價格也不會更新。

Answer 1

歡迎來到堆棧溢出

理想情況下，您可能應該為您的聽眾使用一些類，因為頁面可以有不同的單選按鈕，甚至可能是其他形式。

下面可能會讓你朝着正確的方向前進。

<form>
   {% for product_option in product.options_with_values %} 
      {{ product_option.name }}
        {% for value in product_option.values %}
            <input class="option" type="radio" id = "{{ value }}" name="{{ product_option.name}}" value="{{ value }}" >
            <label for="{{ value }}">{{ value }}</label>  
        {% endfor %}
        <br>
    {% assign current = product.selected_or_first_available_variant %}
    {% endfor %}
    <p>Price: <span id="variantPrice">{{current.price}}</span></p> 
    <input type="number" min="1"> 
    <button type="submit">Add to Cart</button>
</form> 

您沒有提到您是否使用 jquery。 我會假設你是。

<script>
  $( document ).ready(function() {
     // Load all product data to an object
     var productData = {{ product | json }}; 

     // Listen to radio button updates and trigger a function to identify the variant
     $('.option').change(function() {
        idSelectedVariant();
     });

     function idSelectedVariant(){
         //1. Loop through the options and identify the selected options
         //2. Once the selected options are identified, loop through the variants in the productData object and identify the selected variant by checking the variant options
         //3. Keep in mind that not all product variants are going to have 3 options all the time. Some products can have 1 or 2 options as well.
         //4. Once the relevant variant is identified display the variant price by updating the content in the variantPrice span.
     }
  });
</script>