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

Обновление технологического стека

Была установлена свежая версия «Битрикс» и обновлен 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-клиента для делегирования отправки почты почтовому серверу заказчика.

Внедрение «Аспро»

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

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

Интеграция с «МойСклад»

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

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

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

Перенос раздела «Статьи»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Доработка дизайна

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

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

Результат

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