Shopify - 在各种选择上显示内联元素答案

【问题标题】：Shopify - Show inline element on varient selectShopify - 在各种选择上显示内联元素
【发布时间】：2018-04-14 22:56:33
【问题描述】：

目前，当在<select> 输入中选择产品的特定变体时，我正在尝试在页面上显示/隐藏内联元素。我已经尝试使用 jquery 多次尝试访问选择但没有运气，甚至尝试过内联 <% if %> 液体标签。任何帮助将不胜感激！

基本上我想要一个textbox 来显示何时选择了两个选项，否则不显示文本框。

以下是我所拥有的：

{% if product.variants.size > 1 %}
      <div id="product-variants" class="card_options">
        <select id="product-select-{{ product.id }}" name="id" class="hidden line-item-property__field">
          {% for variant in product.variants %}
          <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
          {% endfor %}
        </select>
      </div>

      <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" /> 

{% endif %}

现在如果我可以添加类似下面的内容以在选择 option1 或 option2 时添加文本框。

<-- Same as above -->    
{% if product.variants.size > 1 %}
      <div id="product-variants" class="card_options">
        <select id="product-select-{{ product.id }}" name="id" class="hidden line-item-property__field">
          {% for variant in product.variants %}
          <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
          {% endfor %}
        </select>
      </div>

      <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" /> 

{% endif %}
<-- End Same as above -->

<-- New Code -->
{% if variant != option1 %}
   <p class="line-item-property__field" id=card_message>
        <label for="card-message">Card Message:</label>
        <span id="char-counter"></span><span id="message-alert"></span>
        <textarea id="message-textarea" maxlength="250" name="properties[Card Message]"></textarea>
   </p>

{% else %}
<span id="placeholder"></span>
{% endif %}

它应该是这样的：

【问题讨论】：

所以底线你不知道如何用 JS 定位选择并在选择最后 2 个选项时显示文本区域，对吧？但是我在您的问题中没有看到任何 JS 代码，并且您的所有标签都没有指出这是一个 JS 问题。你能告诉我们你根据 JS 逻辑尝试过什么，而不是液体逻辑吗？
您好@drip，我实际上非常了解如何使用 JS 定位选择及其选项。问题是当使用动态变体元素时，似乎很难访问选择及其选项。我创建了一个小提琴，我使用 JS 在最后选择的选项上创建了文本框元素。但是提醒您我尝试了这种方法，但它在 Shopify 上不起作用。 -----Fiddle-----

标签： ruby select shopify liquid variant

【解决方案1】：

更新：显然我的 jQuery 解决方案有效。我只是针对页面上的错误选择。我必须动态检索选择，而不是通过类或 id 找到它。出于某种原因，Shopify 创建了第二个 <select> 输入并隐藏了您在 products.liquid 文档中看到的那个。所以我不得不求助于使用$(".selector-wrapper select").bind('change', function(event) {//do something} 和var selected = $('.selector-wrapper select option:selected').val(); 来检索选项的值。我将使用相同的逻辑链接我创建的小提琴，您只需使用我上面列出的内容对其进行更新。希望这可以帮助任何寻找相同解决方案的人。

Fiddle Demo

【讨论】：