0

So I've been loosing my mind with this issue for well over a day now, I've written a simple API call in liquid to fetch the stock count for items in cart, this works fine...

My issue is in trying to use said data on the front end, below is fairly basic JS/JQUERY, for some reason the code works fine on page load but any other time the code is triggered e.g. on cart popup or add to cart the get request just returns undefined, there are no console errors.

API call data

{39634393366699 :1}

HTML ELEM

<p class="cart-stock-message" data-cart-qty="7" data-variant-id="39634393366699"></p>

JS

 $(".cart-stock-message").each(function(){
                          
                          var varID = $(this).data("variant-id");
                          var cartQty = $(this).data("cart-qty");
        
                          var message = $.get("/pages/stockdata", function(data, status){
                            
                            var cartItemMaxQuantities = data;
                            
                             for(var id in cartItemMaxQuantities){
                              if(id == varID){
                                var count = cartItemMaxQuantities[id];
                                if(cartQty > count){
                                 return "Note: " + count + " available for immediate dispatch, the remainder will be placed on back order.";
                                }
                              }
                            }
                          });                         
                          
                        $(this).text(message);

Whenever I call that JS code, whether its in a function or via an event listener it fails.

M T
  • 136
  • 1
  • 8
  • All of that stuff after the get should appear in the callback scope. – danh Jul 08 '22 at 14:25
  • Any code that depends on `cartItemMaxQuantities` must be present in the `$.get` callback or be called from there. – trincot Jul 08 '22 at 14:25

0 Answers0