Solved

Back in Stock API

  • 8 July 2021
  • 7 replies
  • 2183 views

Badge +2

Hi all,

Looking at the current API docs, I don’t see a way to create a custom Back in Stock event via javascript fetch request.

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?

 

BF

icon

Best answer by nate-klaviyo 15 July 2021, 23:07

View original

7 replies

Userlevel 4
Badge +11

Hello @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.

Badge +3

Hi there, I think this is what you are looking for:

var form = new FormData();
form.append("email", "pizza.dave@mailinator.com");
form.append("platform", "shopify"); //use 'api' if you are using a custom product catalog
form.append("a", "account-id-goes-here"); //your klaviyo account ID
form.append("variant", "variant-id-goes-here"); //the variant ID to subscribe to

fetch("https://a.klaviyo.com/onsite/components/back-in-stock/subscribe", {
"method": "POST",
"headers": {
"content-type": "multipart/form-data"
}
})
.then(response => {
console.log(response);
})
.catch(err => {
console.log(err);
});

Hope this helps!

Badge +3

Hey Beth,

What happens if you try sending as x-www-form-urlencoded instead of json like this:

fetch("https://a.klaviyo.com/onsite/components/back-in-stock/subscribe", {
"headers": {
"accept": "application/json, text/plain, */*",
"content-type": "application/x-www-form-urlencoded;charset=UTF-8",
},
"body": new URLSearchParams({
"a": "your klaviyo account here",
"email": "nateklaviyo@gmail.com",
"platform": "shopify",
"variant": 123456789, //replace with a valid variant ID
"product": 987654321, // '' '' '' '' product ''
}),
"method": "POST",
})
.then(response => {
console.log(response);
})
.catch(err => {
console.error(err);
});

 

Badge +2

Thank you Nate!! That totally works. Many many thanks!

Badge +2

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?

Userlevel 7
Badge +60

Hey@bethanybp,

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.

var settings = {
'type': 'POST',
'url': 'https://a.klaviyo.com/onsite/components/back-in-stock/subscribe',
'data': {
'a': "account-id-goes-here",
'email': "pizza.dave@mailinator.com",
'variant': "variant-id-goes-here",
'product': "product-id-goes-here",
'platform': 'shopify'
},
success: function(result){
console.dir(result);
}
};

I hope this helps!

David

 

Badge +2

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.

var form = {
'data': {
'a': "KLAVIYO ID",
'email': "pizza.dave@mailinator.com",
'variant': "VARIANT ID",
'product': "PRODUCT ID",
'platform': 'shopify'
}
}

fetch('https://a.klaviyo.com/onsite/components/back-in-stock/subscribe', {
method: 'POST',
body: JSON.stringify(form),
headers: {
'Content-Type': 'application/json',
"Access-Control-Allow-Origin":"*"
}
})
.then(response => {
console.log(response);
})
.catch(err => {
console.log(err);
});

 

Reply