Solved

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

nuwud
Shopify Partner
21 1 0

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:

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!

Kindest Regards,
Nuwud
Accepted Solution (1)

nuwud
Shopify Partner
21 1 0

This is an 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! 

Kindest Regards,
Nuwud

View solution in original post

Replies 5 (5)

PaulNewton
Shopify Partner
6273 572 1309

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/ 

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


nuwud
Shopify Partner
21 1 0

This is great info!

Thanks so much!!

Kindest Regards,
Nuwud

Made4uo-Ribe
Shopify Partner
5069 1206 1470

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!

 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


nuwud
Shopify Partner
21 1 0

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

Kindest Regards,
Nuwud

nuwud
Shopify Partner
21 1 0

This is an 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! 

Kindest Regards,
Nuwud