ООО «Аккамулик»
Авто/Мото
Беларусь, Минск
Декабрь 2022
Улучшить функциональность и дизайн интернет-магазина для повышения удобства использования и точности представления информации.
В рамках проекта было решено сделать:
1. Верстку и доработку дизайна
2. Настройку микроразметки
3. Доработку корзины
4. Доработку фильтров в каталоге
Дизайнером проекта был разработан дизайн сайта, который соответствовал общему стилю интернет-магазина заказчика. С нашей стороны требовалось реализовать большой список нововведений и доработок, чтобы улучшить удобство пользования сайтом и достоверность представленной информации.
• Мы добавили крестик закрытия окна на мобильной версии сайта, что делает навигацию более интуитивной и удобной для пользователей с мобильных устройств. Ранее, чтобы закрыть окно, требовалось обновить страницу, что могло привести к потере выбранным данным.
• В мобильной версии в меню было настроено отображение текста "Магазины и самовывоз" вместо "Пункты самовывоза", что делает навигацию более понятной для пользователей.
• Для удобства поиска товара и выбора категории, товары категории “Аккумулятор” получили новый размер и цвет надписи, чтобы они привлекали внимание пользователей и соответствовали общему стилю сайта.
• Мы провели тестирование и адаптировали корректное изображение изображений и др. элементов на сайте, чтобы при использовании сайта на компьютере, телефоне или планшете.
• Для улучшения интерфейса мы убрали иконки операторов у главного номера телефона, что разгрузило дизайн сайта от лишних элементов и информации.
• Мы также центрировали пагинацию, убрали стрелки и внесли изменения в верстку, что сделало навигацию по страницам более удобной и визуально приятной для пользователя.
• Мы внесли дополнительные изменения в верстку блока превью товара для улучшения внешнего вида карточки.
• Мы доработали размер и дизайн кнопок, чтобы улучшить внешний вид и удобство нажатия. Расширив область клика, получилось улучшить удобство использования сайта экранах разных размеров.
• Для страницы "Настройки сайта" были созданы два новых поля: "Цена за 1 а/ч б/у акб по весу" и "Цена за 1 а/ч б/у акб по емкости", чтобы пользователи могли указать эти параметры для своих настроек.
Микроразметка предназначена для улучшения отображения страницы при её обмене и распространении в социальных сетях, поисковых системах и других сервисах.
Мы работали со следующим списков тегов:
• og:locale — указывает язык страницы. og:type — определяет тип страницы, например, website (веб-сайт), article (статья), video (видео) и т. д.
• og:title — задаёт заголовок страницы, который будет отображаться при её обмене в социальных сетях.
• og:description — содержит описание содержимого страницы, которое также будет показываться при её обмене в социальных сетях.
• og:image — содержит URL изображения, которое описывает страницу.
• og:url — указывает на канонический URL страницы.
Клиент ввел акцию, которая работает в определенный временной промежуток.
Если товар был добавлен в корзину с 19:00 по 9:00, клиенту предоставлялась скидка 5% на покупку товара. Мы внедрили текстовую надпись, которая отображается на сайте, а также при добавлении товара в корзину скидка автоматически применяется ко всем добавленным товарам.
• Если товар был добавлен в корзину до 19:00, но пользователь зашел на страницу корзины между 19:00 и 9:00, на странице появляется надпись: "С 19:00 до 9:00 на весь товар скидка 5%. Обновите страницу, чтобы активировать скидку" и кнопкой "Обновить страницу", после нажатия на которую страница перезагрузится и клиент получит актуальную стоимость.
• Если товар был добавлен в корзину с 19:00 до 9:00, но пользователь зашел на страницу корзины вне этого временного диапазона, отобразится попап с текстом:"Скидка 5% действует с 19:00 по 9:00 на весь товар. Обновите страницу, чтобы увидеть актуальную цену" и кнопкой "Обновить страницу", после нажатия на которую страница также перезагрузится и клиент получит актуальную стоимость.
Все эти действия необходимы, чтобы клиент получал актуальную информацию и не сталкивался с проблемой определения актуальной стоимости товара. Правила получения скидки были четко прописаны, как и пояснения, которые отображаются в необходимый временной промежуток.
Одним из ключевых изменений было удаление подсчета элементов и вывода лейбла "Применить" в мобильной и десктопной версиях. Вместо этого мы добавили кнопку "Применить" и закрепили ее внизу экрана в области поп-апа для мобильной версии, а для десктопной версии — в области фильтра.
Важные изменения также затронули фильтр в каталоге товаров.
Мы добавили свойство "Тип" в разделе "Аксессуары", а в разделе "Пуско-зарядные аксессуары" вывели следующие свойства: емкость заряжаемого акб, напряжение заряжаемого акб и тип заряжаемого акб.
Также мы заменили свойство "Емкость" на "Номинальная емкость" в разделе "Промышленное оборудование", чтобы точнее отражает характеристики товаров.
Эти изменения были внедрены с учетом потребностей и ожиданий пользователей, чтобы обеспечить им более удобный и эффективный поиск необходимых товаров на сайте.
По результатам работы:
• Упрощенная навигация, уменьшение вероятности потери данных при случайном обновлении страницы.
• Повышение заметности товаров данной категории, лучшее соответствие стилю сайта.
• Улучшенное отображение страниц при их обмене в социальных сетях и поисковых системах, что способствует лучшему продвижению и видимости сайта.
![]()
Иван Гринкевич
Проведенные доработки и изменения в верстке и дизайне интернет-магазина значительно улучшили удобство использования сайта, его визуальную привлекательность и функциональность. Это способствовало повышению удовлетворенности пользователей, облегчило навигацию и поиск товаров, а также улучшило взаимодействие с различными элементами сайта на всех типах устройств.
PHPDev, ПиЭйчПиДев с удовольствием обсудит вашу задачу