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.

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!

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?

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

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);
  });

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);
});

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