将 href 变成变体选择器 - Shopify

Question

我正在努力将我的 select 变体转换为按钮格式。各种选项显示为使用 select 但是我试图将它们更改为图像块并让它们可选择。

我的变体输出为 buttons/hrefs，但我不确定如何更改变体选择器以使它们像当前在 select 下拉列表中那样发挥作用。我认为它是当前 jQuery 选择调用的主题。

现有工作 Select 变体

<select id="product-select-{{ product.id }}" name="id" {% if product.variants.size == 1 %}class="single-option-selector"{% endif %}>
          {% for variant in product.variants %}
            <option {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
          {% endfor %}
</select>

     $(function() {    
              $product = $('#product-' + {{ product.id }});

              new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json }}, onVariantSelected: selectCallback{% if product-form == 'product' %}, enableHistoryState: true{% endif %} });          

            });

我创建的 href 输出，我需要将其制作成变体选择器。

{% for variant in product.variants %}

     <div class="one-third column alpha thumbnail basket-select" onclick="myFunction()">

      <div class="info"> 

          <img src="//cdn.shopify.com/s/files/1/0924/5464/{{ variant.image }}">

          <span class="title"> {{ variant.title }}</span> 
          <span class="price">{{ variant.price | money }}</span>

      <div class="quick_shop action_button" style="display: none;">Select Box</div>
      </div>

     </div>

    {% endfor %}

我尝试创建一个单独的 jQuery 方法，但没能成功。有什么建议吗？

Answer 1

不要使用选项选择器代码。对这个练习没用
获取使用液体 JSON 过滤器的产品副本
亲自浏览产品选项和变体并构建您的按钮。

现在，您已将上述代码中的所有问题替换为针对每个可用变体的干净、可行的按钮解决方案。

Answer 2

我通过使用 option_selection.js 的更新版本将 select 框切换为单选按钮来解决这个问题。然后我适当地设计了它们

https://cdn.shopify.com/s/shopify/option_selection.js?e90f577220d8b5f6b4fa5679a9ae14e9a536abf5

将 href 变成变体选择器 - Shopify

Turn href into variant selector - Shopify

jquery

shopify