Техническая поддержка корпоративного сайта korona.by

Представители «Корона» обратились к нам с запросом на обеспечение технической поддержки корпоративного сайта компании.

Значительная часть проекта состояла из исправления неточностей и решения задач на существующем сайте.

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

Работа над проектом началась с комплекса задач по модернизации структуры раздела. Этап можно назвать наиболее значительным и сложным. Отметим, что ранее на странице “Акции” было предусмотрено 4 фильтра: “Город”, “Магазин”, “Категория”, “Акции”, которые формировали список выгодных предложений. После анализа было решено добавить фильтры "Тип акции" и "Категория" как страницу следующего уровня. В административной панели добавлены возможность изменять для каждой страницы: url, заголовок, мета-данные.

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

Для страниц "Категории" и "Тип акций" также были добавлены параметры: "название", адрес ссылки, и вкладку "SEO" на примере категории в новостях.

Еще одним направлением по улучшению сайта стала углубленная проработка политики Cookies и их настройка в мобильной версии. Это было связано с тем, что в мобильной версии при нажатии на кнопку “настройки cookies” закрывалось бургер-меню и модальное окно с cookies не появлялось. Для решения этой проблемы мы реализовали верстку модального окна с настройками cookies, а также внесли некоторые настраиваемые параметры в панель администратора.

Аудит показал, что ранее, если в категории или типе акций нет товаров, они отображались на странице и при выборе категории выводилось сообщение "К сожалению, продуктов в этой категории пока нет".

Для решения этой неточности был реализован следующий алгоритм: при отсутствии товаров в категории, типе акций или подкатегории, они не отображаются в фильтре, но как только товары будут добавлены, то они сразу отобразятся на странице. Например, если речь идет про страницу нового формата “/hypermarkets/promotions/bakaleya” она должна быть скрыта из фильтра, но доступна по указанному адресу с сохранением текста: "К сожалению, продуктов в этой категории пока нет."

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

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

Также была проведена работа по оптимизации изображений в разделе “Акции”. Ранее в одной карточке товара использовалась 1 картинка размеров 760-760px в 2 местах: в модальном окне и в самой карточке. Аудит показал, что в карточке была картинка большего размера, чем необходимо.

Поэтому было решено доработать функционал, чтобы при загрузке одного изображения получается два медиафайла в форматах webp и png: исходный и для карточки (220-220px).

Отдельное внимание стоит уделить небольшим доработкам, которые повлияли на оптимизацию всего веб-проекта. К ним можно отнести: исправление некорректного отображения карт на сайте магазина, внесение правок в работу слайдер на странице гипермаркета, добавление иконки TikTok и ссылок в футтер, и оптимизацию длительного обновления вакансий.

Также была проверена гипотеза о том, сильно ли нагружают сайт модальные окна на страницах раздела “Акции и специальные предложения — в магазинах «Корона»” и на главной странице.