Техническая поддержка и доработка интернет-магазина БМАН.рф — автозвук, каталог и региональные витрины

О проекте

БМАН.рф — интернет-магазин автозвука из Краснодара с региональными витринами. Основные направления каталога — автомагнитолы, акустика, сабвуферы, усилители и автомобильная электроника.

Команда Quadro Design занималась поддержкой и доработкой магазина на Webasyst Shop-Script. В задачи входили развитие главной страницы и каталога, работа с фильтрами и региональными настройками, изменение оформления заказа, адаптация мобильного интерфейса и исправление ошибок плагинов.

В кейсе объединены работы и требования из материалов проекта, включая задания 2020–2022 годов. Выполненные изменения описаны по функциональным разделам. Обращения без подтвержденного завершения и требования к дальнейшему развитию выделены отдельно.

Что дорабатывали

• Главная страница, товарные слайдеры и бренды
• Каталог, карточки товаров, фильтры и теговые страницы
• Региональные витрины и сортировка товаров
• Корзина, оплата и доставка при получении
• Мобильная версия, меню и чат
• YouTube, видеоблоки и видеоотзывы
• Информационные страницы и HTML-карта сайта
• Ошибки плагинов и YML-выгрузка
• Шрифты, SVG-графика и подключение карты
• Дополнительные требования и обращения
• Итоги и похожие задачи

Главная страница, товарные слайдеры и бренды

Четыре товарных направления вместо общего блока

Доработали главную страницу: вместо единого блока «Хиты продаж» добавили тематические подборки по четырем основным категориям:

• автомагнитолы;
• акустика;
• сабвуферы;
• усилители.

Товары выводились в формате слайдеров, согласованном с существующим оформлением магазина. Для каждого блока предусматривалось 8–12 позиций. Заголовки сделали кликабельными, с переходом в соответствующую категорию.

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

Настройки источника товаров

Добавили административные настройки для выбора списка или категории, из которой формируется подборка. Если ID списка не указан либо список пуст, товары берутся из указанной категории.

Такая настройка позволяла управлять наполнением слайдеров через административную панель и использовать категорию как резервный источник товаров.

Заголовок страницы и блок брендов

• Перенесли основной заголовок главной страницы наверх, сразу после баннерного слайдера.
• Использовали согласованную формулировку «Интернет-магазин автозвука „БМАН.рф“».
• Убрали прежний приветственный блок в нижней части страницы.
• Добавили выбор брендов после товарных подборок.
• Позднее исправили неработающие переходы по брендам на главной странице.

Для мобильной версии отдельно настроили показ баннеров и тематических товарных подборок.

Каталог, карточки товаров, фильтры и теговые страницы

Подкатегории и оформление каталога

Изменили вывод подкатегорий: вместо расположения друг под другом использовали карусель. Это позволяло компактнее представить разделы и сохранить доступ к ним рядом с товарной выдачей.

Адаптировали оформление плагина ссылок на фильтровые страницы по макету. В задании использовалась страница автомагнитол Pioneer с сортировкой по возрастанию цены.

Отдельно исправили верстку категории акустики по адресу /category/akustika/.

Выборочные ссылки на теговые страницы

Добавили блок переходов на теговые страницы по согласованному образцу навигации DNS. Важным условием был выбор конкретных ссылок для категории: магазин должен был выводить приоритетные подборки, а не весь набор автоматически созданных страниц.

• Предусмотрели добавление выбранных теговых страниц.
• Компактно расположили ссылки в одну строку.
• Добавили раскрытие дополнительных ссылок через «Показать ещё».
• Привели оформление блока к дизайну магазина.

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

Характеристики, фильтры и наличие

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

В карточках товаров убрали пустую вкладку «Видео». Размещение встроенного видеоблока на странице регулировалось отдельно от вкладок карточки.

Региональные витрины и сортировка товаров

Магазин использовал плагин «SEO Регионы». Работа с ним затрагивала выбор региона, доступность товаров, региональные настройки и поведение каталога на разных витринах.

В 2021 году проверили работу плагина региональной сортировки. Это обращение отмечено как выполненное.

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

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

Корзина, оплата и доставка при получении

Упрощение страницы оформления заказа

Доработали первый экран оформления по адресу /order/. Задача состояла в том, чтобы сосредоточить внимание покупателя на завершении покупки и сократить количество отвлекающих элементов.

• Убрали лишнюю верхнюю навигацию на странице оформления.
• Скрыли поисковую строку и блок региональных переходов согласно макету.
• Убрали дублирующий элемент корзины в шапке страницы.
• Сократили анкету покупателя: по макету убрали дополнительные поля email, источника знакомства с магазином и профиля Instagram.
• Исправили отображение кнопок увеличения и уменьшения количества товара.
• Выровняли контактные данные в корзине по правому краю.

