jquery - Adding product without page refresh in shopify

Solution:

The answer is yes, but what to change deeply depends on your theme.

In general to update the cart you send an ajax request similar to this

for (var i = 0; i < variantsId.length; i++) { // let's say you have an array of the variants you want to add to the cart and the matching quantities
    items.push({
        id: variantsId[i],
        quantity: quantities[i],
        properties: properties[i] || {}
    }) // properties is optional
}
$.ajax({
    type: 'POST',
    url: '/cart/add.js',
    data: {
        items: items
    },
    dataType: 'json',
    beforeSend: function() {
        //show Loading
    },
    success: function(data) {
        // update the cart. Here you may even want to call the cart.js endpoint
    },
    error: function(e, status, errorThrown) {
        //show error
    }
});
Copy code

Check this page for more js apis: https://shopify.dev/api/ajax/reference/cart (https://shopify.dev/api/ajax/reference/cart)

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.