png png
к ленте

Интернет-магазин техники Бигам. Новые технологии и дизайн

Июль'23

Бигам — федеральная сеть Центров инструмента и техники, один из крупнейших поставщиков профессионального рабочего оборудования на отечественном рынке.

За время существования интернет-магазин Бигам накопил ряд технических проблем. Клиент выделили три основные:

  • Сайт работал медленно, главная страница могла открываться до 30 секунд, фильтрация не справлялась с множеством характеристик, менеджеры с трудом заводили товары.
  • Отслеживать состояние кода было проблематично. Интернет-магазин поддерживали несколько подрядчиков и правки в одном интерфейсе влияли на соседний, версионность не велась.
  • Интернет-магазин был написан на устаревших технологиях.

Технический аудит наших специалистов подсветил и другие проблемы:

  • некорректная настройка резервного копирования;
  • ошибки в структуре баз данных;
  • некорректная настройка кэширования;
  • некорректная работа почтовой системы;
  • низкая работоспособность;
  • угрозы безопасности;
  • неиспользуемые строки кода;
  • визуальные ошибки.

Наши команды — Бигам и Ареал — приняли решение отказаться от старого сайта и создать новый интернет-магазин.

Выбираем технологии

Приоритет нового интернет-магазина: скорость загрузки и фильтрации. В каталоге Бигам более 40 000 sku, большинство — одинаковые товары с разными характеристиками. В ситуации с большим каталогом технологический стек лучше утверждать через технический прототип — проработанный бэкенд каталога с простым дизайном и загруженными товарами.

Мы остановились на связке 1С-Битрикс с Elasticsearch. Такая связка обеспечивает поиск по товарам и удобную административную часть. Внутри 1С-Битрикс комфортно создавать поля для товаров. Elasticsearch при работе с фильтрами быстро отдает данные. Тестирование прототипа показало хорошие результаты.

Frontend интернет-магазина работает на Nuxt js. Детально про архитектурное решение для Бигам вы можете прочитать в статье.

paevl-volkov
Павел Волков
тимлид
Nuxt — фреймворк на основе Vue.js для создания универсальных приложений. Он предлагает принципиально другой подход к работе с frontend-ом сайта. Nuxt поддерживает SSR, server side rendering. Эта технология рендеринга сайта увеличила скорость загрузки и позволила поисковикам корректно индексировать страницы. С Битриксом Nuxt общается через rest api.

Обновляем дизайн

Основные покупатели Бигам — это мужчины строители 40+ лет, которые на объектах проверяют наличие товаров в магазине через смартфон. Для таких пользователей сайт должен быть простым, понятным, с легко читаемой навигацией.

Дизайнер выбрал:

  • четкие крупные шрифты, без засечек;
  • максимальный контраст считывания цветов;
  • крупные кнопки для удобной работы со смартфона;
  • отсутствие анимации, чтобы не отвлекать пользователя;
  • интуитивно понятный интерфейс с акцентными точками на каждом шаге покупки.

Проделана большая работа с визуализацией системы ценообразования. В Бигам стоимость товара зависит от многих факторов: город, авторизация, место покупки, индивидуальная скидка. Недостаточно вывести финальную цену, важно показать выгоду и возможные скидки.

Интернет-магазин Бигам

Оптимизируем функции под seo

Интернет-магазин Бигам — современный проект по стандартам рынка. Адаптивность, умный поиск, сравнение, избранное, личный кабинет, возможность заказать доставку DPD или CDEK, эквайринг, онлайн-касса — все на своем месте.

Интернет-магазин Бигам

Компания большое внимание уделяет seo. Это основной способ привлечения аудитории. Помимо интеграции с сервисами Mindbox, AdvCake, Admitad команды Ареал и Бигам продумали ряд особенностей, благодаря которым поисковики видят информацию по всем категориям каталога и разделам карточки товара.

Категории каталога

Каталог интернет-магазина достигает восьми уровней вложенности. Восемь пунктов хлебных крошек смотрятся тяжеловесно. Мы предложили добавить фильтры по тегам, чтобы сократить вложенность, но оставить отдельные лендинги для продвижения и пользователей.

