[英]Dynamically Call Shopify Product ID With Jquery Checkbox Type Add To Cart
*解决方法是最根本的*我对此有一些麻烦。
这是我所拥有的:
我在产品页面上有一个自定义加售,自定义是指:
加售复选框:
<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>
这样一来,我只需要包括一个,它便会基于collection调用自动生成。
我的问题:
我在Jquery帖子中动态生成ID: 262626
时遇到了麻烦(这就是添加正确产品的方式)
我不知道。
在这种情况下,有没有一种方法可以动态调用产品/变体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>
完美运作-希望对任何人有帮助。
尝试-在“产品”页面上有效
$(document).ready(function(){
var idProduct = $('#ProductSelect-product-template').val();
console.log(idVar);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.