Shopify Question posted in
The Shopify help center can be found here.

Ajax POST request to Shopify's /cart/add.js always returning on error callback function

$.ajax({
                                    type: 'POST',
                                    url: '/cart/add.js',
                                    data: {
                                        quantity: 1,
                                        id: form_data
                                    },
                                    success: function(response) {
                                        console.log('in success');
                                        var url = $("#af-btn").attr("href");

                                        window.location.href = $("#af-btn").attr("href");
                                    },
                                    error: function(response) {
                                        console.log(response + "in error");
                                        var url = $("#af-btn").attr("href");

                                        //window.location.href = $("#af-btn").attr("href");

                                    },
                                    complete: function(response) {
                                        console.log(response);
                                    }
                                });

Above is my AJAX request. Below is the response Object.
Object Response shows 200 OK response
Add to cart to shows anonymous behavior, sometimes product gets added and sometimes product is not added. Can’t figure it out. Any ideas?
Below is the form_data
Form Data

How I retrieve its value,

var form_data = $('form[action="/cart/add"]').find('select[name="id"]').find(":selected").val();
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This is how I solved it for using the Shopify Ajax Api in Shopify app whose script was added through Shopify Admin API ScriptTag.

    1- Load Shopify jQuery Ajax Api Wrapper

    function loadShopifyAjaxApiScript()
{

var script = document.createElement("script");
script.rel = "text/javascript";
script.src = "https://cdn.shopify.com/s/assets/themes_support/api.jquery-0ea851da22ae87c0290f4eeb24bc8b513ca182f3eb721d147c009ae0f5ce14f9.js";
document.getElementsByTagName("head")[0].appendChild(script);

}

    2- Then use it like below : 

                Shopify.addItem(variantId , 1 , function () {
            console.log('success');
        });

    Resource Link : API jQuery Ajax Shopify Sandbox


  2. 0

    The standard AJAX call was throwing errors for me as well in one instance( even thought the product was included in the cart ).

    So instead I used their API for the AJAX call. Here is a link to all of the functions: http://mayert-douglas4935.myshopify.com/pages/api

    For example adding the items is easy as:

      Shopify.addItem($productVal, $productQTY, function(){
    // Do Something here once the product is added
    console.log('Success!!!')
  });

    PS:

    Have in mind that you will be required to include this script in order to have access to the calls:

    {{ 'api.jquery.js' | shopify_asset_url | script_tag }}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search