![](/_nuxt/img/cover_1920.376cd86.png)
Модернизация сайта интернет-магазина Moto85 с масштабным контентным разделом
Заказчик
Задача
- настройка нового сервера;
- обновление версий технологического стека («Битрикс» и PHP);
- внедрение современного готового решения «Аспро: Максимум»;
- интеграция с учетной системой «МойСклад»;
- перенос контентной части сайта с сохранением содержания, тегов, ссылок и фильтров;
- доработка дизайна готового решения;
- в процессе переноса важно сохранить SEO-настройки и места в поисковых выдачах.
![Главная страница сайта](/_nuxt/img/image_1920_1.719d07c.png)
Обновление технологического стека
Настройка нового сервера
-
Настройка софта под сайт
Лимиты на ресурсы были установлены в соответствии с используемым «железом» и проектом. В результате система «стабилизирована по памяти», что означает что никакой разумный поток запросов не заставит клиентов увидеть ошибки, в худшем случае они будут слишком долго ждать ответа и дождутся только истечения таймаута.
-
Мониторинг
Для мониторинга в реальном времени был установлен Zabbix, добавлена конфигурация для мониторинга хоста со стороны нашего Zabbix-сервера, прикреплены стандартные шаблоны для мониторинга ресурсов, проверки robots.txt и наличия http-авторизации.
Набор проверок включает в себя проверки уровня ОС, уровня используемого софта, проверки работы конечного сайта и критических бизнес-функций (например наличие и доступность robots.txt по HTTP, возможность увидеть каталог товаров и корзину).
-
Настройка работы по протоколу TLS/SSL
Использованы штатные средства BitrixVM (скрипт menu.sh, let's encrypt), включен редирект с http-схемы на https.
-
Настройка исходящей почты
Конфигурация msmtprc-клиента для делегирования отправки почты почтовому серверу заказчика.
Внедрение «Аспро»
![Интерфейс Аспро](/_nuxt/img/image_1920_2.e44daa4.png)
Интеграция с «МойСклад»
![Пример выгрузки товаров с сайта в «МойСклад»](/_nuxt/img/image_1920_3.8702e8a.png)
Работа с «МойСклад» реализована через API: в сервис отправляется запрос, в ответ он с помощью вебхуков передает все изменения заказа (статус, трек номер, доставки). Также был реализован обработчик события создания заказа: данные передаются в «МойСклад», где формируется заказ. Кроме того, при появлении новых товарных позиций в сервисе они автоматически передаются на сайт и появляются в каталоге в виде позиции с ценой и описанием, изображения менеджер добавляет вручную.
Стандартную синхронизацию сервиса пришлось дополнить, в частности, убрав ненужные стандартные поля и добавив собственные. Так, было добавлено поле «комментарий менеджера», который не виден клиенту. Этот функционал был реализован с помощью отдельного API․
Перенос раздела «Статьи»
![Раздел «Статьи»](/_nuxt/img/image_1920_4.63e439a.png)
-
Перенос данных
Первым шагом переноса данных было создание инфоблоков на новом сайте с переносом параметров и свойств (бренд, тип товара, тема статьи) с помощью XML.
Для переноса всех элементов (текстов и изображений) с сохранением их свойств был использован стандартный функционал «Битрикс» – Экспорт элементов инфоблока в формате CSV (new). Поскольку тексты на старом сайте были в кодировке Windows-1251, а новый сайт использует UTF-8, после экспорта файл CSV конвертировался.
Затем были изменены настройки компонента «Битрикс» Bitrix:news, после чего все данные статей стали отображаться в новом разделе «Блог». Перенос прошел в штатном режиме, проблем на данном этапе не возникло.
-
Перенос SEO-тегов
Проблема второго этапа состояла в том, что на старом сайте теги были реализованы через свойства элементов инфоблоков. При таком решении для их вывода пришлось бы менять код в шаблоне компонента на новом сайте. Более правильным с точки зрения архитектуры решения было использование возможностей решения «Аспро: Максимум»: его верстка компонента Bitrix:news предусматривает вывод поля «Теги» элемента как облака тегов. Это облако позволяет пользователю удобнее искать нужные статьи.
Был написан PHP-скрипт, который делает выборку по заполненным свойствам TAGS, после чего переносит их в соответствующее поле. Скрипт выполнился без ошибок, облака тегов появились на детальных страницах.
-
Новый фильтр для статей
Заказчику был нужен фильтр для удобства навигации и SEO-оптимизации. Конкретных требований было три:
- отображение фильтра и на странице списка статей, и на странице с текстом статьи;
- выбранные значения должны сохраняться при переходе между списком и статьей;
- наличие кнопки «Сбросить» для очистки значений фильтра.
Стандартный шаблон фильтра, использовавшегося в разделе «Блог», не подходил, и готовое решение отсутствовало. Было необходимо разработать новый функционал, который бы сохранял установленные значения фильтров в файлах cookie, а при загрузке новой страницы проверял их наличие и автоматически заполнял чекбоксы страницы, если фильтры установлены. Новый шаблон фильтра также потребовал написания и подключения стилей для мобильной версии, необходимых для адаптивной верстки (правильного отображения шаблона на различных разрешениях).
Работоспособность и корректность отображения фильтра проверялись вручную с помощью выставления одинаковых параметров на старом и новом сайте.
![Вывод фильтра на странице статьи](/_nuxt/img/image_1920_5.f6ff6c3.png)
-
Внутренние ссылки
В элементах раздела «Статьи» старого сайта присутствовали абсолютные ссылки, использовавшие полный HTTP-адрес, а не относительный путь. Эти ссылки вели на страницы старого сайта, а поскольку на тот момент контента было много, их ручные поиск и замена не представлялись возможными. На финальном этапе работы потребовалось написать еще один скрипт, который бы делал выборку элементов инфоблока, текст которых содержал любые ссылки. Скрипт с помощью регулярного выражения ищет все вхождения HTML тега <a> в тексте, включая их содержимое, но без учета вложенных тегов <a>.
Этот скрипт позволил выгрузить все абсолютные ссылки в отдельный файл, после чего были написаны редиректы на новые разделы.
-
Финальные доработки
По окончанию работ и перед деплоем на новый сервер были перенесены данные всех пользователей, у них сохранились прежние логины-пароли. Кроме того, с помощью csv файла и скрипта были добавлены недостающие свойства (включая изображения) товаров, информация по которым обновлялась в процессе переезда и не была перенесена автоматически.
После проверки всего функционала сайта и данных в инфоблоке клиентом, поступил заказ на небольшие доработки. Они включали в себя выравнивание изображений в статьях по левому краю и стилизацию шаблона фильтра раздела «Статьи» по примеру шаблона фильтра каталога нового сайта.
Доработка дизайна
- 1. Основные разделы сайта («О нас», «Как купить», «Доставка», «Оплата», «Статьи», «Гарантия», «Отзывы», «Контакты»), поиск, вход в личный кабинет покупателя. При вводе поискового запроса появляется выпадающий список с товарами;
- 2. Контакты и режим работа магазина. В этот же блок добавлен функционал для удобства покупателей: «Сравнение товаров», «Избранное», «Корзина»;
- 3. В третий, нижний блок, добавлен список с разделами и подразделами для каталога, этот список выводится горизонтально.
![Новое меню на сайте](/_nuxt/img/image_1920_6.8d4001a.png)
Результат
Остались вопросы?
ул. Грушевская 10, 3 этаж
ИНН: 3460081999
КПП: 346001001
ОГРН: 1223400001208