Drowning in 404 Errors with Shopify AJAX API: A Lifeline, Anyone?

[nuwud]

Hey Folks,

I hit a wall with this script I've been toiling over. No matter what I try, I keep getting slammed with this 404 error at the cart/add.js endpoint when I'm wrestling with the Shopify AJAX API. I swear, it's making me want to rip my hair out!

I've been digging around and stumbled upon these:

• Shopify Cart API Docs
• All About Locale-Aware URLs on Shopify
• Shopify Community Discussion on JavaScript Cart Functions (By the way, is jQuery still a thing or am I behind the times?)

I even tried going with: /en/cart/add.js But no dice there either.

I figured it can't hurt to reach out... Anyone got any tips or tricks on how to work with the Shopify AJAX API to add products as an add-on to another item or variant, and have it all show up nicely in the cart with the form data? Seriously, any help or nudge in the right direction would be a lifesaver.

Thanks a million!

[PaulNewton]

shopify-scripts are for a defunct checkout feature being replace with shopify-functions.

checkout-scripts are not about arbitrary javascript.

Your probably submitting a non-existent ID to the endpoint, if the product-variant makes sure your passing it's ID and not the ID of the product.

Beyond that always keep other people in mind by providing reproducible detail, others cannot see what you see or know how you know it unless you actively communicate.

Always provide tested publicly accessible inspectable urls,  always test such links in the way someone else would view them by using a different browser or incognito/private with a clean cache to ensure access & reproducibility.

jquery still exists though has be supplanted by javascript features like .querySelector and .fetch ,etc.

When why and where to use jquery is a topic for web research.

Review the Dawn theme implementations for examples of modern ajax and UI updating https://github.com/Shopify/dawn/ 

[nuwud]

This is great info!

Thanks so much!!

[Made4uo-Ribe]

Hi @nuwud 

I assume you know javascript code. You should be able to use this code below to add the product or variant. 

let formData = {
 'items': [{
  'id': 36110175633573,
  'quantity': 2
  }]
};

fetch(window.Shopify.routes.root + 'cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(formData)
})
.then(response => {
  return response.json();
})
.catch((error) => {
  console.error('Error:', error);
});

You can also use this, just change the id and the quantity. 

fetch('cart/add?id=44132404560157&quantity=1&id=44132404887837&quantity=1')

If you refresh the page, the HTML should update. If you want to update without refreshing, you might want to read your theme codes and see where you can insert the code. 

I recommend to NOT use jquery if your theme does not support it. It will make your website slower. 

I hope I helped. Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[nuwud]

Thanks! I will apply this to what I have and let you know how it worked out.

[nuwud · Accepted solution]

Alright, folks!! I have good news. I got it to work!!

And, as promised, I return to tell the tale.

TLDR: ButtonID was off and needs a product variant in order to add the product; won't work without variantID.

Firstly, thanks to those who chimed in.
Your help, helped me find the problem after many hours of going back and forth with this thing.
Knowing that someone else knew exactly how it worked helped me feel grounded in knowing it had to be some other issue if it was not that part of the script.
This is my first go with Shopify 2.0 and I was freaking out over this for over a week until I figured it out.

The issue was multifaceted.

For one, I had the wrong add-to-cart button id.
I am using the Symmetry theme, and the button ID was tucked away in the theme's customizer.
I went to the product page template for the item I was working on, clicked on the Product Pages Section Block, and noticed all the settings to the right of the screen.  
Scrolled down to the Theme Settings portion and found the Shopify Shop ID and the Order Button ID along with some other interesting settings.
Finding that Button ID was crucial and led to finding the other errors that helped solve the problem.

Next, I found out that you can't add a regular Shopify product with AJAX API. Good to know... Yeesh!
I kept looking for endpoints without realizing that it required a variant ID, not a product ID.

These posts helped me figure it out:
https://community.shopify.com/c/technical-q-a/ajax-api-cart-change-js-endpoint-wrong-documentation/m...

https://community.shopify.com/c/technical-q-a/how-to-add-an-item-to-the-cart-programmatically-using-....
https://community.shopify.com/c/subscriptions-apis/why-no-variant-id/td-p/1848012

Turns out if you read the documentation a little more carefully, it says ID is variantID.
Guess I glossed over that part when I read it the first 50 times.
https://shopify.dev/docs/api/ajax/reference/cart

I also embedded the HTML/Liquid FORM code directly in my product template instead of the custom Liquid block in the Customizer. 
I also moved my JavaScript/AJAX to the bottom of my theme.js file.
And of course, my CSS went into my site's CSS file.
(The custom CSS file didn't work so good, so I use the main one even if it is not best practice)

Thanks again for all the help! 
I certainly appreciate it! 

[aidendev]

for making ajax post requests to external APIs, has anyone figured out on how to do this?

Last year I managed to make ajax post requests without issue, but now I keep getting 404s. I'm not looking to leverage shopify APIs but instead trigger my backend services. Anyone that can help?

[WebgurusDEV]

In our case, 404 Code was being received because the product had no variant added. You can't add to cart a product.id, so then you need to use product.first_available_variant.id.

That was the fix.