AJAX API - '/cart/add.js' not adding correct variant consistently

pkavanaghjr
New Member
5 0 0

Hello,

I am using the AJAX API /cart/add.js to dynamically add products to the cart in my store. When I fire the add to cart method, the return data on "/cart/add.js" is always showing the correct variant details. But, when I call a "get /cart.js" after adding the item, it is showing a different variant in the cart, sometimes. I can get my add to cart (ATC) to work about half the time. Sometimes I'll get it to work once, change nothing, hit add to cart again and it will not work the next time.

When the issue happens, the line-item key does not match from the /cart/add.js call to the get /cart.js call. Having a hard time pinning down what the issue is here since it works about half the time.  This is being staged on a development theme so I cannot share the URL, but any help would be greatly appreciated.

I have attached two screenshots.

  1. cart_add.js--return_data.png = The initial add to cart (function shown below) return data
  2. get_cart.js--return_data.png = A GET /cart.js call after the add to cart is finished.

 

Here is the function I am using for add to cart:

/**
 * Add products to cart via AJAX
 *
 * @param {int} variantID - pass the ID of the variant you'd like to add to cart
 * @example
 * fn__cart.addToCart__ajax(variantID);
 */
this.addToCart__ajax = function(variantID){
    console.log('fn__cart.addToCart__ajax() - ',variantID);
    fn__ajax.ajax_status(true);
    // Add to cart data
    var items = {
        'items': [ 
            { 
                'id': parseInt(variantID),
                'quantity': 1 
            }
        ]
    };
    // AJAX add to cart
    $.post(
        '/cart/add.js', items,
        function(data){
            console.log('add to cart - data: ',data);
            fn__ajax.ajax_status(false);
        },
        "json"
    );
};

 

cart_add.js--return_data.png

POST /cart/add.js call return dataPOST /cart/add.js call return data

 

get_cart.js--return_data.png

get_cart.js--return_data.png

0 Likes
_JCC_
Shopify Staff
Shopify Staff
158 21 27

@pkavanaghjr ,

Happy to take a look at this for you. Would it be possible to note the date and time in UTC when this happens? With the date and time of the POST /cart/add.js and subsequent GET /cart.js I can review the logs for any clues as to what might be happening.

Regards,

John

John C | Developer Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes