Launch主题中的色板

如何解决Launch主题中的色板

我需要帮助为使用Launch主题的商店创建色板。我可以使用每个产品型号的单选按钮替换下拉列表。但是，页面不会根据所选按钮更新产品的sku，id等。

主题文件的“片段”部分中有一个名为“ product-main.liquid”的文件，该文件指向另一个名为“ product-options-dropdown.liquid”的片段文件：

文件“ product-main.liquid”很长。如果有帮助，我可以向您展示部分代码指向“ product-options-dropdown.liquid”的地方：

{% 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.liquid”的样子。时间不长，所以下面是整个代码：

    {% 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.liquid”指向这个新文件。于是我去创建了“ color-swatch.liquid”：

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

现在，我处于选择一个选项不会相应地更新变体的地步。如果有人可以告诉我我哪里出了问题并帮助我解决此问题，将不胜感激！预先感谢！

解决方法

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

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

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

no-js

大多数情况是这样的：

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