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>