Онлайн-каталог промышленной электроники и оборудования для компании «Delasia»
Задача
Компания «Delasia» обратилась к нам, чтобы создать онлайн-каталог своей продукции, который насчитывает более 600 тыс. товарных позиций.
Основная цель сайта — получать входящий трафик из поисковиков за счёт SEO-оптимизации карточек товаров по партномерам и артикулам.
Клиент хотел как можно быстрее разработать MVP и запустить проект, чтобы начать лидогенерацию.
Delasia занимается комплексными поставками оригинальной электронной и технической продукции для промышленных предприятий.
Требования к проекту
Работа над любым сайтом начинается со сбора требований. Часть из них касаются технической стороны проекта:
- В качестве исходных данных для каталога клиент предоставил SQL-выгрузку товаров и архив изображений.
- Было решено, что сайт пока не нуждается в CMS (админке).
- Для обновления товаров на сайте нужно настроить регулярный автоматический импорт из выгрузки.
Отдельная группа требований касается SEO — поискового продвижения:
- SEO-специалисты заказчика посчитали оптимальным оставить англоязычные наименования товаров, без перевода.
- При этом все разделы каталога, а также все характеристики в фильтре должны быть на русском языке.
- Сайт должен хорошо ранжироваться в поиске, поэтому нужно было учесть все требования по SEO для каталога и детальных страниц. В том числе прописать ЧПУ (человеко-понятные url), заголовки и метатеги.
В плане дизайна главное требование — соответствовать фирменному стилю (брендбуку).
Страницы и функции
Перед нами стояла задача разработать и запустить проект в кратчайшие сроки. Поэтому в план разработки попали только те страницы и функции, которые минимально необходимы для работы сайта:
- Главная страница с блоками: преимущества, разделы, новинки.
- Каталог с древовидной структурой разделов.
- Поиск по артикулам и названиям.
- Список товаров раздела с возможностью фильтрации по свойствам.
- Детальные страницы товаров с подробной информацией и блоком похожих продуктов.
- Форма заявки в разных местах сайта (на главной странице и на детальной странице товара).
Технологический стэк
PHP
Symfony
TypeScript
Nuxt
MongoDB
Tailwind CSS
В качестве базы данных мы выбрали MongoDB, потому что она хорошо подходит, чтобы хранить данные с разной структурой. Это часто полезно при разработке онлайн-каталогов, потому что у разных категорий товаров могут быть свои специфичные характеристики.
Для бэкенда мы традиционно используем PHP-фреймворк Symfony, потому что это проверенный временем, надежный и гибкий инструмент.
Фронтенд решили строить на фронтенд-фреймворке Nuxt 3. Его особенность — т.н. «универсальный рендеринг» (Universal Rendering), который сочетает лучшее из серверного рендеринга страниц (SSR) и одностраничных сайтов-приложений (SPA).
В результате сайт отлично индексируется поисковиками, и при этом предлагает пользователям максимально комфортный опыт.
В качестве библиотеки компонентов мы впервые попробовали Nuxt UI Pro и оказались довольны результатом. Nuxt UI Pro содержит много готовых компонентов, что позволяет быстро собирать страницы. Также, он сразу из коробки предлагает разные удобные мелочи, вроде темной и светлой темы.
При этом дизайн сайта можно легко адаптировать под фирменный стиль клиента благодаря тому, что в Nuxt UI используется популярная фронтенд-библиотека Tailwind CSS, которая упрощает вёрстку.
Рабочие процессы
Выстроенные рабочие процессы обеспечивают комфортное взаимодействие с клиентом и эффективную работу команды. Вот некоторые принципы, которые мы применяли на этом проекте:
- Сразу учитываем ограничения по срокам и бюджетам.
- Работаем по Time & Material (по факту выработанных часов).
- Чётко оговариваем зоны ответственности, как между нами и заказчиком, так и внутри нашей команды.
- Заранее закладываем в бюджет проекта ресурсы на правки, важные доработки и непредвиденные сложности, которые бывают на любом проекте.
- Стараемся максимально распараллеливать задачи. Например, разработку фронтенда можно начать ещё до того, как готов бэкенд, за счёт использования временных «моковых» данных.
- Проводим для заказчика регулярные демонстрации текущего состояния проекта.
- Простыми задачами занимаются разработчики, а за архитектурные вопросы (проектирование БД, логика работы фильтров) отвечает тимлид.
- Специалист по QA (тестировщик) внимательно проверяет проект перед запуском.
- Заранее готовимся к тому, что после запуска проекты, как правило, требуют дальнейшего развития и доработок на основании фидбека пользователей.
Результат
В итоге мы достигли поставленной задачи в запланированные сроки. Менее чем за 3 месяца был запущен полноценный онлайн-каталог с многоуровневым деревом категорий, фильтрацией, поиском, детальной страницей, подборками похожих товаров и с формами отправки заявки.
Оценить результат нашей работы можно по ссылке ниже: