shopify商品ページFORMのselect出力に関して

Question

お世話になります。

今回shopifyテーマの開発でご質問があり、投稿させて頂きました。

product-template.liquidの
formの箇所でradioボタンで選択し、選択したバリエーションがカートに入るというテーマをベースに開発しています。

しかし、このFORMの部分でradioボタンを選択すると、selectの内容が変わってその内容がカートに受け渡されるのかと思うのですが、
テーマをカスタマイズしていたところradioボタンを選択してもselectの内容が切り替わらずカートに情報が一番初めに表示されている商品情報しか受け渡されなくなりました。

このradioボタンを選択してselectの内容を変更させるには、どの様にすればよいのでしょうか？
radioボタンで選択

!明](07808c6221e6eb47cccd6081974c99bc.png)

本来は、sizeやColorのradioボタンをクリックすると
M/ブラックと記述されている箇所が、切り替わります。

中にはバリエーションが格納されています。

この切り替わるselectのHTML出力は以下です。

<select name="id" id="ProductSelect--product-template" class="product-single__variants no-js">
                
                  
                    <option selected="selected" data-sku="100005-120-200" value="36">
                      M / ブラック
                    </option>
                  
                
                  
                    <option data-sku="100005-120-250" value="32">
                      M / ベージュ
                    </option>
                  
                
                  
                    <option data-sku="100005-120-320" value="38">
                      M / グリーン
                    </option>
                  
                
                  
                    <option data-sku="100005-130-200" value="36">
                      L / ブラック
                    </option>
                  
                
                  
                    <option data-sku="100005-130-250" value="34">
                      L / ベージュ
                    </option>
                  
                
                  
                    <option data-sku="100005-130-320" value="32">
                      L / グリーン
                    </option>
                  
                
              </select>

以下がselectの部分のliquidの記述です。

<select name="id" id="ProductSelect--{{ section.id }}" class="product-single__variants no-js">
                {% for variant in product.variants %}
                  {% if variant.available %}
                    <option {% if variant == product.selected_or_first_available_variant %}
                      selected="selected" {% endif %}
                      data-sku="{{ variant.sku }}"
                      value="{{ variant.id }}">
                      {{ variant.title }}
                    </option>
                  {% else %}
                    <option disabled="disabled">
                      {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                    </option>
                  {% endif %}
                {% endfor %}
              </select>

FORMの全体は以下です

{% form 'product', product, class:form_classes, id:form_id %}
              {% unless product.has_only_default_variant %}
                {% for option in product.options_with_values %}
                  <div class="radio-wrapper js product-form__item">
                    <label class="single-option-radio__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}"
                      for="ProductSelect-option-{{ forloop.index0 }}">
                      {{ option.name | escape }}
                    </label>
                    {% if section.settings.product_selector == 'radio' %}
                      <fieldset class="single-option-radio"
                        name="line_item.properties{{ option.name | handleize }}"
                        id="ProductSelect-option-{{ forloop.index0 }}">
                        {% assign option_index = forloop.index %}
                        {% for value in option.values %}
                          {% assign variant_label_state = true %}
                          {% if product.options.size == 1 %}
                            {% unless product.variants[forloop.index0].available  %}
                              {% assign variant_label_state = false %}
                            {% endunless %}
                          {% endif %}
                          <input type="radio"
                            {% if option.selected_value == value %} checked="checked"{% endif %}
                            {% unless variant_label_state %} disabled="disabled"{% endunless %}
                            value="{{ value | escape }}"
                            data-index="option{{ option_index }}"
                            name="option{{ option.position }}"
                            class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
                            id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
                          <label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>{{ value | escape }}</label>
                        {% endfor %}
                      </fieldset>
                    {% else %}
                      <select class="single-option-selector__radio single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
                        {% for value in option.values %}
                          <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value | escape }}</option>
                        {% endfor %}
                      </select>
                    {% endif %}
                  </div>
                {% endfor %}
              {% endunless %}

              <select name="id" id="ProductSelect--{{ section.id }}" class="product-single__variants no-js">
                {% for variant in product.variants %}
                  {% if variant.available %}
                    <option {% if variant == product.selected_or_first_available_variant %}
                      selected="selected" {% endif %}
                      data-sku="{{ variant.sku }}"
                      value="{{ variant.id }}">
                      {{ variant.title }}
                    </option>
                  {% else %}
                    <option disabled="disabled">
                      {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                    </option>
                  {% endif %}
                {% endfor %}
              </select>

              {% if section.settings.quantity_enabled %}
              <div class="product-single__quantity">
                <label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label>
                <input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">
              </div>
              {% endif %}

              <div class="product-single__add-to-cart{% if section.settings.add_to_cart_button_size == 'large' %} product-single__add-to-cart--full-width{% endif %}">
                <button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--add-to-cart{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
                  <span class="btn__text">
                    {% if current_variant.available %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% else %}
                      {{ 'products.product.sold_out' | t }}
                    {% endif %}
                  </span>
                </button>
                {% if section.settings.enable_payment_button %}
                  {{ form | payment_button }}
                {% endif %}
              </div>
            {% endform %}

FORMの基本的な仕組みを理解していないから問題なのかも知れませんが、何卒お力添え頂けますと幸いです。

Comments

[firegrape]

画面キャプチャがあると、理解が早くなるというのと、
こちらが近い内容だと思いますので、すこし見ておくと
いいかもしれません。
http://monoque.org/web/javascript/radiobutton-selectbox/

Answer 1

product.variants
この値がポイントになっていると思いますので、
それぞれ選択したときに上記に何が格納されているか
{{product.variants | json}}
こんな感じで確認できないでしょうか？

Comments

[pasomtr]

ご連絡が遅くなり申し訳ございません。

ありがとうございます！！
中身を確認してスクリプト書き直しました！