Детальне, покрокове, практичне пояснення, як саме реалізувати каталог об’єктів із автоматичним оновленням через 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),

  • каталогу.