Модернизация интернет-магазина Moto85 с масштабным контентным разделом

1. Вводная задача от заказчика, проблематика, цели

ЗАКАЗЧИК

Moto85.ru – интернет-магазин мотоэкипировки и аксессуаров. За время своего существования бизнес вырос, в разы увеличил ассортимент продукции, стал официальным дилером нескольких брендов. Магазин достаточно популярен в мотосреде благодаря индивидуальному подходу, возможности как покупки имеющихся на складе товаров, так и заказов уникальных позиций у производителей по разумным ценам.

ЗАДАЧА

Созданный сайт перестал отвечать современным требованиям как с точки зрения дизайна и удобства использования, так и скорости работы. Кроме того, его уже невозможно было поддерживать.

Специалисты «Логемы» провели анализ имеющегося решения и составили список необходимых работ по его модернизации:

• настройка нового сервера;
• обновление версий технологического стека («Битрикс» и PHP);
• внедрение современного готового решения «Аспро: Максимум»;
• интеграция с учетной системой «МойСклад»;
• перенос контентной части сайта с сохранением содержания, тегов, ссылок и фильтров;
• доработка дизайна готового решения;
• в процессе переноса важно сохранить SEO-настройки и места в поисковых выдачах.

Работа с клиентом велась через выделенного менеджера, который помогал создавать задачи, контролировать их распределение среди программистов, исполнение, перенос и тестирование.

Заказчик

., .

Старый сайт мы в принципе уже не могли обновить на новую версию Битрикс из-за большого количества доработок, которые не документировались и нигде не хранились централизованно. Мы даже опасались его дорабатывать, потому что из-за этого регулярно что-то падало.

Заказчик

., .

Весь процесс разработки фиксируется в системе YouTrack: список задач в работе, их статус и прогресс выполнения. Не было формата «мы сделали – вы там сами проверяйте». Это был один из критериев выбора «Логемы» как подрядчика.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

ОБНОВЛЕНИЕ ТЕХНОЛОГИЧЕСКОГО СТЕКА

Была установлена свежая версия «Битрикс» и обновлен PHP до версии 8.0. Это позитивно повлияло на скорость работы сайта, безопасность и доступность технической поддержки. Обновление PHP также дает возможность использовать новые функции и современные модули, работающие только с восьмой и выше версиями. С их помощью проще организовать внешние интеграции – на данный момент выполнена интеграция с CRM «МойСклад», но в будущем можно работать и с иным ПО.

НАСТРОЙКА НОВОГО СЕРВЕРА

На старом сайте вся конфигурация настраивалась через ISPmanager. Хотя графический интерфейс этого ПО интуитивен и понятен, для этой задачи он избыточен, поскольку влияет на скорость работы, а настройки, включая настройки домена, почты, nginx и httpd разбросаны по разным разделам, и иногда находятся вне самого ISPmanager. Поэтому наши специалисты решили настраивать конфигурацию нового сервера вручную, по стандартной схеме.

Настройка софта под сайт

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

Мониторинг

Для мониторинга в реальном времени был установлен Zabbix, добавлена конфигурация для мониторинга хоста со стороны нашего Zabbix-сервера, прикреплены стандартные шаблоны для мониторинга ресурсов, проверки robots.txt и наличия http-авторизации.

Набор проверок включает в себя проверки уровня ОС, уровня используемого софта, проверки работы конечного сайта и критических бизнес-функций (например наличие и доступность robots.txt по HTTP, возможность увидеть каталог товаров и корзину).

Настройка работы по протоколу TLS/SSL

