To enable the CTA button only if the corresponding frame is available, use the `availability` endpoint provided in our Product API (see Product API Methods > availability).
We recommend calling this endpoint with batches of a few tens of frames, for instance corresponding to a Catalog page being shown to the user.
Here is a pseudo-code example on how to use the `availability` endpoint to condition the display of a CTA button:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<script>
/**
* @param {string[]} idTable
* @returns {Promise<{uid: string, available: boolean}[]>}
**/
async function getAvailability(idTable) {
// Put your apiKey as an environment Variable
const apiKey = "apiKey"
const url = `https://product-api.fittingbox.com/glasses-metadata/availability?apiKey=${apiKey}&uidList=${idTable.join(",")}`
const result = await fetch(url)
if (result.ok) {
return result.json()
}
throw new Error("an error occured")
}
/**
* @param availability
* @returns {HTMLElement}
**/
function createCard({available, uid}) {
const container = document.createElement("div")
const button = document.createElement("button")
const title = document.createElement("h3")
title.innerText = uid
// Better use css just easier to show in the doc
title.style.textAlign = "center"
button.style.margin = "auto"
button.style.display = "block"
button.innerHTML = "choose frame"
container.id = uid
container.style.maxWidth = "300px"
container.style.margin = "auto"
container.append(title)
container.append(button)
if(!available) {
button.disabled = true
}
// Could append card on the dom here but i don't like side effects
return container
}
async function main() {
const idTable = ["uid1", "uid2", "uid3", "uid4", "etc"]
try {
const availabilityResult = await getAvailability(idTable)
const cards = availabilityResult.map(createCard)
cards.forEach((card) => { document.body.append(card) })
} catch(err) {
// Handle fetch error
}
}
main()
</script>
</body>
</html>