我正在尝试修改我的 shopify 产品页面，以便在选中产品页面上的复选框时向用户追加销售额外商品。我希望 ajax 购物车打开更新的产品，而不是进入购物车页面。 我该如何解决这个问题？
这是我现在拥有的 HTML 代码：
<div class="d-inline-block py-2 mr-auto col-auto px-0">
<input type="checkbox" id="product-add-on-checkbox" name="product-add-on-checkbox" value="product-add-on-checkbox">
<label for="product-add-on"> <span id="product-add-on-name"></span> </label> <label for="product-add-on-qty"><strong id="product-add-on-price"></strong></label>
</div>
<div class="product-options-bottom border-0 mt-0 d-inline-block col-auto px-0">
<div class="add-to-cart-box">
<div class="input-box">
<input type="text" id="product-add-on-qty" name="product-add-on-quantity" value="1" min="1" class="quantity-selector">
<div class="plus-minus">
<div class="increase items" onclick="var result = document.getElementById('product-add-on-qty'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-plus" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
</div>
<div class="reduced items" onclick="var result = document.getElementById('product-add-on-qty'); var qty = result.value; if( !isNaN( qty ) && qty > 1 ) result.value--;return false;">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-dash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
这是更新购物车的 JS 代码：
var productAddOnHandle = "add-on-product"
var productAddOnId = 0;
var productAddOnQty = 1;
var productAddOnAvailable = false;
jQuery.getJSON('/products/' + productAddOnHandle + '.js', function (product) {
productAddOnAvailable = product.variants[0].available;
if (productAddOnAvailable) {
productAddOnId = product.variants[0].id;
$("#product-add-on").removeClass("d-none");
$("#product-add-on-name").html(product.title);
$("#product-add-on-price").html("+ $" + (product.price_min / 100).toFixed(2));
}
});
$('#add-to-cart-button').click(function (e) {
e.preventDefault();
var productAddOnChecked = $("#product-add-on-checkbox").is(":checked");
if (productAddOnChecked && productAddOnId !== 0 && productAddOnAvailable) {
productAddOnQty = $('#product-add-on-qty').val();
productAddToCart();
} else {
$("form[action='/cart/add']").submit();
}
});
function productAddToCart() {
$.ajax({
url: "/cart/add.js",
type: "POST",
data: {
items: [
{
quantity: productAddOnQty,
id: productAddOnId
}
]
},
dataType: "json"
})
.done(function () {
})
.always(function () {
$("form[action='/cart/add']").submit();
});
}
});