Использованы штатные средства BitrixVM (скрипт menu.sh, let's encrypt); включен редирект с http-схемы на https.

Настройка исходящей почты

Конфигурация msmtprc-клиента для делегирования отправки почты почтовому серверу заказчика.

Настройка бэкапа

Настройка бэкапа производилась с использованием стандартных инструментов Bitrix Framework. Резервное копирование проекта выполняется ежедневно в автоматическом режиме; это делается ночью, когда нагрузка на сайт минимальная. Процесс запускается с использование агентов на cron, резервная копия хранится в папке сайта. Архивируются: база данных, ядро и публичная часть. Для экономии дискового пространства настроено удаление локальных резервных копий, если их больше двух.

ВНЕДРЕНИЕ «АСПРО»

«Аспро: Максимум» – универсальное решение для создания интернет-магазинов на базе «Битрикс», обладающее отличным соотношением цена/качество. Содержит большое количество готовых шаблонов и инструментов для их настройки, что позволяет не разрабатывать с нуля типовые компоненты сайта. В данном случае было проведено несколько кастомизаций «Аспро» под потребности клиента и для решения отдельных локальных задач.

Одной из таких задач стал вывод на сайте цен со скидкой. У товаров в CRM может быть две цены – стандартная и акционная. Необходимо было выводить на сайте обычную цену зачеркнутой, а актуальной считать цену со скидкой. Одновременно именно вторую цену нужно учитывать в фильтрах, при сортировке, работе с корзиной, в личном кабинете.

ИНТЕГРАЦИЯ С «МОЙСКЛАД»

«МойСклад» – SaaS решение для управления торговлей и автоматизации складского учета. В данном проекте оно выполняет роль CRM и учетной системы, где сотрудники магазина работают с товарами, их наличием, ценами. Необходимо было синхронизировать сайт и «МойСклад», чтобы заказы отправлялись в эту систему, а любые изменения товарных позиций автоматически отражались на сайте.

Работа с «МойСклад» реализована через API: в сервис отправляется запрос, в ответ он с помощью вебхуков передает все изменения заказа . Также был реализован обработчик события создания заказа: данные передаются в «МойСклад», где формируется заказ. Кроме того, при появлении новых товарных позиций в сервисе они автоматически передаются на сайт и появляются в каталоге в виде позиции с ценой и кратким описанием (анонс). Полное описание и изображения товаров контент-менеджер добавляет в каталог вручную.

Стандартную синхронизацию сервиса пришлось дополнить, в частности, убрав ненужные стандартные поля и добавив собственные. Так, было добавлено поле «комментарий менеджера», который не виден клиенту. Этот функционал был реализован с помощью отдельного API․

ПЕРЕНОС РАЗДЕЛА «СТАТЬИ»

На сайте имеется обширный раздел «Статьи», в котором собраны уникальные экспертные тексты мотоциклетной тематики, как практические советы для покупателей, так и новости, обзоры, тесты техники. Этот раздел надо было перенести в новую рубрику «Блог» с сохранением изображений, SEO-тегов и фильтров, а также настройкой корректных редиректов ссылок внутри имеющихся статей. Такой перенос логично делился на четыре этапа: перенос данных, перенос тегов, обновление тегов и проверка корректности внутренних ссылок.

Перенос данных

Первым шагом переноса данных было создание инфоблоков на новом сайте с переносом параметров и свойств (бренд, тип товара, тема статьи) с помощью XML.

Для переноса всех элементов (текстов и изображений) с сохранением их свойств был использован стандартный функционал «Битрикс» – Экспорт элементов инфоблока в формате CSV (new). Поскольку тексты на старом сайте были в кодировке Windows-1251, а новый сайт использует UTF-8, после экспорта файл CSV конвертировался.

Затем были изменены настройки компонента «Битрикс» Bitrix:news, после чего все данные статей стали отображаться в новом разделе «Блог». Перенос прошел в штатном режиме, проблем на данном этапе не возникло.

Перенос SEO-тегов

Проблема второго этапа состояла в том, что на старом сайте теги были реализованы через свойства элементов инфоблоков. При таком решении для их вывода пришлось бы менять код в шаблоне компонента на новом сайте. Более правильным с точки зрения архитектуры решения было использование возможностей решения «Аспро: Максимум»: его верстка компонента Bitrix:news предусматривает вывод поля «Теги» элемента как облака тегов. Это облако позволяет пользователю удобнее искать нужные статьи.

Был написан PHP-скрипт, который делает выборку по заполненным свойствам TAGS, после чего переносит их в соответствующее поле. Скрипт выполнился без ошибок, облака тегов появились на детальных страницах.

Новый фильтр для статей

Заказчику был нужен фильтр для удобства навигации и SEO-оптимизации. Конкретных требований было три:

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

Стандартный шаблон фильтра, использовавшегося в разделе «Блог», не подходил, и готовое решение отсутствовало. Было необходимо разработать новый функционал, который бы сохранял установленные значения фильтров в файлах cookie, а при загрузке новой страницы проверял их наличие и автоматически заполнял чекбоксы страницы, если фильтры установлены. Новый шаблон фильтра также потребовал написания и подключения стилей для мобильной версии, необходимых для адаптивной верстки (правильного отображения шаблона на различных разрешениях).

Работоспособность и корректность отображения фильтра проверялись вручную с помощью выставления одинаковых параметров на старом и новом сайте.

Внутренние ссылки

В элементах раздела «Статьи» старого сайта присутствовали абсолютные ссылки, использовавшие полный HTTP-адрес, а не относительный путь. Эти ссылки вели на страницы старого сайта, а поскольку на тот момент контента было много, их ручные поиск и замена не представлялись возможными. На финальном этапе работы потребовалось написать еще один скрипт, который бы делал выборку элементов инфоблока, текст которых содержал любые ссылки. Скрипт с помощью регулярного выражения ищет все вхождения HTML тега в тексте, включая их содержимое, но без учета вложенных тегов .

Этот скрипт позволил выгрузить все абсолютные ссылки в отдельный файл, после чего были написаны редиректы на новые разделы.

Финальные доработки

По окончанию работ и перед деплоем на новый сервер были перенесены данные всех пользователей, у них сохранились прежние логины. Но пароли пришлось обновлять: клиентам было отправлено письмо на email о восстановлении пароля. Это было необходимо, так как пароли были зашифрованы и перенеслись некорректно, из-за того, что перемещались логин и электронная почта, которые были не одинаковые на старом сайте. Кроме того, с помощью csv файла и скрипта были добавлены недостающие свойства (включая изображения) товаров, информация по которым обновлялась в процессе переезда и не была перенесена автоматически.

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

ДОРАБОТКА ДИЗАЙНА

По макетам заказчика был доработан хедер (шапка) сайта с использованием стилей и JavaScript разработки. Новый хедер состоит из трех блоков:

1. Основные разделы сайта («О нас», «Как купить», «Доставка», «Оплата», «Статьи», «Гарантия», «Отзывы», «Контакты»), поиск, вход в личный кабинет покупателя. При вводе поискового запроса появляется выпадающий список с товарами.

2. Контакты и режим работа магазина. В этот же блок добавлен функционал для удобства покупателей: «Сравнение товаров», «Избранное», «Корзина».

3. В третий, нижний блок, добавлен список с разделами и подразделами для каталога, этот список выводится горизонтально.

3. Результаты сотрудничества

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

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

Проект был реализован за 1636 часов. В результате работ сайт стал более быстрым и удобным, с ним проще взаимодействовать и менеджерам, и покупателям.