Розробка каталогу товарів: EAV, SEO, варіанти та кешування

Клієнт приходить зі скаргою: каталог гальмує, фільтри завантажуються по хвилині, SEO-трафік падає через дублі сторінок. Найчастіше причина в архітектурі: неправильно вибрана модель категорій, неефективна пагінація або відсутність кешування. Розробка каталогу товарів — центральне завдання для інтернет-магазину, і її вирішення може заощадити до 40% бюджету на підтримку (зниження витрат на інфраструктуру — до 300 тис. грн на рік). За статистикою, 70% користувачів залишають сайт, якщо каталог завантажується довше 3 секунд, а правильно спроектований каталог може збільшити конверсію на 20%. Наш досвід — 8 років у розробці каталогів, понад 50 реалізованих проєктів для інтернет-магазинів з трафіком від 10 000 відвідувачів на день.

Ми розробляємо каталоги товарів з урахуванням сучасних практик і вашого бізнес-контексту. Наприклад, на проєкті з каталогом у 50 000 товарів ми скоротили час генерації сторінки з 6 с до 0.8 с за допомогою keyset pagination та кешування Redis.

Яку модель категорій обрати?

Дерево категорій зберігається в БД. Два поширені підходи: Adjacency List — кожен запис зберігає parent_id. Простота запису, але вибірка всього дерева вимагає рекурсивного CTE:

WITH RECURSIVE category_tree AS (
  SELECT id, name, parent_id, 0 AS depth
  FROM categories WHERE parent_id IS NULL
  UNION ALL
  SELECT c.id, c.name, c.parent_id, ct.depth + 1
  FROM categories c
  JOIN category_tree ct ON c.parent_id = ct.id
)
SELECT * FROM category_tree ORDER BY depth, name;

Nested Sets (MPTT) — кожен запис зберігає lft та rgt значення. Вибірка піддерева: WHERE lft BETWEEN :parent_lft AND :parent_rgt — один запит без рекурсії. Запис складніший: при додаванні вузла оновлюються всі праві сусіди. Пакет kalnoy/nestedset для Laravel.

Closure Table — окрема таблиця всіх пар предок-нащадок. Найгнучкіший, займає більше місця. Для складних операцій з деревом (переміщення піддерев) оптимальний.

Рекомендація: для каталогів до 10 000 категорій Adjacency List з кешуванням дерева в Redis — достатньо. MPTT — при частих вибірках піддерев без кеша.

Як правильно реалізувати атрибути товарів?

Товари різних категорій мають різні набори атрибутів. Три підходи:

• Таблиця з фіксованими колонками: products.color, products.size, products.weight. Працює тільки при однорідному асортименті. Додавання нового атрибута — ALTER TABLE, міграція, деплой.
• EAV (Entity-Attribute-Value): гнучко, але повільно при JOIN-ах. Для фільтрації за атрибутами потрібен Elasticsearch або денормалізований індекс.
• JSONB-колонка в PostgreSQL:

ALTER TABLE products ADD COLUMN attributes JSONB;
CREATE INDEX ON products USING GIN (attributes);

Компромісний варіант: гнучкість EAV, але без надлишкових JOIN-ів. Як зазначено в документації PostgreSQL, JSONB-колонки забезпечують гнучкість EAV без надлишкових JOIN-ів. Підходить для каталогів до 500 000 товарів.

Варіанти товару: Parent-Child

Товар з варіантами (колір × розмір) — поширене завдання. Два паттерни:

• Simple SKU: кожна комбінація — окремий запис у products. Просто, але складно керувати батьківською карткою.
• Parent-Child: батьківський товар типу 'variable' та дочірні 'variant' з конкретними комбінаціями атрибутів.

products (id, type, parent_id, sku, name, price, stock)
-- type: 'simple' | 'variable' | 'variant'
-- variant: parent_id → variable product

При відображенні картки товару завантажуємо батька + всі його варіанти. Користувач обирає комбінацію атрибутів → знаходимо відповідний variant → оновлюємо ціну, фото, наявність. Для матриці варіантів використовуйте об'єкт, індексований за ID атрибута.

Структура URL та SEO

URL категорій — критично для SEO. Три варіанти:

• Плоский: /catalog/noutbuki — просто, втрачає контекст ієрархії.
• Ієрархічний: /catalog/elektronika/kompyutery/noutbuki — краще для SEO, складніше при переміщенні категорії.
• Гібридний: /noutbuki-c142 — читабельний slug + унікальний ID (стійкий до перейменувань).

