javascript - 使用 Jquery 复选框类型动态调用 Shopify 产品 ID 添加到购物车

Question

* 解决方案在底部 *我在这方面遇到了一些麻烦。

这是我所拥有的:

我的产品页面上有自定义追加销售，自定义是指:

追加销售复选框:

    <ul class="upsell" style="margin-left:0px; margin-top:5px;">
    <li>
    <label>
    <img src="https://cdn.shopify.com/s/files/1/0386/0093/t/15/assets/.jpg?  14998" width="40px" height="40px" > 
     <input type="checkbox" id="chks1"/><span>Product Title <span>$9.99</span>         </span></label>
   </li>
   <li>
   <label>
   <img src="https://cdn.shopify.com/s/files/1/0386/0093/t/15/assets/.jpg?14998" width="40px" height="40px" > 
      <input type="checkbox" id="chks1"/><span>Product Title <span>$9.99</span>   </span></label>
    </li></ul>

和 Jquery:

   <script>
   function triggerChange(){
   $('#chks1').trigger("change");
   }
   $('#chks1').change(function() {
   if(this.checked) {


  jQuery.post("/cart/add.js", {  quantity: 1,  id: 262626  });
   } else {

              jQuery.post('/cart/change.js', { quantity: 0, id: 2626262 });
    }
    });


  </script>

我的问题是它的手动方式...我有太多的追加销售，以至于我不得不将上面的内容显示近 50 次，包括片段中的 jquery 和复选框。

所以昨天我尝试了这个:

  <ul class="upsell" style="margin-left:0px; margin-top:5px;">
   {% for product in collections.name.products limit:4 %}
   <li{% cycle ' style="clear:both;"', '', '', ' class="last"' %}>
   <label>
   <img src="{{ product.featured_image |  product_img_url: 'thumb' }}">

    <input type="checkbox" id="chks{{ forloop.index }}"><span>{{   product.title }}                        <   span>  {{ product.price | money }}  </span></span>       </label>
    </li> 
  {% endfor %}
   </ul>
  </div>

  <script>
   function triggerChange(){
   $('#chks1').trigger("change");
   }
   $('#chks1').change(function() {
   if(this.checked) {


  jQuery.post("/cart/add.js", {  quantity: 1,  id: 262626  });
   } else {

              jQuery.post('/cart/change.js', { quantity: 0, id: 2626262 });
    }
     });


    </script>

这使得我只需要包含一个，它会根据收集调用自动生成。

我的问题:

我在动态生成 ID 时遇到问题:262626 在 Jquery 帖子中(这是添加正确产品的方式)

我想不出来

有没有办法在这种情况下动态调用产品/变体 ID？

*********************************解决方案****************** *********

想出来了——这是我想出的:

   <ul class="upsell" style="margin-left:0px; margin-top:5px;">

    {% for product in collections.atc-cart-checkbox.products limit:4 %}


   <li{% cycle ' style="clear:both;"', '', '', ' class="last"' %}  >
  <label>
   <img src="{{ product.featured_image |  product_img_url: 'thumb' }}">

   <input type="checkbox"  id="product-{{ product.variants.first.id }}" name="id" value="{{ product.variants.first.id }}" class="product-select-{{ product.id }}"/><span>{{ product.title }} <span class="upsellprice">
 {{ product.price | money }}<span class="was_price"> {% if product.price < product.compare_at_price_min %}
  {{ product.compare_at_price_min | money }}{% endif %}</span></span></span>    </label>
  </li> 

  <script type="text/javascript">

                 $('#product-{{ product.variants.first.id         }}').change(function() {
                   if(this.checked) {
                      jQuery.post("/cart/add.js", {  quantity: 1,  id: {{   product.variants.first.id }} });
                   }
                   else {
                      jQuery.post('/cart/change.js', { quantity: 0, id: {{ product.variants.first.id }} });
                   }
                });
              </script>
        {% endfor %}


    </ul>

完美运行——希望对任何人都有帮助。

Answer 1

尝试-它在产品页面上工作

$(document).ready(function(){
    var idProduct = $('#ProductSelect-product-template').val();
    console.log(idVar);
});