Question

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

但我目前的主题显示选项为下拉菜单。我想如上所述列出它。任何人都可以帮助我知道如何渲染它像上面的链接。只需要知道模板代码。我将自己研究CSS部分。

{％if product.options.size＆gt; 1％}

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

{％endif％}

Answer 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>

Answer 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 %}

Answer 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>

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

3 个答案: