MVP на Wix через Airtable
Детальне, покрокове, практичне пояснення, як саме реалізувати каталог об’єктів із автоматичним оновленням через Airtable + Wix API, щоб ти міг зрозуміти технічну логіку й реалізувати це у вигляді MVP на WIX
✅ ЩО МИ СТВОРЮЄМО
Каталог об’єктів на сайті (Wix), який:
отримує дані з Airtable,
автоматично оновлюється,
дозволяє фільтрувати об’єкти,
показує актуальні ціни, плани, фото,
працює як CMS, але з зовнішнім джерелом даних.
🔥 ЗАГАЛЬНА АРХІТЕКТУРА (проста, але ефективна)
Airtable (дані про об’єкти)
↓ API
Wix Backend → Wix Database Collections → Відображення на сайті
↓
Партнерські лендінги (фільтрований каталог)
🚀 ЕТАП 1 — Підготовка Airtable
1. Створюємо базу Airtable "Dubai Real Estate Inventory"
Таблиця “Projects” з такими колонками:
| Поле | Тип | Опис |
|---|---|---|
| project_id | Single line text | Унікальний ID |
| developer | Single line text | DAMAC / EMAAR / Sobha |
| project_name | Single line text | Назва проекту |
| location | Single line text | Business Bay / Dubai Creek |
| price_from | Number | Мінімальна ціна |
| currency | Single line text | AED |
| ROI | Number | Потенційний ROI |
| photos | Attachment | Фото |
| brochure | Attachment | |
| description | Long text | Опис |
| status | Single select | Off-plan / Ready |
| handover | Date | Квартал/рік |
| update_timestamp | Formula | LAST_MODIFIED_TIME() |
🚀 ЕТАП 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),
каталогу.
-
1973 17 0 1 Вітаю! Завдання зрозуміле. Реалізую інтеграцію Airtable та Wix.
Виконаю все по пунктам.
Зроблю автоматичний імпорт об'єктів нерухомості, налаштую фільтрацію на фронтенді.
Код з вашого прикладу візьму за основу, але доопрацюю його для стабільності (обробка помилок API, оновлення існуючих записів замість дублювання ...).
-
988 9 0 Доброго дня!
Ми вивчили ваш проект і маємо релевантний досвід.
Я б оцінив такий проект у 25000 грн.
Сюди входить:
- розробка структури;
- написання текстів;
… - дизайн;
- верстка;
- внесення правок і фікс багів;
- технічні налаштування;
- консультації і навчання роботи з адмінкою;
- підписка на Вікс (180$/рік).
Ось приклади робіт на Віксі:
https://www.welabeldata.com/
https://www.concept-innovation-school.com/
https://www.lvl.com.ua/
https://www.houseofvlada.com
https://www.openheart.com.ua/
Це пакетна пропозиція. Якщо якусь із складових ви закриваєте на своєму боці - напишіть, будь ласка, в особисті для обговорення вартості
-
11111 99 0 1 Вітаю.
можу реалізувати тільки на webflow +cms brige +airtable
WIX слабенький для цього
якщо підходить пишіть
-
237 Доброго дня!
Готовий виконати інтеграцію Airtable → Wix та налаштувати автоматичний каталог об’єктів.
Я вже працював з подібною архітектурою (Wix Velo + зовнішні API + авто-синхронізація), тому можу реалізувати повний цикл:
Що саме зроблю:
• Підключу Airtable API (secure token, base ID, table ID)
• Реалізую бекенд-функцію для імпорту даних у Wix Collections
• Налаштую автоматичне оновлення (кожні 24 год або частіше)
… • Створю каталоги / репітери з фільтрами
• Додам підтримку фото, PDF, цін, ROI, статусів, дат
• Зроблю фільтровані лендінги для партнерів (white-label)
• Додам UTM-трекінг заявок у CRM
Чому можу виконати:
Розумію технічну логіку Wix Velo (backend-функції, fetch, HTTP endpoints, Wix Data), працюю з REST API, у тому числі з Airtable.
Можу зібрати MVP швидко й стабільно — з чистим кодом та базовою документацією.
Актуальні фриланс-проєкти в категорії Веб-програмування
Розробка WebGL/Three.js сцени з генерацією та експортом 3D (снапшот) з анімованого шейдераОпис об'єкта:Проект являє собою дизайнерський стіл, виконаний у формі реалістичного, глибокого водовороту (центральна воронка, яка плавно переходить з широкої горизонтальної стільниці в тонку витончену ніжку). Суть задачі:Потрібен WebGL / Creative Coding розробник для створення… Javascript та Typescript, Веб-програмування ∙ 12 годин 25 хвилин тому ∙ 18 ставок |
Зробити сайт на WP , без конструктора
16 000 UAH
Треба зробити каталог ( скоріше за все без корзини ) тільки форма заявки на товару без використання елементора та інших має бути головна сторінка , сторінка товару , каталог , каталого постачальників , та можливо ще декілька інші дизайн і стилістика типу такого… Веб-програмування ∙ 12 годин 32 хвилини тому ∙ 75 ставок |
Shopify-розробник для сайту доставки суші (Польща)Шукаємо досвідченого Shopify-розробника для реалізації сайту доставки їжі (суші) для клієнта з м. Катовіце, Польща. Що потрібно зробити: Налаштувати сайт на готовому шаблоні Shopify (шаблон узгоджується) Меню з фотографіями страв і описами Онлайн-оформлення замовлень Підключення… Веб-програмування ∙ 13 годин 57 хвилин тому ∙ 34 ставки |
Webflow розробник для заповнення сторінок портфоліо на сайтіЄ сайт розроблений кастомно на вебфлоу для будівельної компанії, потрібно швидко заповнити сторінки проектів за одним шаблоном (замінити картинки і тексти) Для 2 мов Кількість - 6 штук Готові починати asap, дякую! HTML та CSS верстання, Веб-програмування ∙ 1 день 5 годин тому ∙ 38 ставок |
Адміністратор-налаштувальник LearnWorldsЗадача Настроїти готову платформу LearnWorlds під елітний онлайн-курс. Не розробляти архітектуру — реалізувати вже готову структуру руками в адмін-панелі. ———————— Що потрібно зробити: Брендинг ⦁ Підключити свій домен ⦁ Завантажити логотип, налаштувати фірмові кольори ⦁… CMS, Веб-програмування ∙ 1 день 8 годин тому ∙ 10 ставок |