Для фільтрованих сторінок: /noutbuki?brand=apple&ram=16 з canonical на /noutbuki або окремі SEO-сторінки для популярних комбінацій (/noutbuki-apple-16gb як статична сторінка-агрегатор). Schema.org: ItemList на сторінках категорій з ListItem для кожного товару в лістингу.

Пагінація та нескінченна прокрутка

Offset-пагінація: LIMIT 48 OFFSET 144. Працює, але при глибоких сторінках (OFFSET 10000) PostgreSQL все одно читає 10048 рядків. Рішення — keyset pagination:

SELECT * FROM products
WHERE (sort_value, id) > (:last_sort_value, :last_id)
ORDER BY sort_value, id
LIMIT 48;

Keyset pagination миттєва при будь-якій глибині, але не підтримує перехід на довільну сторінку.

Для мобайлу — нескінченна прокрутка з IntersectionObserver, для десктопа з SEO-пріоритетом — класична пагінація (пошукові системи краще індексують сторінки з явними номерами).

Управління каталогом в CMS

Адміністративний інтерфейс каталогу:

• Bulk editing: виділити 50 товарів → змінити категорію/статус/ціну.
• Імпорт з CSV/XLSX: маппінг колонок, попередній перегляд з помилками, фонове завантаження через queue.
• Drag-and-drop сортування категорій: візуальне дерево з можливістю перетягування.
• Управління атрибутами: додати атрибут у категорію — він з'явиться на формах редагування всіх товарів категорії.

Для bulk-імпорту: Laravel Jobs + Horizon. Файл завантажується в S3, задача береться з черги, парситься рядково (через league/csv або PhpSpreadsheet), товари вставляються batch-ами по 100 записів.

Як прискорити каталог за допомогою кешування?

Сторінки каталогу — основне навантаження на БД. Стратегія кешування:

При зміні товару скидаємо кеш тільки тих сторінок, де він присутній. Cache tags в Laravel: Cache::tags(['category:electronics'])->flush(). Оптимальна конфігурація кешування може знизити час завантаження сторінки з 3 до 0.5 секунд. Кешування дозволяє скоротити витрати на сервери до 200 000 грн на рік.

Для каталогів з високою динамікою (часті зміни цін або залишків) варто скоротити TTL лістингу до 1-2 хвилин і використовувати invalidate за тегом. Для статичних каталогів — збільшити TTL до години.

Терміни

• Базовий каталог (категорії, список товарів, картка, пагінація): 2–3 тижні.
• З варіантами, EAV-атрибутами, імпортом та кешуванням: 4–7 тижнів.
• Інтеграція з Elasticsearch для пошуку та фільтрації додає 2–3 тижні.

Що входить в роботу

1. Підготовка технічного завдання з детальною моделлю даних.
2. Проектування та реалізація ієрархії категорій, атрибутів та варіантів.
3. Розробка SEO-оптимізованої структури URL та Schema.org-розмітки.
4. Налаштування пагінації та кешування.
5. Інтеграція з адміністративною панеллю для управління асортиментом.
6. Документування коду та API, навчання команди, передача доступів.
7. Гарантійна підтримка протягом 30 днів після здачі.

Якщо хочете оцінити обсяг робіт для вашого проєкту, зв'яжіться з нами — ми проаналізуємо поточний каталог і запропонуємо рішення. Отримайте безкоштовний аудит вашого каталогу: залиште заявку на консультацію інженера. Наш фахівець зв'яжеться з вами протягом дня.

Типові помилки при проектуванні каталогу

• Використання offset-пагінації для каталогів >10 000 товарів — призводить до гальмувань на глибоких сторінках.
• EAV без індексації та кеша — вбиває продуктивність при фільтрації.
• Відсутність canonical на фільтрованих сторінках — плодить дублі та знижує ранжування.
• Плоский URL без захисту від перейменувань — втрачається SEO-вага.

Ці помилки збільшують час завантаження на 40% і знижують конверсію. Уникнути їх допоможе грамотне проектування з урахуванням сучасних практик.

Розробка інтернет-магазинів

Ми знаємо: інтернет-магазин — це не просто «сайт з кошиком». Це розподілена система управління товарами, інвентарем, замовленнями, платежами, доставкою, поверненнями та комунікацією з клієнтами. Кожен блок має нетривіальну реалізацію, і більшість проблем в e-commerce виникає на стику цих підсистем. Наш досвід — понад 50 реалізованих проектів — показує, що правильна архітектура на старті економить до 40% бюджету на доробках.

