Question

好吧所以我试图弄清楚如何根据某人选择的产品变体使内容显得和消失，并且在这里的一些人的帮助下，我设法获得了使内容出现所需的jQuery代码并根据下拉菜单中的所选选项消失，并且它在Shopify之外完美运行。唯一的问题是，一旦我尝试将其转移到Shopify，它就无法工作。

以下是Shopify页面上的代码部分：

<form action="/cart/add" method="post">
        {% include 'bracelet-hair' %}<br>     
        {% include 'braid-style' %}<br>
            {% if product.variants.size > 1 %}
            <div id="product-variants">      
                <select id="product-select" name="id">
                    {% for variant in product.variants %}
                        <option value="{{ variant.id }}">{{ variant.title }}</option>
                    {% endfor %}
                </select>
            </div><!-- product variants -->
             {%include 'engraving' %}

这是我的雕刻片段，这是我试图展示的代码和内容。（下面的'269270608'是我的变体ID）

<script>
$("#product-select").change(function(){
 var choice = $(this).val()

 if (choice == '269270608'){

//$('#checkbox').change(function(){
    $('#hide2').removeClass('hidden2');  //remove class here
//});

 }else{
    $('#hide2').removeClass().addClass('hidden2');  //else addclass
 }

});
</script>

<div id="hide2" class="hidden2">    
        <input type="checkbox" name="vehicle" value="Bike" />Engraving?
        <br>    
    Engraving Message:
        <input type="text" name="engraving">
        <br>    
</div>

不确定Shopify的语法有多大，但我没有运气就去了他们的论坛。我感谢任何帮助，如果您需要更多信息，请告诉我。

使用jQuery编辑Shopify变体

0 个答案: