JSON Crawler failing when using Airtable as product database

Support
,
#1

Hi there.

I’m building a client ecommerce site. I’ve built the UI in Webflow, and I’m using Airtable as the product database/inventory. I’m pulling the products in via the API and product pages are populated via the API as is the Snipcart add to cart button. I’ve integrated Snipcart and it works well when adding a product to cart and pulling all of the data through.

The pricing validation was failing on payment which I understand is because the cart button is being dynamically populated so Snipcart’s HTML crawler can’t see the data. So I’ve instead changed the data-item-url to an endpoint for my products Airtable, which only returns JSON, however it’s still failing.

Having checked the endpoint in Postman I can see it’s returning the following:

{
    "id": "rec123",
    "fields": {
        "id": "rec123",
        "price": "129.99",
        "url": "https://mysite.com/product?product-id=rec123"
    },
    "createdTime": "2021-12-22T13:29:19.000Z"
}

The only thing I can think that is happening is Snipcart’s JSON crawler is looking for id, price and url but it’s not finding them because they’re within fields. Is this correct? And if so, how might I tell the crawler to look within there?

I’ve tried various parameters on my API calls to Airtable and can’t find a way to dig down within fields, so it always shows in the response.

Thanks!

#2

Hi there! I had some similar problems, so I hope my perspective might help you. As stated in the documentation [JSON Crawler – Snipcart Documentation] your response should be exactly as shown in the example. In case you have multiple products (which I assume is case) I would suggest trying to return a single array with all the products (each object within the array should an object for a product) instead of returning a unique endpoint for each product, though I guess this might case some delay during order validation if you have a huge amount of products. I don’t think its possible to change the behavior of the crawler. This would require a re-engineering on the Snipcart bundle. Even if it could be done, it would require a certain degree of hardship. However, a member from the team could verify or dismiss this claim. I have no experience with Airtable or even Webflow for that matter. I suggest if possible to change the object (or array) you return. An example could be the following:

Blockquote
const response = await fetch(‘http://your-end-point’);
const jsonData = await response.json();
const {data} = jsonData;
const dataResults = data.map(d => {
const dataobj = {
id: JSON.stringify(d.id),
price: d.attributes.Price.toFixed(2),
url: “http://your-return-endpoint”
}
return (dataobj);
});
return(dataResults)

This whole block should be wrapped in an async function. I used this approach with serverless functions and it worked alright. I don’t know if this could work with Airtable. An alternative would be to deconstruct the object and only keep the {fields}. In fact, this might be easier. If you can provide an insight on how Airtable return this endpoint, I might be able to provide a more concrete example. If none of this helps, as far I can understand, you should be somehow able to change the Schema in Airtable.

Best,
Kris