Чому продуктивність каталогу деградує при зростанні SKU?

Найчастіша технічна проблема e-commerce — деградація сторінок категорій при збільшенні асортименту. Сторінка працює добре на 500 товарах і починає гальмувати на 10 000. Причини майже завжди одні й ті ж.

N+1 на атрибутах. Завантажуєте список товарів — 50 елементів. Для кожного потрібні категорія, головне фото, ціна з урахуванням знижки, наявність на складі, рейтинг. Без правильного eager loading це 250+ запитів на сторінку. В Laravel вирішується через with(['category', 'mainImage', 'currentPrice', 'stockStatus']) та withAvg('reviews', 'rating'). Але варто з'явитися персональним цінам (b2b) або складським залишкам по регіонах — і одного with() недостатньо. Потрібні Query Object або виділений ReadModel.

Фасетна фільтрація без індексів. Фільтр за кольором + розміром + брендом + діапазоном цін на таблиці в 500 000 записів без складених індексів — це seq scan при кожному запиті. PostgreSQL з правильними індексами тримає фасетну фільтрацію до кількох мільйонів товарів. Для великих каталогів — Elasticsearch або OpenSearch з агрегаціями: вони рахують кількість товарів на фільтр (facet counts) значно швидше.

Пагінація через OFFSET. LIMIT 50 OFFSET 10000 на великій таблиці — погана ідея: PostgreSQL все одно читає перші 10 050 рядків. Keyset pagination (cursor-based) через WHERE id > $last_id ORDER BY id LIMIT 50 працює за постійний час незалежно від сторінки. Як зазначено в документації PostgreSQL, cursor-based pagination гарантує O(log n) при будь-якому зміщенні, що особливо важливо для каталогів із сотнями тисяч товарів.

Конкретний кейс: каталог будівельних матеріалів, 180 000 SKU, фасетна фільтрація по 12 атрибутах. Після переходу з OFFSET-пагінації на курсорну та додавання partial index по (category_id, is_active, price) час відповіді сторінки каталогу знизився з 4,2 с до 280 мс. Економія на серверних ресурсах склала близько 30 000 ₽ на місяць. В іншому проекті (ювелірний маркетплейс) впровадження агрегацій через Elasticsearch скоротило час фільтрації з 8 до 200 мс та заощадило 50 000 ₽ на місяць на інфраструктурі — ще один приклад, як правильна архітектура знижує TCO.

Що таке race condition у кошику та як його уникнути?

Checkout — місце, де гроші або потрапляють на рахунок, або ні. Технічні проблеми тут коштують дорого.

Race condition при резервуванні товару. Два покупці одночасно додають останній екземпляр у кошик і обоє натискають «Оплатити». Без песимістичного блокування або атомарного UPDATE з перевіркою залишку обидва замовлення проходять, інвентар іде в мінус. В PostgreSQL:

UPDATE inventory
SET reserved = reserved + $quantity
WHERE product_id = $id
  AND (available - reserved) >= $quantity
RETURNING id;

Якщо RETURNING повернув 0 рядків — товару немає, показуємо помилку до списання грошей.

Ідемпотентність платіжних вебхуків. payment.succeeded від Stripe або ЮКассы може прийти двічі через мережеві збої або retry-логіку на стороні шлюзу. Без перевірки WHERE NOT EXISTS (SELECT 1 FROM processed_events WHERE event_id = $id) — дублювання замовлення або подвійне зарахування. Webhook idempotency — обов'язковий патерн для будь-якого платіжного інтегратора. Ми включаємо тест на ідемпотентність у стандартний чек-лист кожного проекту.

Checkout у кілька кроків. Multi-step checkout (адреса → доставка → оплата → підтвердження) vs single-page checkout. Дослідження показують, що single-page з прогрес-індикатором конвертує на 15–20% краще на мобільних. Стан між кроками — або localStorage + server-side сесія, або повністю server-side з проміжним збереженням. Ми гарантуємо, що кожне замовлення проходить аудит на ідемпотентність та блокування — це входить у стандартний чек-лист тестування.

Як інтегрувати 1С з інтернет-магазином?

1С — окрема глава. Три поширених способи інтеграції:

1. CommerceML через HTTP — 1С вивантажує XML за розкладом, сайт імпортує. Працює для невеликих каталогів, є затримка синхронізації.
2. REST API / OData від 1С — двостороння синхронізація в реальному часі. Вимагає налаштування на стороні 1С, примхлива до версій конфігурацій.
3. Проміжна шина (RabbitMQ / Kafka) — 1С публікує події, сайт підписується. Найнадійніший підхід для високонавантажених систем, але найдорожчий у розробці.

Служби доставки — СДЕК, Boxberry, Пошта Росії, DHL: всі надають REST API для розрахунку вартості та створення накладних. Агрегатори (Shiptor, Shipnow) дозволяють працювати з кількома службами через єдиний API.

Платіжні шлюзи

Для кожного шлюзу обов'язкова перевірка підпису вебхука — без цього будь-хто може відправити фейковий payment.succeeded.

CMS vs власна розробка

WooCommerce — виправданий для магазинів до ~5 000 SKU з типовою бізнес-логікою. Швидкий старт, величезна екосистема плагінів. Проблеми починаються при нестандартних цінових правилах, складних варіантах товарів або навантаженні від 10 000+ замовлень на місяць. Економія на ліцензії WooCommerce (безкоштовно) обертається витратами на плагіни та хостинг; для каталогу 50 000 SKU місячна вартість підтримки може перевищити 100 000 ₽.

OpenCart, Prestashop — аналогічна історія. Хороші для старту, обмежені при зростанні.

Власна розробка на Laravel — для:

• Нестандартної бізнес-логіки (підписки, оренда, b2b-прайси, конфігуратор);
• Високих вимог до продуктивності;
• Складних інтеграцій (кілька складів, ERP, маркетплейси);
• Унікального UX checkout.

Як ми розробляємо інтернет-магазин: покроковий процес

1. Аналітика та проектування. Збираємо вимоги, уточнюємо бізнес-процеси, моделюємо доменну логіку. На виході — технічне завдання та архітектурна схема.
2. Backend та API. Реалізуємо ядро (товари, кошик, замовлення), інтеграції з 1С/складами/платіжками. Використовуємо Laravel 11 з Repository pattern, чергами для асинхронних операцій.
3. Frontend та checkout. Налаштовуємо React 18 / Next.js 14 з оптимізованим рендерингом (SSR/SSG для каталогу), єдиний single-page checkout.
4. Тестування. Перевіряємо race condition, ідемпотентність вебхуків, навантажувальне тестування (k6), security-аудит.
5. Деплой та моніторинг. Розгортаємо на Vercel / Docker / виділеному сервері, підключаємо Sentry та Uptime.

SEO для e-commerce

Canonical та дублювання. Фасетна фільтрація генерує тисячі URL (?color=red&size=M&sort=price). Без canonical або noindex на фільтрованих сторінках краулінговий бюджет витрачається на дублі, а основні сторінки індексуються гірше.

Structured data. Product schema з offers, aggregateRating, availability — це rich snippets у видачі: зірочки рейтингу, ціна, наявність. Впливає на CTR.

Core Web Vitals на сторінках товарів. Hero image товару — це LCP element. fetchpriority="high" на першому зображенні, правильні srcset з WebP, width та height атрибути для запобігання CLS.

Що входить у результат роботи

Після завершення проекту ви отримуєте:

• Вихідний код та повну документацію (API, архітектура, інфраструктура);
• Доступи до репозиторію, хостингу, моніторингу (Sentry, Uptime);
• Навчання команди роботі з адмін-панеллю та кастомізаціями;
• Гарантійну підтримку 3 місяці (виправлення помилок, консультації);
• Детальний звіт по навантажувальному тестуванню та оптимізації.

Орієнтири за термінами

Вартість розраховується після аналізу вимог: кількість інтеграцій, складність ціноутворення, обсяг каталогу та унікальність UX — основні фактори. Оцінимо ваш проект безкоштовно — замовте консультацію.

Чек-лист перед запуском

• Race condition при оплаті останнього товару — покритий тестом
• Ідемпотентність вебхуків платіжного шлюзу
• Rate limiting на ендпоїнтах кошика та checkout
• Canonical на фільтрованих сторінках каталогу
• Фіскалізація чеків (ФЗ-54 для РФ або аналог)
• Стрес-тест checkout під навантаженням (k6 або Locust)
• Моніторинг помилок (Sentry) та алерти на payment errors
• Backup бази даних з перевіреним restore-процесом

Гарантуємо — кожен проект проходить цей чек-лист перед релізом. Зв'яжіться з нами — підберемо оптимальну архітектуру під ваш бюджет та терміни.