Онлайн-оплата товара без стоимости доставки

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

Для сценария «СДЭК ТК — оплата доставки при получении» разделили оплату товара и перевозки: товар оплачивается онлайн, доставка — при получении отправления.

Например, в приведенном в задании заказе товары стоили 2 690 рублей, а доставка — 600 рублей. При выбранном сценарии на сайте оплачивается 2 690 рублей, а 600 рублей за перевозку оплачиваются отдельно при получении.

Представление способов оплаты

На соответствующих этапах разместили логотипы-ссылки Сбербанка и Тинькофф. В 2022 году на странице /oplata/ заменили платежную иконку на SberPay.

Мобильная версия, меню и чат

Адаптировали основные блоки главной страницы и элементы взаимодействия для просмотра с телефона.

• Добавили отображение баннеров на мобильной главной.
• Вывели подборки автомагнитол, акустики, сабвуферов и усилителей вместо общего блока «Хиты продаж».
• Перенесли YouTube-блок ниже по мобильной странице.
• Добавили выбор региона в мобильное меню.
• Убрали незавершенный раздел «Установки» из мобильного и компьютерного меню.
• Подняли виджет Живосайта выше в мобильной версии.

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

YouTube, видеоблоки и видеоотзывы

Подключение и размещение видео

Установили плагин YouTube для вывода видеоматериалов магазина. На первоначальном этапе блок размещался на главной странице под баннером, а в карточке товара — перед подборкой альтернативных товаров.

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

Неработающие видео и переходы

Исправили видео в отзывах, которые возвращали ошибку 404. В задании была указана региональная страница видеоотзывов Новокузнецка.

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

Информационные страницы и HTML-карта сайта

Страница карты сайта для посетителей

Сверстали HTML-карту сайта по адресу /sitemap/. Страница представляла информационные разделы магазина в виде сгруппированных ссылок.

В согласованном представлении были предусмотрены доставка, оплата, политика конфиденциальности, информация о компании, видео, контакты, установка и кредитные предложения. Внутри кредитного направления показывались отдельные ссылки на Сбербанк и Тинькофф.

Эта работа относилась к навигационной странице для посетителей. Обновление XML-карты фильтров являлось отдельной технической задачей.

Контакты и общие элементы оформления

• Исправили некорректную верстку страницы контактов.
• Заменили логотип в шапке сайта.
• Убрали посторонние символы в подвале.

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

Ошибки плагинов и YML-выгрузка

Категории и административная панель

Устранили ошибку Undefined index: id в плагине изображений категорий CategoryImages, которая выводилась во вкладке товаров административной панели.

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

Товарная выгрузка для Яндекс Маркета

Исправили ошибку в YML-файле, который формировался через плагин Яндекс Маркета. Эта работа затрагивала товарную выгрузку и выполнялась отдельно от задач по XML-картам сайта и фильтровым страницам.

Шрифты, SVG-графика и подключение карты

Оптимизация шрифтов и изображений интерфейса

• Отключили ненужные шрифты и выполнили сжатие оставшихся.
• Перевели растровые иконки в SVG в рамках согласованной доработки.
• Преобразовали логотип с текстом в подвале в SVG, используя основной логотип магазина.
• Убрали необходимость отдельного подключения шрифта EuropeExt Bold, который использовался только в этом элементе.

Работы были направлены на сокращение лишних ресурсов оформления и облегчение загрузки страниц.

Переработка всплывающей карты в шапке

Изменили механизм подключения Яндекс Карты, открывавшейся по ссылке в шапке. В исходном варианте встраивание карты приводило к подключению дополнительных стилей и скриптов, хотя посетитель мог не открывать этот блок.

Для новой реализации в поле «Карта» региональных настроек требовалось хранить ссылку вместо полного HTML-кода iframe.

Тестовое заполнение выполнили для региона Киров. Для применения решения ко всем витринам необходимо было заменить содержимое этого поля в остальных регионах: сохранение прежнего iframe нарушало отображение блока.

Дополнительные требования и обращения

Ниже собраны требования и обращения, для которых в материалах нет отдельного подтверждения полного внедрения или итоговой проверки. Они дополняют состав проекта и обозначают направления дальнейшего сопровождения.

Полная логика региональной сортировки

Для магазина с примерно 100 региональными витринами требовалось настроить индивидуальный порядок товаров на каждой из них:

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

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

XML-карта фильтров и технические URL

