[How to] Enable the CTA button only if the frame is available

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">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

         * @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"

            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