Головна

Кейси

Розробка

Розробка інтернет-магазину комп'ютерної техніки

Розробка

Розробка інтернет-магазину комп'ютерної техніки

5 хвилин

NDA

Купити ігровий комп'ютер та комплектуючі | Збірка ПК, тестування FPS, гарантія

Проєкт являє собою розробку адаптивного та функціонального інтернет-магазину, який спеціалізується на продажу комп’ютерів, комплектуючих і супутніх товарів. Для реалізації сайту за порадою фахівців було обрано CMS OpenCart із купівлею шаблону, його стилізацією та дорозробкою необхідних плагінів.

Ринок:

Україна

Тривалість:

8 місяців

Tech:

Opencart

Технології:

Opencart

Javascript

SASS

Головною метою створення вебресурсу було залучення більшої кількості покупців, підвищення рівня конверсії та збільшення обсягів продажів. Також завдання передбачали автоматизацію процесів, зокрема автоматичний імпорт товарів із залишками, цінами та характеристиками через API та з зовнішніх майданчиків (Brain, Prom).

У процесі роботи виникла потреба самостійно доопрацьовувати та проєктувати відсутні блоки для мобільної версії, оскільки наданий Figma-макет був неповним. Окрім цього, траплялися технічні труднощі з боку клієнта, такі як помилка налаштування термінала інтернет-еквайрингу в Monobank, а також постійне розширення ТЗ додатковими вимогами та правками.

Розробники успішно реалізували автоматичний імпорт товарної номенклатури, доопрацювали модулі оплати й кредитування, а також налаштували специфічний функціонал на кшталт відображення FPS та ПК-конфігуратора. Після релізу 14 січня 2026 року та виконання основного пулу робіт команда перейшла на формат погодинної співпраці за запитами замовника.

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

Перелік вимог до вебпроєкту

Функціональні можливості та інтерфейс

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

детальний каталог із фільтрацією за характеристиками та сортуванням;
відображення показника FPS у іграх залежно від налаштувань графіки;
окремий конфігуратор ПК у картці товару;
кнопки швидкої купівлі, розстрочки від різних банків, порівняння та додавання в обране;
особистий кабінет із відстеженням замовлень, можливістю передплати та оформленням заявок на гарантійний ремонт;
окрему сторінку для сервісу TRADE-IN.

Технічні вимоги та інтеграції

Розробка передбачалась на CMS із захистом даних. Головне завдання - автооновлення залишків, цін та характеристик від постачальників через API. Також мала бути закладена інтеграція з «Новою Поштою», платіжками (Privat, MONO, RozetkaPay) та SEO-оптимізація проєкту.

Встановленням систем аналітики (Google Analytics, Merchant Center) займався підрядник клієнта після релізу сайту.

Дизайн, управління та терміни

Дизайн був передбачений адаптивний, у червоно-чорно-сіро-фіолетовій гамі. Адмінка мала підтримувати розподіл прав, імпорт/експорт товарів (YML/Excel) та керування акціями.

SEO-рекомендації щодо розробки сайту

Терміновий пріоритет

Мова сайту та hreflang:
- Перемикач мов у шапці зі збереженням поточного URL.
- Повна локалізація контенту, інтерфейсу та SEO-елементів під всі мовні версії.
- Атрибути <html lang="..."> (uk, ru, en) та теги <link rel="alternate" hreflang="..."> (включно з x-default) у <head>.
Канонізація (canonical):
- <link rel="canonical"> на всіх сторінках.
- Пагінація (?page=2) — вказує на саму себе.
- Динамічні сторінки/сортування (?sort=) — вказують на чисту сторінку без параметрів.
301-редиректи: SSL-сертифікат та 301-редирект з http:// на https:// для всього сайту.

Важливий пріоритет

Правила URL (ЧПУ):
- Тільки дефіси - (без _, пробілів, кирилиці, спецсимволів та ID).
- Структура папок: / (UA), /ru/ (RU), /en/ (EN) з транслітерацією/перекладом ключів.
Оптимізація зображень:
- Шаблони: alt = H1 назва товару, title = H1.
- Формат WebP, осмислені назви файлів (без IMG_1234), loading="lazy", точні фізичні розміри (не CSS-фон) та окремий image-sitemap.xml.
Індексація та sitemap.xml:
- Метатег <meta name="robots" content="noindex, follow" /> для пошуку, кошика, реєстрації та оформлення/підтвердження замовлення.
- Автооновлюваний sitemap.xml (тільки сторінки з кодом 200 OK, до 50k URL / 50 МБ) + посилання в robots.txt.
Шаблони метатегів (ручні правки в адмінці в пріоритеті):
- Категорії:
  - Title: [Назва категорії] купити в Україні |
  - Description: Замовити [назва категорії] за вигідною ціною. Доставка по Україні, Гарантія якості |
- Товари:
  - Title: [Назва товару] купити |
  - Description: Купити [назва товару]. Ціна, відгуки, характеристики. Швидка доставка від
