jquery - jQuery を使用して Shopify バリアントを編集する

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の構文がどれほど大きいかはわかりませんが、私は彼らのフォーラムに行きましたが、うまくいきませんでした. ご不明な点がございましたら、お気軽にお問い合わせください。