Інтернет-магазин клієнта з каталогом на 20 000 SKU гальмував при кожному запиті. OpenCart-інсталяція на shared-хостингу з PHP 7.4 віддавала сторінку каталогу за 5 секунд — LCP становив 8 секунд, половина користувачів йшли до завантаження. Після міграції на PostgreSQL 15 з JSONB-атрибутами та підключення Elasticsearch 8.x час падіння до 200 мс, CLS упав з 0.35 до 0.02. Так народжується правильний інтернет-магазин — не шаблон, а архітектура, де кожна деталь впливає на швидкість і конвеєр замовлень.
Розробка починається не з вибору кольору кнопок, а з бізнес-моделі: управління складом, ціноутворення, логістика, маркетинг — все має бути узгоджено до рядка коду. Неправильний вибір стеку на старті економить час, але через рік перетворюється на технічний борг. Ми проводимо безкоштовний аудит і пропонуємо оптимальні рішення.
Кожен інтернет-магазин потребує індивідуального підходу: модель даних, інтеграції, навантаження. Універсальних рішень не існує. Отримайте консультацію щодо вашого проекту — оцінимо архітектуру та підберемо стек.
Як вибрати стек технологій для інтернет-магазину?
Вибір стеку вирішується виходячи з трьох факторів: обсяг каталогу, сценарії інтеграцій, заплановане навантаження. Типові варіанти:
| Сценарій | Стек | Обґрунтування |
|---|---|---|
| До 1 000 SKU, B2C, швидкий старт | Shopify + кастомний фронт на Next.js | Shopify бере на себе платежі, хостинг, PCI DSS. Підписка від $29/міс. |
| 1 000–50 000 SKU, складні фільтри | Laravel/Django + React/Vue, Elasticsearch | Гнучкість у моделі даних, повнотекстовий пошук. Ліцензія Elastic Platinum ~$2000/рік. |
| Високонавантажений маркетплейс | Microservices, Kafka, окремі сервіси кошика/замовлень | Масштабування за компонентами. |
| B2B з особистими кабінетами та прайс-листами | Custom ERP-інтеграція, контрактні ціни | Стандартні рішення не закривають логіку ролей. |
Для більшості проектів середнього розміру оптимальний моноліт з чіткими межами модулів — швидше в розробці, простіше в підтримці.
Чому модель даних каталогу критична?
Модель даних каталогу визначає все інше. Поширена помилка — робити таблицю products з колонками color, size, material напряму. Це працює до першого нестандартного товару. Правильний підхід: EAV (Entity-Attribute-Value) або JSONB-атрибути в PostgreSQL. Приклад схеми:
products (id, sku, slug, base_price, status) product_variants (id, product_id, sku, price_delta, stock) variant_attributes (variant_id, attribute_id, value) attributes (id, name, type, filterable, sortable) Для каталогів з різнорідними товарами (електроніка + одяг + меблі) використовуємо product types — кожен тип задає власний набір атрибутів. Саме так працює Akeneo PIM, який підключається при каталогах від 10 000 SKU.
Пошук та фільтрація
Стандартний SQL-пошук LIKE '%запит%' не годиться навіть для каталогу на 500 позицій — немає релевантності, морфології, синонімів. Опції:
- PostgreSQL FTS з
ts_vector— підходить до ~5 000 товарів, налаштування під російську мову через ispell або hunspell - Elasticsearch — full-featured: нечіткий пошук, буст по полях, синоніми, перколятор для «схожих товарів». Згідно з Elasticsearch Reference, агрегації дозволяють обчислювати кількість документів для кожного значення фільтра.
- Typesense — простіше в експлуатації, добре для невеликих команд
Фільтри за атрибутами будуємо через агрегації Elasticsearch: користувач бачить лише ті значення фільтрів, які дадуть ненульовий результат. Це faceted search — стандарт для ecommerce.
Як реалізувати faceted search
- Визначте атрибути товарів, які будуть фільтрами (ціна, бренд, розмір).
- Створіть mapping для індексу з коректними типами (keyword, float).
- Проіндексуйте товари з їхніми атрибутами.
- Виконайте агрегації по кожному фільтру в одному запиті.
- На фронтенді відобразіть агреговані значення та оновлюйте результати при виборі фільтрів.
Кошик та чекаут
Кошик — місце, де втрачається 60–80% конверсії. Критичні рішення:
- Гостьовий кошик зберігається в Redis з TTL 30 днів, при авторизації мержиться з серверним. Без гостьового кошика реєстрація стає бар'єром.
- Чекаут в один екран статистично кращий для B2C. Для B2B навпаки — потрібні кроки: реквізити, адреса доставки, схвалення менеджера.
- Розрахунок доставки в реальному часі: API СДЕК, Boxberry, Nova Poshta, DHL. Ставки залежать від ваги, габаритів, точки відправлення — обчислюється на льоту, не зберігається в таблиці.
- Платіжний шлюз: Stripe для міжнародних, CloudPayments / ЮKassa для РФ/СНД, Fondy / WayForPay для України. Інтеграція йде через webhook-підтвердження, статус замовлення змінюється лише після верифікації підпису. Комісія Stripe — 2.9% + 30¢ за транзакцію.
Управління замовленнями
Життєвий цикл замовлення — скінченний автомат (state machine). Стани: draft → pending_payment → paid → processing → shipped → delivered → completed. Плюс бічні гілки: cancelled, refunded, on_hold. Бібліотеки: winzou/state-machine для Laravel, xstate якщо частина логіки на фронті. Кожен перехід стану — подія, яка тригерить сповіщення (email, SMS, push), оновлення складу, запис у лог.
Інтеграції
Типовий набір для повноцінного магазину:
- 1С / МійСклад / Retailio — синхронізація залишків та цін через чергу (RabbitMQ/Redis Queue) з інтервалом 5–15 хвилин
- CRM (AmoCRM, HubSpot) — автоматична передача замовлень та лідів
- Email-маркетинг (Klaviyo, Mailchimp, Sendpulse) — тригерні ланцюжки: кинутий кошик, постпродаж, реактивація
- Аналітика: GA4 з Enhanced Ecommerce + серверний GTM для точних даних без впливу блокувальників реклами
Детальна схема інтеграції з 1С
Для обміну даними з 1С використовуємо CommerceML (cml) — XML-формат. Створюється черга RabbitMQ, куди 1С надсилає зміни. Consumer на PHP/Laravel розбирає XML та оновлює базу. Зворотна синхронізація замовлень у 1С — через REST API. Всі операції логуються для налагодження.Продуктивність та SEO
Сторінки каталогу повинні кешуватися. Стратегія: stale-while-revalidate — віддаємо кеш негайно, оновлюємо у фоні. Redis для серверного кешу, CDN (Cloudflare) для статики. SEO-специфіка ecommerce:
- Канонічні URL для сторінок з фільтрами — без цього пошуковики бачать тисячі дублів
- hreflang для мультимовних магазинів
- Schema.org розмітка: Product, Offer, AggregateRating — впливає на rich snippets
- Пагінація через rel="next"/"prev" або нескінченне прокручування з SSR-рендером першого екрану
Що входить в роботу
- Технічне завдання з описом функціональності та інтеграцій
- Прототипування інтерфейсів (Figma)
- Розробка бекенду з модулями каталогу, кошика, замовлень, особистого кабінету
- Фронтенд на сучасному стеку (React/Vue) з адаптивною версткою
- Інтеграції з платіжними системами, службами доставки, складськими системами
- Тестування (unit, інтеграційне, навантажувальне)
- Деплой на продакшн та налаштування моніторингу
- Документація з адміністрування
- Підтримка після запуску (гарантія на виправлення помилок протягом місяця)
Терміни та етапи
Типовий інтернет-магазин середнього масштабу (1 000–10 000 SKU, стандартний чекаут):
| Етап | Тривалість |
|---|---|
| Аналітика та проектування | 2–3 тижні |
| Бекенд: каталог + кошик + замовлення | 4–6 тижнів |
| Фронтенд | 4–6 тижнів |
| Інтеграції (1С, платіжка, доставка) | 2–4 тижні |
| Тестування та запуск | 1–2 тижні |
Разом: 12–20 тижнів для повноцінного проекту без готових шаблонів. Проекти на Shopify з мінімальними кастомізаціями — 4–8 тижнів. Ключовий принцип: інтернет-магазин запускається не тоді, коли готове все, а коли готове достатньо для перших продажів. Решта — ітерації. Зв'яжіться з нами для обговорення деталей.