Multiple data fields aren't recognized in $.WHEN function (JQUERY, SHOPIFY)

Question

Basically, when I run the code below, cart and product are not recognized, and I have no idea why that is.

Here's the code:

$.when(
    $.getJSON(_config.shopifyAjaxCartURL),
    $.getJSON(_config.shopifyAjaxProductURL)
).then(function(cart,product){
    alert ('1 - TOTAL ITEM COUNT: ' + cart.item_count);
    for (var i = 0;  i <= cart.item_count; i++) {
        alert ('2 - LOOPING');
        if (cart.items[i].sku == product.variants[0].sku) {
            productQuantity = cart.items[i].quantity;
            alert ('3 - FOUND IT');
            return false;
        }              
    }           
    alert ('NUMBER 4');
});

Here are the results:

1: Prompts "1 - TOTAL ITEM COUNT: undefined"
2: Does NOT go into loop.
3: Prompts "NUMBER 4"

--

On the other hand, when I remove one of the two parameters for $.when and the function, however, it all works perfectly. For example, this would work:

$.when($.getJSON(_config.shopifyAjaxCartURL)).then(function(cart){  .....

The output would be:

1: Prompts "1 - TOTAL ITEM COUNT: 92"
2: Prompts "2 - LOOPING".
3: Prompts "NUMBER 4" (because it can't find product.variants[0].sku now).

--

Any idea of why the two parameters are conflicting? Any help would be greatly appreciated!

EDIT:

Update to my progress: I went ahead and removed the second parameter, so that I only make one JSON request, and only have the cart parameter. Since I am using scripting for Shopify (using Liquid) I went ahead and tried to use a Liquid object to get the Product SKU, instead of getting it from the Product's JSON. To my surprise, it works, as long I put the Liquid Object in quotation marks. I looks like this now:

 $.when($.getJSON(_config.shopifyAjaxCartURL)).done(function(cart){

          alert ('1 - TOTAL ITEM COUNT: ' + cart.item_count);                                            

          for (var i = 0;  i <= cart.item_count; i++) {     

             alert ('2 - LOOPING');

            if (cart.items[i].sku == "{{product.variants[0].sku}}") {
                productQuantity = cart.items[i].quantity;
                alert ('3 - FOUND IT');
             }

           }

          alert ('NUMBER 4');

However, although it goes through the loop perfectly now, it skips the remaining code entirely. The output is like this:

1: Prompts "1 - TOTAL ITEM COUNT: 92"
2: Prompts "2 - LOOPING".
3: Prompts "3 - FOUND IT!"

...... and it never goes on to NUMBER 4. I suspect it's because the quotation marks are commenting out the rest of the line, after "{{product.variants[0].sku}}"; it seems as though it doesn't fully count the "{{...}}" content as being between quotation marks, somehow.

Do you know why this may be?

Did you try running each of the two parameters independently, or just the first one? — BobRodes, Jul 26 '16 at 00:11
Thank you for your response, I tried the second one independently as well, works just fine if it's by itself. — MigsO, Jul 26 '16 at 15:24

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

There is a difference between using .then and .done. You are trying to use the functionality of .done, but you're using .then. I suggest trying .done. Also, here is some more info:

jQuery deferreds and promises - .then() vs .done()

edited May 23 '17 at 12:32

Community

1
1

answered Jul 26 '16 at 15:37

iHowell

2,263
1
25
49

Thanks so much for your response, I did try `.done` before `.then`, with the same results, I'm afraid :/ – MigsO Jul 26 '16 at 15:39
So far it is obvious that `cart` is not being passed in correctly to the loop. Still working out why that would be. – iHowell Jul 26 '16 at 15:48
It's bizarre indeed - Is there any reason why the second parameter would make it so? – MigsO Jul 26 '16 at 16:04

score 0 · Answer 2 · answered Jul 26 '16 at 21:51

I solved the immediate issue by putting a break on the if() clause (whereas I had previously tried return false in the same place). Here's how it looks:

    $.when($.getJSON(_config.shopifyAjaxCartURL)).done(function(cart){

      alert ('1 - TOTAL ITEM COUNT: ' + cart.item_count);                                            

      for (var i = 0;  i <= cart.item_count; i++) {     

         alert ('2 - LOOPING');

        if (cart.items[i].sku == "{{product.variants[0].sku}}") {
            productQuantity = cart.items[i].quantity;
            alert ('3 - FOUND IT');
            break;
         }

       }

      alert ('NUMBER 4');

Finally, the output is:

1: Prompts "1 - TOTAL ITEM COUNT: 92"
2: Prompts "LOOPING"
3: Prompts "FOUND IT"
4: Prompts "NUMBER 4"

Which works for my purposes for now, but I still don't understand why the two parameters on the $.WHEN function were invalidating one another. Does anyone have insight into that particular issue?

Multiple data fields aren't recognized in $.WHEN function (JQUERY, SHOPIFY)

2 Answers2