Пишете крутые статьи? Публикуйте их в авторитетном журнале Workspace.
PHPDev, ПиЭйчПиДев
Доработка возможностей интернет-магазина Akkamulik
PHPDev, ПиЭйчПиДев
#Поддержка и развитие сайта#Программирование сайта

Доработка возможностей интернет-магазина Akkamulik

101 
PHPDev, ПиЭйчПиДев
PHPDev, ПиЭйчПиДев Беларусь, Минск
Поделиться:
Клиент

ООО «Аккамулик»

Сфера

Авто/Мото

Регион

Беларусь, Минск

Сдано

Декабрь 2022

Задача

Улучшить функциональность и дизайн интернет-магазина для повышения удобства использования и точности представления информации.

Решение

В рамках проекта было решено сделать:

1. Верстку и доработку дизайна

2. Настройку микроразметки

3. Доработку корзины

4. Доработку фильтров в каталоге

1Верстка и доработка дизайна

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

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

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

• Для удобства поиска товара и выбора категории, товары категории “Аккумулятор” получили новый размер и цвет надписи, чтобы они привлекали внимание пользователей и соответствовали общему стилю сайта.

• Мы провели тестирование и адаптировали корректное изображение изображений и др. элементов на сайте, чтобы при использовании сайта на компьютере, телефоне или планшете.

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

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

• Мы внесли дополнительные изменения в верстку блока превью товара для улучшения внешнего вида карточки.

• Мы доработали размер и дизайн кнопок, чтобы улучшить внешний вид и удобство нажатия. Расширив область клика, получилось улучшить удобство использования сайта экранах разных размеров.

• Для страницы "Настройки сайта" были созданы два новых поля: "Цена за 1 а/ч б/у акб по весу" и "Цена за 1 а/ч б/у акб по емкости", чтобы пользователи могли указать эти параметры для своих настроек.

2Настройка микроразметки.

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

Мы работали со следующим списков тегов:

• og:locale — указывает язык страницы. og:type — определяет тип страницы, например, website (веб-сайт), article (статья), video (видео) и т. д.

• og:title — задаёт заголовок страницы, который будет отображаться при её обмене в социальных сетях.

• og:description — содержит описание содержимого страницы, которое также будет показываться при её обмене в социальных сетях.

• og:image — содержит URL изображения, которое описывает страницу.

• og:url — указывает на канонический URL страницы.

3Доработка корзины.

Клиент ввел акцию, которая работает в определенный временной промежуток.

Если товар был добавлен в корзину с 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 на весь товар. Обновите страницу, чтобы увидеть актуальную цену" и кнопкой "Обновить страницу", после нажатия на которую страница также перезагрузится и клиент получит актуальную стоимость.

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

4Доработка фильтров в каталоге

Одним из ключевых изменений было удаление подсчета элементов и вывода лейбла "Применить" в мобильной и десктопной версиях. Вместо этого мы добавили кнопку "Применить" и закрепили ее внизу экрана в области поп-апа для мобильной версии, а для десктопной версии — в области фильтра.

Важные изменения также затронули фильтр в каталоге товаров.

Мы добавили свойство "Тип" в разделе "Аксессуары", а в разделе "Пуско-зарядные аксессуары" вывели следующие свойства: емкость заряжаемого акб, напряжение заряжаемого акб и тип заряжаемого акб. 

Также мы заменили свойство "Емкость" на "Номинальная емкость" в разделе "Промышленное оборудование", чтобы точнее отражает характеристики товаров.

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

Результат

По результатам работы:

• Упрощенная навигация, уменьшение вероятности потери данных при случайном обновлении страницы.

• Повышение заметности товаров данной категории, лучшее соответствие стилю сайта.

• Улучшенное отображение страниц при их обмене в социальных сетях и поисковых системах, что способствует лучшему продвижению и видимости сайта.

Комментарий агентства

Иван Гринкевич
Иван Гринкевич

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

https://akkamulik.by/

Стек технологий


Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.
оставить заявку

Хотите заказать похожий проект?

PHPDev, ПиЭйчПиДев с удовольствием обсудит вашу задачу

Оставить заявку