add.js not found 404

Shopify Expert
3 0 0

Went through every post relating to my issue but none of them help. Here's a demo of my problem:


I want the main product as well as as the extras products that are present in the dropdowns above the `add to cart` button to be added to the cart as the `add to cart button` is clicked. I am getting the product ids alright and i am using the follwing code for making the AJAX POST:


$(".product-extras-dropdown").on("change", function() {
    var productId = $(this).find(":selected").data("product_id");
    if(productId != "NA" && $(this).hasClass("product-extras-adapters")) {
        var productAdapterPrice = $(this).find(":selected").data("product_price");
        console.log('adapter', productAdapterPrice);
        productArray.splice(0, 1, $(this).find(":selected").data("product_id"));
    else if(productId != "NA" && $(this).hasClass("product-extras-soclean-filterkit-stack")) {
        var productSoCleanPrice = $(this).find(":selected").data("product_price");
        console.log('so clean', productSoCleanPrice);
        productArray.splice(1, 1, $(this).find(":selected").data("product_id"));
    productArray = productArray.filter(function() { return true; });

$(".product-single__form").on("submit", function(event) {
    console.log(productArray, "huh");
    for(let i = 0; i < productArray.length; i++) {
        var id = productArray[i];
    //     CartJS.addItem(productArray[i][0], productArray[i][1], {
    //       "success": function(data, textStatus, jqXHR) {
    //           console.log('Added!', data, textStatus, jqXHR);
    //         //   $(".frequent-adding-cart-text").addClass("active");
    //         //   $(".frequent-add-cart-text").removeClass("active");
    //       },
    //       "error": function(jqXHR, textStatus, errorThrown) {
    //         //   console.log('Error: ' + errorThrown + '!');
    //         console.log("error", jqXHR, textStatus, errorThrown);
    //       }});
    //   }

      var data = {
          id: productArray[i],
          quantity: 1
	      type: 'POST',
          url: '/cart/add.js',
	      dataType: 'json',
	      data: data,
	      success: function(res){
	        console.log(res, 90);
         error: function(er) {

As you can see, I am storing the product ids inside an array, running a loop through it and one by one trying to make a POST request to `'/cart/add.js'`. I also tried this with a plugin called Cart.JS. I tried with different other methods like `$.post`, tried to make a post request as soon as the dropdown value changes, tried it with only one product. Nothing works and i get this error every time.

POST 404 (Not Found)

Please note that the product doesn't have any variants. My requirement: When user clicks on Add to Cart, it should add the selected products from the drop downs as well as the main product on the page.


Any help will be hugely appreciated.


Shopify Expert
9871 100 1708

Looking at the code I can see you're not queuing the calls but rather just doing a for loop and trigger all of them in succession. You need to wait until the first add call completes before firing the next. 

★ Winning Partner of the Build a Business competition. ★