Подтягиваем контент из Kodzero в таблицу Тильды

https://api.kodzero.pro/v1/10000/100014

Изображение;Артикул;Название;Остаток;Цена;

<script>
(function () {
    const tableSyncConfig = {
        // ID блока Тильды с таблицей
        tableRecId: '#rec2144224941',

        // URL для получения данных из Kodzero
        collectionUrl: 'https://api.kodzero.pro/v1/10000/100014',

        // Настройки колонок
        //
        // template — шаблон, который определяет,
        // как будет отображаться значение в ячейке.
        //
        // В шаблоне {value} будет заменено на фактическое
        // значение из данных Kodzero для этой колонки.
        //
        // Отсутствие template означает, что значение
        // будет вставлено как есть, без дополнительного форматирования.
        columns: {
            image: {
                title: 'Изображение',
                template: '<img src="{value}" alt="image" style="max-width: 180px; max-height: 180px;">'
            },
            sku: {
                title: 'Артикул',
                template: '<strong>{value}</strong>'
            },
            title: {
                title: 'Название'
            },
            stock: {
                title: 'Остаток',
                template: '{value} шт.'
            },
            price: {
                title: 'Цена',
                template: '{value} ₽'
            }
        }
    }

    // =======================================================
    // Далее находятся технические функции.
    //
    // Их можно не трогать, если не нужно менять
    // логику работы скрипта.
    // =======================================================

    const fetchKodzeroData = async () => {
        try {
            const result = await fetch(tableSyncConfig.collectionUrl)
            const json = await result.json()

            return json.ok && json.result
                ? json.result.found
                : []
        } catch (error) {
            console.error(
                'Ошибка при получении данных из Kodzero:',
                error
            )

            return []
        }
    }

    const getTable = () => {
        const divWrapper = document.querySelector(
            '#' + tableSyncConfig.tableRecId.replace('#', '')
        )

        const table = divWrapper.querySelector('table')

        if (!table) {
            console.error(
                'Не удалось найти таблицу. Проверьте правильность настроек ' +
                'и структуру таблицы на Тильде'
            )

            return null
        }

        const widthSettings = table
            .getAttribute('data-table-width')
            .split(';')

        const columns = getColumnIdsOrdered(table)

        if (!columns.length) {
            console.error(
                'Не удалось определить колонки. Проверьте правильность ' +
                'настроек и структуру таблицы на Тильде'
            )

            return null
        }

        return {
            divWrapper,
            table,
            widthSettings,
            columns
        }
    }

    const getColumnIdsOrdered = (tableNode) => {
        const headers = tableNode.querySelectorAll('.t431__thead th')

        const columns = [...headers].map(
            (el) => el.innerText
        )

        const columnSettings = tableSyncConfig.columns

        columns.forEach((header, i) => {
            const id = Object.keys(columnSettings).find(
                (key) => columnSettings[key]?.title === header
            )

            columns[i] = id || ''
        })

        return columns
    }

    const getTableBody = () => {
        const table = document.querySelector(
            '#' + tableSyncConfig.tableRecId.replace('#', '')
        )

        return table.querySelector('.t431__tbody')
    }

    const insertRows = (records, tableData) => {
        clearTable()

        const tableBody = getTableBody()

        records.forEach((record, i) => {
            const tr = document.createElement('tr')

            tr.classList.add(
                i % 2 === 0
                    ? 't431__oddrow'
                    : 't431__evenrow'
            )

            tableData.columns.forEach((col) => {
                const template =
                    tableSyncConfig.columns[col]?.template || '{value}'

                const value = template.replace(
                    '{value}',
                    record[col] || ''
                )

                const td = document.createElement('td')

                td.classList.add('t431__td')
                td.classList.add('t-text')

                td.innerHTML = value

                tr.appendChild(td)
            })

            tableBody.appendChild(tr)
        })
    }

    const clearTable = () => {
        const tableId =
            '#' + tableSyncConfig.tableRecId.replace('#', '')

        const tableBody = document
            .querySelector(tableId)
            ?.querySelector('.t431__tbody')

        if (!tableBody) return

        tableBody.innerHTML = ''
    }

    const syncTableWithKodzero = async () => {
        try {
            clearTable()

            const records = await fetchKodzeroData()

            if (!records.length) {
                return console.warn(
                    'Нет данных для отображения в таблице'
                )
            }

            const tableData = getTable()

            if (!tableData) {
                return console.warn(
                    'Обработка данных таблицы невозможна из-за ошибок ' +
                    'в структуре или настройках'
                )
            }

            insertRows(records, tableData)
        } catch (error) {
            console.error(
                'Неожиданная ошибка при синхронизации таблицы:',
                error
            )
        }
    }

    document.addEventListener(
        'DOMContentLoaded',
        syncTableWithKodzero
    )
})()