Skip to main content

I’m building a custom Back in Stock UX for a Shopify store using the latest Klaviyo API and I followed the JavaScript example in the docs @ https://developers.klaviyo.com/en/reference/create_client_back_in_stock_subscription.

 

Here is my fetch() call:

 

const options = {
  method: 'POST',
  headers: {
    accept: 'application/json',
    revision: '2023-08-15',
    'content-type': 'application/json'
  },
  body: JSON.stringify({
    data: {
      type: 'back-in-stock-subscription',
      attributes: {
        channels: e'EMAIL', 'SMS'],
        profile: {
          data: {
            type: 'profile',
            attributes: {
              email: 'fetch.test@klaviyo-demo.com',
              phone_number: '+15005550006'
            }
          },
          email: 'fetch.test@klaviyo-demo.com',
          phone_number: '+15005550006'
        }
      },
      relationships: {
        variant: {
          data: {
            type: 'catalog-variant',
            id: '$shopify:::$default:::39986281939057'
          }
        }
      }
    }
  })
};

fetch('https://a.klaviyo.com/client/back-in-stock-subscriptions/?company_id=PUBLIC_API_KEY', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

 

The result is a console error: SyntaxError: Unexpected end of JSON input

 

I do see that in my dev tools network tab that the response code is 202, which the documentation indicates as a successful request, however I do not see the profile get added to my client’s list of profiles (I did test with the old/deprecated API and that worked fine).

 

In the first then() of my fetch() call, if I do a quick console.log(response) before returning the .json() promise, I can actually see the response is JSON and the response.ok property is true, but no matter what I try, the profile does not get added to my client’s list of profiles. I also tried this using the cURL example and that worked right away, saw the profile show up almost immediately.

 

Any help on this would be much appreciated!

@cfxd - I’m not sure if this is what you’re asking.  But, if you are trying to also add the email address as a Subscriber (Profile), I think you need to separately call the Subscribe endpoint.

See here:

Keep in mind that these endpoints will only be used to enqueue a profile to receive back in stock notifications. 

We do not require explicit consent to be recorded in order to send email back in stock notifications. If you want to ensure that an email will be sent even if a shopper has previously unsubscribed from marketing, we recommend you also subscribe the profile to a list using Create Client Subscription on the client and Subscribe Profiles on the server. For SMS, you must always obtain explicit consent using Create Client Subscription on the client and Subscribe Profiles on the server to be able to send the text notifications. To learn more about how consent works in Klaviyo, please review our guide to collecting email and SMS consent.

Documentation Guide:

---
Joseph Hsieh // retentioncommerce.com // twitter: @retenion 

@retention No, that’s not what I’m asking at all. My question is about the Back in Stock endpoint only and I think I was pretty specific about the issues I’m encountering.

Hi @cfxd!

My apologies for the delay here! May I ask if you can confirm that the VariantID you’re using in the API call is valid? That’s one thing that could cause this error.

 

Also, we offer a guide on how to format/troubleshoot this functionality here:

 

It may also be helpful to try making this call using an app-testing platform like Postman, which could allow you to adjust syntax without disrupting your development.

 

Best,

Brian 

@Brian Turcotte I actually figured out the problem—it’s related to the documentation and syntax in the examples. What’s the best way to bring that to someone’s attention so the docs and examples can be corrected?

@cfxd What’s the fix? Struggling with this myself rn. 

@brendan the problem is if the request is successful then the API returns an object rather than a promise.

The JavaScript example @https://developers.klaviyo.com/en/reference/create_client_back_in_stock_subscription treats the response as a promise.

In that page’s JavaScript example, line 37 should be removed altogether. Line 38 can stay as is and you’ll be able to see the successful response object and then carry on however needed.

Using my example from above, I’d just change the last lines to:

fetch('https://a.klaviyo.com/client/back-in-stock-subscriptions/?company_id=PUBLIC_API_KEY', options)
  .then(response => console.log(response))
  .catch(err => console.error(err));

I hope that helps.

@cfxd Amazing.. this makes sense. Gonna check it out. Thanks so much!

Reply


Terms & Conditions