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>