How does Shopify.addItem and all the other Shopify properties work?

Store Design
1

In the past two days I needed to add a functionality to a store that required dynamically adding a product, let’s call it product1, to the cart if the price was between 30€ and 50€, and a product2 if the price was above 50€.

I tried using the shopify jQuery ajax wrapper and use Shopify.addItem(variantID, quantity), but i kept getting an infinite loop with an alert saying that the product was added.

I then tried using this syntax:

jQuery.ajax({
      url: '/cart.js',
      dataType: 'json'
    })
    .done(function(data){
      var newCount = data.item_count;
      cartItemCounter.innerText = newCount;
    });

but when a user would have increased or decreased the quantity of a product in the cart page, reaching one of the limit, the page wouldn’t automatically update adding the desired product. So if a user went directly to checkout, they wouldn’t have the product in the checkout’s products list.

One last thing, I saw a lot the use of a “Shopify.queue” and requestsQueue, what is that for?

Could anybody explain the correct flow of making async ajax calls in shopify themes and how to correctly add and remove items from the cart?

Thanks to anybody helping!

2

Shopify.addItem is a JS function so if you’re calling that and seeing some loop trigger that’s not totally unexpected. Without being able to see what the code does we could only guess but it’s not impossible for that to be the result.

Calling the endpoints directly vs via that existing function will help avoid follow on code triggering but you are right - it won’t automatically update the page. You’ve made an AJAX call so you would need to take that response and update the page elements with the returned new info.

Is it possible to share the url to the shop so we can see the loop?