Строим онлайн-продажи: сайт для магазина стройматериалов
В статье расскажем о разработке сайта, который увеличивает продажи стройматериалов: технологии, опыт и результаты в одном кейсе.
В апреле 2024 года к нам обратился заказчик с запросом улучшить сайт магазина строительных материалов.
Ознакомившись с сайтом, мы обнаружили, что система Битрикс демонстрировала низкую производительность, рабочей связки с базой 1С не было, также отсутствовали полноценная документация и выстроенные бизнес процессы продаж, и кроме этого не было возможности эффективного масштабирования на новые регионы. Поэтому с учётом всех амбиций и планов развития бизнеса заказчика было принято решение создать новый сайт.
Мы провели подробный брифинг заказчика, определили боли и цели его бизнеса, вывели основные направления работы и применили правило золотого сечения: берём в реализацию только полезное, ничего лишнего, поддерживаем равновесие между пользой и стоимостью разработки.
Приоритетной задачей проекта была синхронизация каталога товаров с удалённой базой данных 1С, чтобы обеспечить актуальность цен и остатков товаров на складе с перспективой выхода в новые регионы.
Кроме этого, новому сайту требовался функционал, позволяющий регистрировать в личном кабинете одной учётной записи несколько юридических лиц для удобного оформления оптовых заказов.
И так как цели заказчика во многом типичны для ecom направления, мы решили создать на основании данного проекта коробочное решение, которое можно быстро реализовать под конкретную задачу любого интернет магазина.
Что мы реализовали
- Синхронизацию с 1С
Мы настроили автоматическую выгрузку данных о товарах, остатках и ценах из удалённой базы данных 1С, обеспечив актуальность информации на сайте, что особенно важно для работы с большим ассортиментом товаров.
Онлайн-платежи
Интегрировали платёжную систему Юкасса для удобной оплаты заказов, чем повысили общее удовлетворение покупателей и увеличили конверсию продаж.
Интеграцию с Я.Картами
Для удобства пользователей мы добавили возможность просмотра и поиска магазинов на карте с помощью интеграции с сервисом Я.Карты - так покупатели быстрее находят ближайшие точки продаж.
- SEO-оптимизацию
Мы реализовали проработанные механизмы для повышения видимости сайта в поисковых системах: оптимизацию мета-тегов, создание дружественных URL, настройку карты сайта и корректную работу с файлами robots.txt, чем увеличили органический трафик. А внедрение SSR (Server-Side Rendering) позволило ускорить загрузку страниц и индексацию контента поисковыми системами. Теперь поисковые роботы быстрее и эффективнее обходят сайт, а пользователи получают более быстрый доступ к информации.
Удобный каталог
Позволяет быстро находить нужные товары с помощью фильтров по категориям, брендам, характеристикам и ценовым диапазонам. Интуитивно понятный интерфейс и поиск по ключевым словам, сортировка по популярности, новинкам и отзывам помогают сэкономить время и упростить выбор.
- Умный поиск
Система была разработана на базе MantiCore, что существенно повысило точность и скорость поиска товаров. Пользователи могут находить нужные позиции даже при наличии опечаток или синонимов в запросах.
- Информативную карточку товара
В ней указаны ключевые характеристики, такие как артикул, тип товара, бренд, размеры, состав и другие технические параметры. Тут же прикреплены файлы с документацией: сертификатом соответствия, инструкцией по эксплуатации и монтажу. Это позволяет покупателю легко ознакомиться с деталями товара, проверить его соответствие стандартам и узнать, как правильно его использовать или устанавливать. Визуально карточка устроена так, чтобы вся информация была доступна без лишних кликов, что делает процесс выбора максимально удобным.
- Адаптивный дизайн
Дизайн сайта был оптимизирован для корректного отображения на различных устройствах, включая смартфоны, планшеты и настольные компьютеры. Это гарантирует удобство использования независимо от типа устройства.
- Личный кабинет
В личном кабинете можно зарегистрировать нескольких юридических лиц. Это упрощает процесс формирования оптовых заказов и позволяет управлять несколькими профилями компаний через один аккаунт.
- Избранное и сохранение корзины
Мы реализовали возможность добавлять товары в «Избранное» и сохранять содержимое корзины для авторизованных пользователей. Это позволяет клиентам возвращаться к своим покупкам позже, не теряя прогресса.
- Услуги
На сайте можно не только купить товары, но и оформить дополнительные услуги.
Помимо доставки, доступна услуга подъёма товара на этаж, что особенно удобно для крупных или тяжёлых изделий, которые сложно донести самостоятельно.
Также можно заказать разгрузку товара, а при необходимости — разгрузку с помощью манипулятора, что значительно ускоряет процесс, особенно при больших объёмах.
Для тех, кто покупает строительные материалы, требующие точных размеров, предлагается услуга распила, чтобы сразу получить готовые к использованию детали.
Все эти услуги можно выбрать при оформлении заказа, что делает процесс покупки более комфортным и адаптированным под нужды клиента.
- Оформление доставки
Если пользователь хочет, чтобы товары ему привезли, он может оформить доставку, выбрать предпочтительную дату и время для получения покупки, а также выбрать способ оплаты: наличными или картой при получении, что удобно для разных категорий покупателей. Помимо этого, пользователю нужно указать контактную почту и телефон для оповещения о статусе доставки, что помогает быть в курсе всех этапов. В карточке заказа также есть возможность оставить комментарий для магазина.
Все эти функции делают процесс покупки и получения товара максимально комфортным и прозрачным для покупателя.
- Автоматическое резервное копирование данных
Для обеспечения надёжности и защиты данных мы внедрили механизм резервного копирования с целью восстановления информации в случае сбоев или непредвиденных ситуаций, минимизируя риски для заказчика.
Архитектурные решения
Мы реализовали модульный монолит на основе Domain-Driven Design (DDD). Весь проект разработан в рамках одного приложения, а не как набор микросервисов. При этом он делится на несколько модулей, каждый из которых отвечает за отдельную область функционала.
Хотя модули логически разделяют бизнес-логику системы, они взаимодействуют друг с другом через внутренние интерфейсы.
Это позволяет:
- Изолировать изменения: разработчики могут заниматься одним модулем, не затрагивая другие. Так уменьшается вероятность ошибок и улучшается поддержка продукта.
- Повторно использовать код. Например, функциональность работы с заказами может быть использована в разных частях приложения без необходимости её перерасчёта.
Масштабируемость реализации
В коробочном решении могут быть модули, реализующие отдельные области, например:
- Модуль работы с заказами управляет процессом оформления и выполнения заказов.
- Модуль каталога товаров предоставляет функциональность для добавления, поиска и сортировки товаров.
- Модуль работы с покупателями занимается учётом, регистрацией пользователей и их профилями.
Когда появляется необходимость добавить новый проект или функциональность, не нужно создавать эти базовые модули с нуля. Вместо этого новые модули можно добавлять по мере необходимости.
Например, добавление модуля для работы с отзывами о товарах или модуль рекомендаций — это просто дополнение к существующему решению.
Модули могут быть взаимозаменяемыми. Если нужно изменить какой-то аспект функционала (например, модификация работы с заказами), можно просто обновить или заменить соответствующий модуль, не затрагивая остальные.
Преимущества модульного монолита
- Ускорение разработки. Наличие уже готовых функциональных модулей позволяет быстрее запускать новые проекты.
- Гибкость и масштабируемость. Хотя система и является монолитом, при этом есть возможность добавлять новые модули, поэтому решение может быть адаптировано под конкретные нужды.
- Управляемость и поддержка. Когда функционал четко разделён на модули, легче следить за качеством кода и проводить тестирование, так как каждый модуль можно протестировать отдельно.
Мы реализовали модульный монолит, потому что его архитектура хорошо подходит для быстрого развития продукта: когда требования могут изменяться и добавляться по мере роста бизнеса, но важно изначально правильно спроектировать взаимодействие между модулями.
Фронтенд: SSR для быстрой загрузки
Для клиентской части мы использовали подход Server-Side Rendering (SSR). Он позволяет улучшить производительность сайта, обеспечивая быструю загрузку страниц и улучшая SEO.
Реализация SSR потребовала значительных усилий, однако результат превзошёл ожидания.
Команда и стек технологий
Команда:
- PM
- PHP, Laravel
- React
- QA
- Продуктовый бизнес-аналитик
- UX/UI дизайнер
Стек технологий:
- PHP
- React
Результаты проекта
Разработанный сайт стал удобным инструментом для заказчика, упростив процесс взаимодействия с клиентами. Благодаря адаптивному дизайну и интуитивно понятной навигации пользователи легко находят строительные материалы, оформляют товары и услуги онлайн. Интеграция с системами учёта, платежей и доставки автоматизировала множество процессов, минимизировав ручной труд и ошибки.
Сайт предоставил клиентам доступ к полному ассортименту продукции, актуальным ценам и условиям доставки, что помогло укрепить отношения с существующими клиентами и привлечь новых. В результате проект стал эффективным инструментом для масштабирования бизнеса заказчика и повышения продаж.
Разработанное нами коробочное решение является универсальным для ecom-направления и позволяет быстро создавать сайты и сэкономить бюджет заказчика.
Оно адаптируется под потребности бизнеса и включает:
Удобные инструменты для управления товарами.
Интеграцию с платёжными системами.
Автоматизацию процессов учёта и доставки.
Интуитивную административную панель.
Благодаря своей гибкости и надёжности, решение подходит для компаний различного масштаба и отраслей, ускоряя запуск онлайн-продаж и упрощая взаимодействие с клиентами.