Question

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

我的变体输出为按钮/ hrefs，但我不知道如何更改变体选择器以使它们像select下拉列表中那样正常运行。我认为这是当前jQuery选择调用的主题。

现有工作选择变体

<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

不要使用选项选择器代码。这个练习没用，
使用Liquid JSON过滤器获取产品的副本
自己完成产品选项和变体并构建按钮。

现在，您已使用上述代码替换了所有问题，并为每个可用变体提供了一个干净，可行的按钮解决方案。

Answer 2

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

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

将href变为变体选择器 - Shopify

2 个答案: