Shopify 产品变体选项显示在单选按钮中答案

【问题标题】：Shopify product variants option display in radio buttonShopify 产品变体选项显示在单选按钮中
【发布时间】：2018-03-05 06:29:16
【问题描述】：

我想将产品变体选项显示为单选按钮，例如enter link description here

但我当前的主题将选项显示为下拉菜单。我想把它列在上面。谁能帮我知道如何像上面的链接那样渲染它。只需要知道模板代码。我将自己处理 CSS 部分。

{% if product.options.size > 1 %}

// how to display the product options with label(like color) and its options(Red,Yellow)

{% endif %}

【问题讨论】：

标签： shopify liquid-layout shopify-app

【解决方案1】：

<div class="product-variants infiniteoptions">
  <ul>{% for variant in product.variants %}
	  <li class="{% cycle 'odds': 'odd', 'even' %}">
		  {% if variant.available %}<input type="radio" name="id" value="{{ variant.id }}" id="radio_{{ variant.id }}" {% if forloop.first %}checked="checked"{% endif %} />
			  <label for="radio_{{ variant.id }}" class="radio">
				  <strong>{{ variant.title | escape }}</strong> for <span class="bold-blue">{{ variant.price | money }}</span>
				  {% if variant.price < variant.compare_at_price %}<del>{{ variant.compare_at_price | money }}</del>{% endif %}
			  </label>
		  {% else %}
			  <input type="radio" name="id" value="{{ variant.id }}" id="radio_{{ variant.id }}" disabled="disabled" />
			  <label for="radio_{{ variant.id }}" class="radio">
				  <strong>{{ variant.title }}</strong> is temporarily unavailable
			  </label>
		  {% endif %}
	  </li>
  {% endfor %}</ul>
</div>

【讨论】：

【解决方案2】：

你可以做这样的事情。注意标签中的 for= 应该与输入中的 id 匹配。

 {% unless product.has_only_default_variant %}
  {% for option in product.options_with_values %}
    <div>  
      {% for value in option.values %}
        <input 
        type="radio" 
        name="{{option.name}}" 
        value="{{ value | escape }}"
        id="{{option.name | handleize}}-{{value | escape | handleize}}">
        <label for="{{option.name | handleize}}-{{value | escape | handleize}}" class="{{option.name | downcase}}">
          {{value}}
        </label>
      {% endfor %}
    </div>
  {% endfor %}
{% endunless %}

【讨论】：

【解决方案3】：

{% comment %}
Filename : product-template.liquid
code for displaying variants as radio buttons instead of select option
Note : Please don't remove existing selectbox, Hide with display options
<div class="selector-wrapper js product-form__item" style="display:none;">
{% endcomment %}

{% unless product.has_only_default_variant %}

  {% for option in product.options_with_values %}
        {% assign my_option =  forloop.index0  %}
    <div>  
      {% for value in option.values %}
        <input  
        type="radio" 
        name="{{option.name}}" 
        onclick="return bala(this.name,this.value, this.id);"
               value="{{ value | escape }}"
        id="SingleOptionSelector-{{ my_option }}"
                              >
        <label for="{{option.name | handleize}}-{{value | escape | handleize}}" class="{{option.name | downcase}}">
          {{value}}
        </label>

      {% endfor %}
    </div>
  {% endfor %}
{% endunless %}    


<!--  Javascript For changing selectbox value with radio button selection -->
 <script>    
    function bala(name, value, id)
    {
      $('#'+id).val(value).trigger('change')
    }  
  </script>

【讨论】：

你能给他解释一下吗？