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),
каталогу.
-
7 days356 USD
1973 17 0 1 7 days356 USD
Hello! The task is clear. I will implement the integration of Airtable and Wix. I will complete everything step by step. I will create an automatic import of real estate objects and set up filtering on the frontend. I will take the code from your example as a basis, but I will refine it for stability (error handling for the API, updating existing records instead of duplicating...).
-
22 days557 USD
988 9 0 22 days557 USD
Good day!
We have studied your project and have relevant experience.
I would estimate such a project at 25,000 UAH.
This includes:
- development of the structure;
- writing texts;
… - design;
- layout;
- making corrections and fixing bugs;
- technical settings;
- consultations and training on working with the admin panel;
- subscription to Wix ($180/year).
Here are examples of work on Wix:
https://www.welabeldata.com/
https://www.concept-innovation-school.com/
https://www.lvl.com.ua/
https://www.houseofvlada.com
https://www.openheart.com.ua/
This is a package offer. If you cover any of the components on your side, please write in private for a discussion of the cost.
-
2 days223 USD
11111 99 0 1 2 days223 USD
Hello.
I can implement it only on Webflow + CMS Bridge + Airtable.
WIX is too weak for this.
If this works for you, write to me.
-
5 days278 USD
237 5 days278 USD
Good day!
I am ready to perform the integration of Airtable → Wix and set up an automatic catalog of objects.
I have already worked with similar architecture (Wix Velo + external APIs + auto-synchronization), so I can implement the full cycle:
What I will do:
• I will connect the Airtable API (secure token, base ID, table ID)
• I will implement a backend function for importing data into Wix Collections
• I will set up automatic updates (every 24 hours or more frequently)
… • I will create catalogs/repositories with filters
• I will add support for photos, PDFs, prices, ROI, statuses, dates
• I will create filtered landing pages for partners (white-label)
• I will add UTM tracking for applications in CRM
Why I can perform this:
I understand the technical logic of Wix Velo (backend functions, fetch, HTTP endpoints, Wix Data), I work with REST APIs, including Airtable.
I can build an MVP quickly and reliably — with clean code and basic documentation.
Current freelance projects in the category Web Programming
Development of a WebGL/Three.js scene with generation and export of 3D (snapshot) from an animated shaderObject Description:The project is a designer table shaped like a realistic, deep whirlpool (a central vortex that smoothly transitions from a wide horizontal tabletop to a thin elegant leg). Task Essence:A WebGL / Creative Coding developer is required to create an interactive 3D… Javascript and Typescript, Web Programming ∙ 8 hours 59 minutes back ∙ 18 proposals |
Create a website on WP, without a builder.
356 USD
Need to create a catalog (most likely without a cart) just a product request form without using Elementor and others there should be a main page, product page, catalog, supplier catalog, and possibly a few others design and style like this… Web Programming ∙ 9 hours 6 minutes back ∙ 73 proposals |
Shopify developer for sushi delivery website (Poland)We are looking for an experienced Shopify developer to implement a food delivery website (sushi) for a client from Katowice, Poland. What needs to be done: Set up the site on a ready-made Shopify template (template to be agreed upon) Menu with photos of dishes and descriptions… Web Programming ∙ 10 hours 31 minutes back ∙ 33 proposals |
Webflow developer for filling portfolio pages on the websiteA website custom-built on Webflow for a construction company needs to quickly fill project pages using one template (replace images and texts) For 2 languages Quantity - 6 pieces Ready to start asap, thank you! HTML & CSS, Web Programming ∙ 1 day 2 hours back ∙ 38 proposals |
LearnWorlds Administrator-ConfiguratorTask Set up the ready-made LearnWorlds platform for an elite online course. Do not develop the architecture — implement the already prepared structure manually in the admin panel. ———————— What needs to be done: Branding ⦁ Connect your domain ⦁ Upload the logo, set up… Content Management Systems, Web Programming ∙ 1 day 5 hours back ∙ 10 proposals |
Dnepr