Детальне, покрокове, практичне пояснення, як саме реалізувати каталог об’єктів із автоматичним оновленням через Airtable + Wix API, щоб ти міг зрозуміти технічну логіку й реалізувати це у вигляді MVP на WIX

✅ ЩО МИ СТВОРЮЄМО

Каталог об’єктів на сайті (Wix), який:

• отримує дані з Airtable,

• автоматично оновлюється,

• дозволяє фільтрувати об’єкти,

• показує актуальні ціни, плани, фото,

• працює як CMS, але з зовнішнім джерелом даних.

🔥 ЗАГАЛЬНА АРХІТЕКТУРА (проста, але ефективна)

Airtable (дані про об’єкти)

        ↓ API

Wix Backend → Wix Database Collections → Відображення на сайті

        ↓

Партнерські лендінги (фільтрований каталог)

🚀 ЕТАП 1 — Підготовка Airtable

1. Створюємо базу Airtable "Dubai Real Estate Inventory"

Таблиця “Projects” з такими колонками:

🚀 ЕТАП 2 — Отримання API ключів

В Airtable:

👉 Заходимо у Developer Hub → API Tokens → Create token
Вибираємо:

• Read access to base

• No write needed

Отримуємо:

• API Key

• Base ID

• Table ID

Це все, що потрібно для інтеграції.

🚀 ЕТАП 3 — Підготовка WIX

1. Увімкнути Dev Mode у Wix (Wix Velo)

В Wix Editor → Dev Mode → Turn On
Тепер доступні:

• backend-каталог

• кодові файли

• налаштування HTTP функцій

2. Створити Wix Collections

Тобі потрібна колекція:
"Inventory"

Поля ті ж самі, що в Airtable.

🔥 Важливо:

• Постав Write disabled для користувачів

• Read: anyone (щоб сайт показував дані)

🚀 ЕТАП 4 — Автоматичний імпорт через Wix Backend

У розділі Back-end створюємо файл:

backend/airtable.js

Код (спрощений, робочий):

import {fetch} from 'wix-fetch';

import wixData from 'wix-data';



const API_KEY = "YOUR_AIRTABLE_API_KEY";

const BASE_ID = "YOUR_BASE_ID";

const TABLE_ID = "YOUR_TABLE_ID";



export async function syncInventory() {



    let url = `https://api.airtable.com/v0/${BASE_ID}/${TABLE_ID}`;



    let response = await fetch(url, {

        method: 'GET',

        headers: {

            Authorization: `Bearer ${API_KEY}`

        }

    });



    let data = await response.json();



    for (let record of data.records) {

        

        let item = {

            project_id: record.id,

            project_name: record.fields.project_name,

            developer: record.fields.developer,

            location: record.fields.location,

            price_from: record.fields.price_from,

            ROI: record.fields.ROI,

            description: record.fields.description,

        };



        await wixData.save("Inventory", item);

    }



    return "Sync complete";

}

🚀 ЕТАП 5 — Запуск синхронізації

1. Додаємо HTTP function

Файл:

backend/http-functions.js

import {syncInventory} from 'backend/airtable';



export function get_sync(request) {

    return syncInventory().then(result => {

        return {

            status: 200,

            body: result

        }

    });

}

Тепер:

• можна запустити через URL
  https://yourdomain.com/_functions/sync

2. Автоматизація

У Wix Automations:

Trigger: Every 24 hours
Action: Call URL → _functions/sync

Каталог завжди оновлений.

🚀 ЕТАП 6 — Відображення каталогу на сайті

1. Створюємо Repeater у Wix

Елементи:

• фото

• назва проекту

• локація

• ціна

• CTA (view details)

Підключаємо до:
→ Dataset → Collection “Inventory”

🚀 ЕТАП 7 — Фільтри для партнерів

Приклад фільтрів:

• price_from < 300k

• location = “Business Bay”

• ROI > 8%

Код фільтру на кнопці:

$w("#dataset1").setFilter(

  wixData.filter()

    .eq("location", $w("#locationDropdown").value)

    .ge("ROI", Number($w("#roiInput").value))

);

🚀 ЕТАП 8 — Лендінги для партнерів (white-label)

Для кожного партнера генеруємо URL:

domain.com/nl-partner01

domain.com/dk-invest-consult

domain.com/pl-warsaw-office

Кожна сторінка:

• підключена до тієї самої колекції

• але з фільтром:

Приклад:

$w("#dataset1").setFilter(

  wixData.filter().eq("country", "Netherlands")

);

🚀 ЕТАП 9 — Додаємо систему UTM-трекингу

У форму ліда додаємо приховане поле:

$w("#partnerId").value = wixLocation.query.partner;

Тепер кожен лід:

• має ID партнера,

• автоматично потрапляє у CRM.

🚀 ЕТАП 10 — Партнерський кабінет

У WIX:

• створюємо Member Area,

• роль: Partner,

• даємо доступ до:

  • статистики,

  • інструкцій,

  • матеріалів девелопера,

  • Excel/Google Sheet зі статусами угод (read-only),

  • каталогу.