Shopify: Remplacement de boutons radio produit avec menu déroulant Select

Question

Avec Shopify Je suis en train de modifier mon modèle de produit pour afficher une liste de sélection déroulante au lieu des boutons radio pour mes variantes de produits. J'ai réussi à le faire, mais lorsque vous essayez d'ajouter un produit au panier de la liste, il dit: « Non ID variante a été adoptée. »

Voici le code pour leurs boutons radio:

<ul id="product-variants">
            {% for variant in product.variants %}
            <li>
              {% if variant.available %}
                <input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" style="vertical-align: middle;" {%if forloop.first%} checked="checked" {%endif%} />
                <label for="radio_{{variant.id}}"><span class="sku">{{ variant.sku }}</span>  {%if variant.title != 'Default' %}{{ variant.title }} for {%endif%}  <span class="price">{{ variant.price | money_with_currency }}</span></label>
              {% else %}
                <del style="margin-left: 26px">{{ variant.title }}</del>&nbsp;<span>Sold Out!</span>
              {% endif %}
            </li>
            {% endfor %}
          </ul>

Voici le code pour mon menu déroulant sélectionner à ce point:

<select id="product-variants">
            {% for variant in product.variants %}
            <li>
              {% if variant.available %}
                <option value="{{variant.id}}" selected="selected"><span class="sku">{{ variant.sku }}</span>  {%if variant.title != 'Default' %}{{ variant.title }} for {%endif%}  <span class="price">{{ variant.price | money_with_currency }}</span></option>
              {% else %}
                <del style="margin-left: 26px">{{ variant.title }}</del>&nbsp;<span>Sold Out!</span>
              {% endif %}
            </li>
            {% endfor %}
          </select>

Merci,

Wade

Answer 1

https://help.shopify.com/themes/development/templates / -liquide produit

Ce wiki a la réponse à ma question.