Apologies if this is the wrong subforum. I know there’s a lot of these threads, so let me explain my situation.
For a project, I’m trying to integrate some data from a third party API, Eventive in this case, into a Webflow collection. We don’t forsee the data we’re retrieving, films in this case, being updated more than maybe one to three times a week, but we’d like to set up something that would listen maybe once a day at least.
Unfortunately, this isn’t as simple as just using Zapier or Integromat. The official Zapier for Eventive isn’t compatible with Webflow, and Integromat doesn’t have Eventive listed.
Hoping I could drum up some solution, I wrote up some code that’s supposed to update if the number of films has changed. For testing purposes, I have the code to load on page load. Not too shockingly, after working out all the kinks, I got something that would convert the third party API to a parsed JSON file, but the actual updating parts were blocked by CORS policy.
Seeing as to how we really don’t want to make more than a few API calls a week, we don’t really want to go through the trouble of setting up a backend server. Is there an easier way to schedule a daily task to run the script, AND not have nintety-something CORS blocks in my console?
Don’t have much of a Webflow site at the moment, as this is still in early development, but just so it’s here:
Read-Only Link: Webflow - Fantastic Fest 2023 Dev Test
I also have the code I’d like to run (give or take a few modifications)
var event_bucket = "EVENTIVE_EVENT_BUCKET";
var public_api_key = "EVENTIVE_PUBLIC_API_KEY";
// Open a new connection, using the GET request on the URL endpoint
fetch('https://api.eventive.org/event_buckets/' + event_bucket + '/films?api_key=' + public_api_key, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
// Begin accessing JSON data here
Object.keys(data).forEach(key => {
const film = data[key];
console.log("TEST: Film Data");
console.log(film);
for (let i = 0; i < film.length; i++) { // Cycle through each Film
const collectionId = 'WEBFLOW_COLLECTION_ID';
const token = 'WEBFLOW_TOKEN';
const apiUrl = 'https://api.webflow.com/collections/' + collectionId + '/items';
// Retrieve the total count of items in the Webflow CMS collection
fetch(apiUrl, {
method: 'GET',
headers: {
Authorization: 'Bearer ' + token,
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(result => {
// Compare the count of items to the number of films in Eventive
if (result.total !== film.length) {
const newItem = {
fields: {
name: film[i].name,
long_rich: film[i].description,
long_txt: film[i].description,
poster: film[i].poster_image
}
};
// Make a request to the Webflow API to create the new CMS item
fetch(apiUrl, {
method: 'POST',
headers: {
Authorization: 'Bearer ' + token,
'Content-Type': 'application/json'
},
body: JSON.stringify(newItem)
})
.then(response => response.json())
.then(result => {
console.log(result);
// The ID of the newly created CMS item will be in the "result._id" property
const itemId = result._id;
// Now you can update the CMS item using the ID
const modifiedItem = {
fields: {
name: film[i].name,
long_rich: film[i].description,
long_txt: film[i].description,
poster: film[i].poster_image
// Add additional fields as needed
}
};
// Make a request to the Webflow API to update the existing CMS item
fetch(apiUrl + '/' + itemId, {
method: 'PUT',
headers: {
Authorization: 'Bearer ' + token,
'Content-Type': 'application/json'
},
body: JSON.stringify(modifiedItem)
})
.then(response => response.json())
.then(result => {
console.log(result);
})
.catch(error => {
console.error(error);
});
})
.catch(error => {
console.error(error);
});
}
})
.catch(error => {
console.error(error);
});
}
});
})
.catch(error => {
console.error(error);
});