Для создания страницы с подборкой нужно отфильтровать каталог по определенным параметрам товаров. В административной части это сделать проблематично — характеристики относятся отдельно к каждому товару. Поэтому мы вынесли формирование тегов в публичную часть. Менеджеры используют фильтр публичной части интернет-магазина, чтобы отобрать товары для тега. Название и мета-данные присваиваются через всплывающее окно. Инструмент пользуется популярностью — создано более 4000 тегов.

Интернет-магазин Бигам

Наравне с большой номенклатурой Бигам имеет большую сетку брендов. В отдельном разделе их названия разделены по алфавиту и категориям. Внутри автоматически собираются позиции конкретного производителя.

Интернет-магазин Бигам

Карточка товара

По-умолчанию заголовок карточки товара — его название, например «Бензиновый триммер Энергомаш БТ-43 в Ярославле». При переходе между табами «Характеристики», «Рейтинги», «Где купить» заголовки меняются. «Характеристики бензиновый триммер Энергомаш БТ-43 в Ярославле», «Отзывы бензиновый триммер Энергомаш БТ-43 в Ярославле». Благодаря такой смене индексируется абсолютно вся информация по товару.

anastasiya-lebedeva
Анастасия Лебедева
менеджер проекта
Правильная SEO-оптимизация — важный аспект работы для нового сайта Оптимизаторы со стороны Бигам были инициаторами задач. Мы со своей стороны предлагали технологические и функциональные решения. После запуска нового сайта восстановлены все seo-показатели.

Значительную часть каталога Бигам составляют одинаковые товары с разными характеристиками. Например, дрели разных мощностей. С точки зрения бэка — это отдельные позиции, с отдельными карточками. Чтобы пользователь видел весь ассортимент товара и не фильтровал каталог по новой, мы реализовали переключатели по характеристикам. Технически при переходе между параметрами пользователь или поисковик при индексации переходят на карточку другого товара, однако в восприятии потребителя такого перехода не случается.

Интернет-магазин Бигам

Обеспечиваем безопасность

Закончив разработку, мы взяли на сопровождение серверное окружение и инцидентную поддержку при аварийных ситуациях. В качестве сервиса-мониторинга работает Zabbix. Если обнаружена ошибка, то менеджеру и клиенту приходят оповещения в Телеграм.

Настроены стандартные метрики:

  • проверка потребления процессора, памяти, диска;
  • мониторинг сетевых узлов через ICMP ping;
  • проверка работы Apache, Nginx и MySQL (отвечают за сервер и базу данных).

Нестандартные проверки:

  • работа сервиса Elasticsearch;
  • загрузка страниц разных типов (список товаров, карточка, раздел промо, бренды, поиск и т.д.);
  • работа резервной копии;
  • программа для защиты сервера от атак с фиксацией количества заблокированных пользователей;
  • загрузка всех элементов главной страницы.
yuriy-spirridonov
Юрий Спиридонов
исполнительный директор
Метрика «загрузка всех элементов главной страницы» отслеживает скорость отдачи главной. Бигам обратили внимание, что в разное время суток страница открывается с разной скоростью. Сбор данных поможет определить, когда начинается торможение: ночью во время резервного копирования, выгрузки или в течение дня, когда есть покупательская активность. На основе статистики понятными станут причина и её решение.

Выводы

Сейчас сайт работает стабильно. По данным сервиса pr-cy скорость загрузки HTML — 0.35 сек — быстрее чем 78% проверенных сайтов. Первая отрисовка контента занимает 0,6 сек.

Пользователи быстро перемещаются по каталогу благодаря фильтрации на технологии Elasticsearch. Менеджеры Бигам не испытывают трудностей при работе с административной частью. Поисковые роботы индексируют всю представленную на сайте информацию о товарах, что помогает поддерживать ежемесячную посещаемость на уровне практически миллиона пользователей.

Если вам понравился проект или у вас появились вопросы, то напишите через или на почту hello@arealidea.ru, и наш специалист проведет короткую онлайн-консультацию.