启动主题中的色板

Question

我需要帮助创建我的商店使用启动主题的色样。我能够用每个产品变体的单选按钮替换下拉列表。然而，该页面不会根据所选择的按钮来更新产品sku、id等。

在主题文件的Snippet部分，有一个名为“product-main.iquid”的文件，它指向另一个名为“product-options-dropdown.iquid”的代码片段文件：

文件“product-main.iquid”很长。如果它有帮助，我可以只显示代码的一部分，它指向“product-options-dropdown.iquid”：

{% unless onboarding %}
        {% capture product_form_id %}product-form-{{ form_id }}{% endcapture %}

        {% capture product_form_class %}
          product-form
          {% if selectedVariant.available == false %}product-form-outofstock{% endif %}
          {% if show_spb %}product-form-has-spb{% endif %}
        {% endcapture %}

        {%
          form 'product', product,
          id: product_form_id,
          class: product_form_class,
          data-product-form: form_id
        %}
          <div class="clearfix product-form-nav">
            {% if product.variants.size > 1 %}
              <div class="product-options">
                {% include 'product-options-dropdown' %}

                <div class="selector-wrapper no-js-required">
                  <select
                    class="product-select"
                    name="id"
                    id="product-select-{{ form_id }}">
                    {% for variant in product.variants %}
                      {%- capture option_content -%}
                        {%- if variant.available -%}
                          {{ variant.title }} - {{ variant.price | money }}
                        {%- else -%}
                          {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                        {%- endif -%}
                      {%- endcapture -%}
                      <option
                        {% if variant.id == selectedVariant.id %}selected="selected"{% endif %}
                        data-variant-id="{{ variant.id }}"
                        {% if variant.available %}
                          data-sku="{{ variant.sku }}"
                          value="{{ variant.id }}"
                        {% else %}
                          disabled="disabled"
                        {% endif %}>
                        {{ option_content | strip_newlines }}
                      </option>
                    {% endfor %}
                  </select>
                </div>
              </div>
            {% else %}
              <input
                class="product-select"
                name="id"
                value="{{ product.variants[0].id }}"
                type="hidden"
                data-variant-title="{{ product.variants[0].title }}" />
            {% endif %}

下面是“product-options-dropdown.iquid”的样子。它没有那么长，所以下面是完整的代码：

    {% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
  {% for option in product.options_with_values %}
    {% assign option_index = forloop.index0 %}
    {%- capture option_id -%}
      single-option-{{ form_id }}-{{ option_index }}
    {%- endcapture -%}

    <div class="selector-wrapper js-required">
      <div class="select-wrapper">
        <label
          class="selected-text"
          for="{{ option_id }}"
          data-select-text>
          {{ option.name }}:
        </label>
        <span class="selected-option" data-selected-option aria-hidden="true">{{ option.values | first }}</span>
        <select
          class="single-option-selector"
          id="{{ option_id }}"
          data-option-select="{{ form_id }}"
          data-option-index="{{ option_index }}">
          {% for value in option.values %}
            <option
              value="{{ value | escape }}"
              {% if option.selected_value == value %}selected="selected"{% endif %}>
              {{ value }}
            </option>
          {% endfor %}
        </select>
      </div>
    </div>
  {% endfor %}
{% endunless %}

我认为如果我使用这个文件作为模板，我可以为单选按钮创建一个类似的文件，而不是一个下拉列表。我还需要让“product-main.iquid”指向这个新文件。所以我创建了“color-swatch.iquid”：

{% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
  {% for option in product.options_with_values %}
    {% assign option_index = forloop.index0 %}
    {%- capture option_id -%}
      single-option-{{ forloop.index }}-{{ option_index }}
    {%- endcapture -%}

    <div class="selector-wrapper js-required">
      
        {%if option.name == "Color"%}
        <label>
          {{ option.name }}
        </label>     
      
      <div class="variant-swatches">
        {% for value in option.values %}
        <input
          class="single-option-selector"
          type="radio"
          name="color"
          id="color-{{ forloop.index }}"
          data-option-index="{{ option_index }}"
          value="{{ value | escape }}"
          {% if option.selected_value == value %}checked{% endif %}/>
           
           <label for="color-{{ forloop.index }}">
              {{ value }}
            </label>
        
        {% endfor %} 
        
      </div>
     {% endif %}
    </div>
  {% endfor %}
{% endunless %}

现在，选择一个选项并不会相应地更新变量。如果有人能告诉我哪里出了问题，并帮我解决这个问题，我将不胜感激！提前感谢！

Answer 1

这是一个复杂的问题，因为每个主题都有自己的结构。我不确定你是否能理解这一点，但Shopify有一个不同的隐藏选择下拉菜单，它实际上在表单中工作。

隐藏的select选项具有变量名称及其ID。您需要做的是，使用JS代码手动触发隐藏的select选项。

要查看隐藏的select选项，请通过浏览器查看并在类名下进行搜索。

no-js

大体上看起来是这样的：

<select name="id" id="ProductSelect-product" data-section="product" class="product-form__variants no-js">