• Обновление карты фильтров. Файл /filter-sitemap-1.xml не обновлялся и содержал 2 615 ссылок, хотя фильтровых страниц было больше. В настройках фигурировала дата 2018-04-03. Требовалось проверить обновление по CRON.
• Отсутствующие страницы. Среди примеров, не найденных в XML-картах, были /catalog-avto-elektronika/_acv/, /catalog-avto-elektronika/video/_alpine/ и /provoda/_acv/.
• Альтернативное управление Sitemap. Если исправить штатное обновление не удавалось, предлагалось рассмотреть приложение Webasyst для гибкой настройки карты сайта.
• Страницы в подпапке /dev/. Требовалось определить происхождение технических URL. Обсуждалось, что они могли остаться от прежнего тестового поселения, которого уже не было в настройках.
• Произвольные адреса блога. После пути /blog/category/company/ сайт принимал дополнительные произвольные сегменты без ошибки 404. Такое поведение связывалось с плагином категорий блога; рассматривалось его отключение, если он не нужен.

Для произвольных адресов блога отмечалось отсутствие этих ссылок в Sitemap. Проверка их фактической индексации и корректного ответа сервера оставалась самостоятельной задачей.

Дальнейшая оптимизация загрузки

• Сервер и кеширование. Требовалось проверить настройки сервера и работу серверного кеша.
• Количество запросов. В исходном разборе отмечалось более 120 запросов, а ориентиром задания было сокращение примерно до 40. Основные источники дополнительных подключений связывались с плагинами и аналитическими сервисами.
• Ресурсы плагинов. Рассматривалось объединение совместимых файлов. Такая доработка требовала согласования, поскольку обновления плагинов могли перезаписать изменения.
• CSS. Был предложен отдельный этап оптимизации файлов стилей.
• JavaScript. Требовалось пересмотреть отложенную загрузку скриптов, не участвующих в первоначальном отображении страницы.
• Изображения. Обсуждалась ленивая загрузка. Дополнительную оптимизацию изображений главной предлагалось выполнять только при необходимости: в исходном разборе этот пункт допускалось пропустить.
• HTML-разметка. В первоначальной проверке W3C были отмечены 64 ошибки. Их разбор и устранение входили в предложенный технический этап.
• Сквозные модули. Отдельно выделялась нагрузка от поиска в шапке, «SEO Регионов», обратного звонка и других плагинов, подключавшихся на разных страницах сайта.

Сокращение числа запросов и улучшение времени загрузки являлись целями этого блока. Итоговые численные замеры по БМАН.рф в предоставленных материалах не приведены.

Отзывы, письма и доступ к административной панели

• Общая страница отзывов. Требовалось собрать отзывы в отдельном разделе и поставить ссылку в шапке вместо пункта «ПК». На момент обращения в задании указывалось более 300 отзывов. Для реализации рассматривался плагин вывода отзывов покупателей.
• Письма о брошенных корзинах. Поступило обращение, что плагин не отправляет письма по значительной части заказов. Для диагностики требовалось проверить CRON и настройки хостинга.
• Вход в административную панель. Было описано зависание авторизации, в том числе при попытке входа через режим инкогнито. Причина и завершение исправления в материалах не подтверждены.

Уточнения по блогу, мобильной версии и региональным картам

• Изменить адрес красной боковой кнопки, которая вела на отсутствующую страницу, на ссылку блога.
• Исправить незагружающийся логотип в блоге.
• Восстановить корректную верстку отдельных записей блога.
• Проверить отображение информационных страниц и верхних навигационных ссылок.
• Отцентрировать H1 в мобильной версии, добавить под ним разделительную линию и увеличить отступ перед подзаголовком «Автомагнитолы».
• Уточнить и скрыть в компьютерной версии элемент, который должен оставаться только на мобильных устройствах.
• Заменить полный iframe на ссылку в поле «Карта» для остальных регионов после тестовой настройки Кирова.

Итоги и похожие задачи

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

Отдельные результаты связаны с покупкой: упростили оформление заказа, исправили элементы корзины и реализовали оплату товара на сайте без включения стоимости доставки, оплачиваемой при получении.

Техническая поддержка также включала исправление ошибок плагинов и YML-выгрузки, работу с видео, мобильным меню и информационными страницами, создание HTML-карты сайта, оптимизацию шрифтов и SVG-графики.

Услуги по теме проекта

• Программирование интернет-магазинов на Webasyst и Shop-Script — доработка каталога, фильтров, корзины, региональных правил и плагинов.
• SEO и техническая оптимизация сайтов — работа со структурой страниц, индексированием, картами сайта и загрузкой ресурсов.

Похожие проекты и решения

• Техническая поддержка ZetZet.ru — каталог, корзина, оплата, доставка и мобильная витрина магазина электроники.
• Доработка интернет-магазина ZMParts.ru — региональные витрины, каталог автозапчастей и карточки товаров.
• Поддержка интернет-магазина Katod.ru — каталог, подбор аккумуляторов и работа с заказами.
• Кейсы оптимизации скорости сайтов — изображения, CSS, JavaScript, шрифты и кеширование.

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

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