I’ve seen a few posts on this forum showing how to request with $.ajax, but I’m hoping to avoid jQuery. Any advice on how to lay out the data for a pure js fetch?
Best answer by nate-klaviyoView original
@bethanybp , there shouldn’t be much difference between ajax, axios, or fetch. You’ll just need to use the correct terminology when building out the request. The data in the payload should be the same but the different technologies use certain terms to indicate the HTTP verb for instance.
jQuery uses “type” where fetch uses “method”. Just reference the docs for fetch and you should be able to translate the ajax example. If you run into a specific error feel free to post it here.
Hi there, I think this is what you are looking for:
Hope this helps!
Thank you so much! I really appreciate the speedy replies. I am having trouble with CORS, though. When I use the above code, I get a few errors, including: “Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://a.klaviyo.com/onsite/components/back-in-stock/subscribe. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).”
Is it possible to make this request from my Shopify frontend?
Since the code shared by
@nate-klaviyo is ajax, this should be executable via your Shopify frontend.
Can you share with us the exact code you are using while omitting Klaviyo account ID to take a look? In addition, I would also recommend trying the code below as an alternate solution.
I hope this helps!
Thanks to everyone for the replies. Here’s the code I’m trying. With this, I get cross-domain errors. Attaching a screenshot of the errors.
What happens if you try sending as x-www-form-urlencoded instead of json like this:
Thank you Nate!! That totally works. Many many thanks!