Мікророзмітка: Product, BreadcrumbList, Organization, Review / AggregateRating, LocalBusiness, ImageObject та Open Graph (для соцмереж).
Дублі головної: 301-редирект на рівні сервера з /index.php та /home.php на [https://**.in.ua/](https://**.in.ua/).

Середній пріоритет

Нові сторінки (з унікальними Title, Description, H1):
- /kontakti/ (Контакти)
- /politika-konfidencijnosti/ (Політика конфіденційності)
- /obmin-ta-povernennya/ (Обмін та повернення)
- /pro-nas (Про нас)
- /dostavka-ta-oplata/ (Об'єднана сторінка «Доставка та оплата»)
Оптимізація швидкості (PageSpeed): Мініфікація та прибрання зайвого JS/CSS, усунення ресурсів, що блокують рендеринг, налаштування кешування.
Сортування товарів: За замовчуванням спочатку товари в наявності; додатково: «За зростанням ціни», «За зниженням ціни», «За популярністю».

Технічні вимоги до переносу та robots.txt

Перенос (Stage ➔ Production): Розробка на закритому тестовому домені; при релізі перевірити відсутність посилань, тегів чи ресурсів з адресою тестового домену (наприклад, stage.***.com.ua).
Файл robots.txt: Закрити /admin/, /system/, /storage/, /catalog/, /download/, /compare-products/, /wishlist/, адреси з route=; відкрити /image/ та вказати посилання на sitemap.

Затверджена карта сайту:

Розробка інтернет-магазину компютерної техніки

Розробка інтернет-магазину компютерної техніки - картинка 2

Для розробки сайту замовник обрав варіант купівлі шаблону Opencart з додатковою розробкою відсутніх плагінів та наближеної стилізації до дизайну. Обрану CMS порадили наш програміст та SEO-спеціаліст, адже Opencart є найкращою опцією для великого інтернет-магазину, і WordPress не підходила для цього випадка. Також одразу передбачалась зміна хостингу на ukraine.com.ua.

Проте дизайн Figma-макету мобільної версії потребував суттєвого доопрацювання. У наданому макеті була відсутня частина необхідних блоків, тому під час верстки довелося самостійно проєктувати та адаптувати недостатні елементи, орієнтуючись на ПК-версію сайту.

Водночас ми надали клієнту шаблон метаданих до виконання й рекомендації щодо фільтрів від SEO-команди.

Одним з основних завдань було створення автоматичного імпорту товарів із маркетплейса Брайн та свого магазину клієнта на Пром. Обидва завдання були виконані – наразі товари імпортуються автоматично з усіма характеристиками, картикнами, цінами та описами.

SEO-рекомендації щодо фільтрів сайту

Фільтри мали створюватися автоматично на основі характеристик після імпорту товарів, надлишкові ж було вирішено вимкнути перед релізом.

Захист від дублів та сміттєвої індексації:

Сторінки динамічних фільтрів мали містити canonical на батьківську категорію та метатег <meta name="robots" content="noindex, follow">.
У robots.txt динамічні фільтри слід було закрити від сканування (через Disallow: /*?filter= тощо).
При використанні GET-параметрів порядок змінних у URL мав бути суворо фіксованим.

Гнучкість для майбутнього SEO-просування:

Система мусила мати можливість відкривати окремі важливі фільтри для індексації, налаштовувати для них ЛЗУ (людино-зрозумілі URL, наприклад: /bilij-noutbuk-lenovo/), унікальні метатеги, власні canonical та розміщувати SEO-текст.

Тоді ж ми доробили модуль Оплати частинами з допрацюванням кода нашим програмістом. У грудні 2025 розпочали імпорт товарів згідно структури товарного каталогу.

14 січня 2026 відбувся реліз сайту. Для безпеки ми тимчасово закрили його від індексації (robots.txt та noindex в head).

Конфігуратор комп’ютерів. Для його розробки ми взяли за основу вже затверджений дизайн сайту.

Також ми протестували відпрацювання модулю Monobank - для перевірки реальної оплати створили тестовий товар, проте проведення платежу не пройшло. Monobank повертав помилку:

{"errCode":"FORBIDDEN","errText":"you don't have active terminal for internet acquiring"}.

Причина була на боці клієнта в особистому кабінеті - Monobank не був активований або не налаштований термінал для інтернет-еквайрингу. Ми передали це на сторону клієнта.

У січні отримали від клієнта ТЗ щодо відображення продуктивності техніки і FPS.

Функціонал вкладки: У картці товару додати нову вкладку «Тести і продуктивність», яка мала відображатися лише за наявності заповнених даних.

Адміністрування: Усі показники (статичні тести та FPS у іграх) контент-менеджери заповнюють вручну в адмін-панелі товару.

Статичні тести: Передбачено вивід трьох загальних показників — максимальне енергоспоживання (Вт), результат бенчмарку 3DMark (бали) та час рендеру в Blender.

Ігрові тести (FPS): Для товару один раз задаються загальні параметри (роздільна здатність екрана та пресет графіки), після чого заповнюється значення FPS для вибраних ігор зі списку номенклатури.

Логіка виводу: Порожні блоки та ігри без вказаного значення FPS автоматично приховуються.

Інтерфейс: Дані відображаються у режимі «тільки для читання» у єдиному стилі сайту з адаптацією під ПК та мобільні пристрої.

Всі додаткові доопрацювання були погоджені та додані до беклогу.

У березні 2026 року клієнт розширив технічне завдання та додав нові вимоги до вебресурсу.

Мав бути налаштований перехід до швидкого замовлення під час вибору пункту самовивозу «Нової Пошти».

Передбачалось додавання можливості мультизавантаження декількох фото до товару одночасно.

Слід було налаштувати розширену електронну комерцію (eCommerce), Consent Mode та відстеження офлайн-конверсій.

Виникла необхідність оформлення модуля кредитування й кнопки «Купити в кредит», а також додавання стікерів «Оплата частинами» на картки товарів у каталозі.

Правки щодо візуальних елементів та стікерів:

Додавання іконок платіжних систем (Apple Pay, Google Pay, Visa тощо) у блок оплати.
Вивід стікера «Безкоштовна доставка» (Free) для відповідних товарів.
Адаптація вигляду характеристик на мобільних пристроях.

Футер (підвал сайту): Додавання рейтингу та відгуків із Google Карт.

Опрацювання логіки кредиту Приват/Моно.

У квітні з клієнтом погоджено переїзд на новий хостинг + налаштування.

Станом на травень 2026 в доопрацюванні було: