Разработка адаптивного магазина страйкбола SHAROMET
О проекте
Создание адаптивного интернет-магазина SHAROMET
Для страйкбольного магазина SHAROMET разработали сайт с нуля на Webasyst Shop-Script 7. Проект объединил индивидуальный дизайн, вёрстку, интеграцию в полный функционал платформы и оформление дополнительных модулей. Каталог охватывает страйкбольные товары, экипировку, аксессуары и запчасти, поэтому в интерфейсе важно было сохранить понятное разделение товарных групп и доступ к карточкам товаров.
Дизайн пяти страниц для шести разрешений
Создали адаптивные макеты главной страницы, категории, карточки товара, корзины и оформления заказа. Диапазон отображения составил от 320 до 1920 пикселей. Все пять страниц согласовывались в шести разрешениях: 320 px для телефонов, 768 и 1024 px для планшетов, 1366, 1600 и 1920 px для ноутбуков и настольных компьютеров.
На главной странице крупный тематический баннер сочетается с разделами каталога, товарными подборками, новостями и опросом. В оформлении использовали тёмную шапку, фактурный фон и контрастные зелёные и жёлтые элементы управления. В категории предусмотрели фотографии подкатегорий, сетку товаров и переключение изображений. Карточка товара получила крупную фотографию, галерею, характеристики и отдельные действия покупки.
Для узких экранов перестроили расположение блоков: навигация доступна через компактное меню, изображения и характеристики располагаются последовательно, а товарные позиции корзины оформлены вертикальным списком. Разные макеты показывают, как один дизайн работает с широким каталогом на компьютере и с ограниченной шириной телефона.
Корзину и страницу оформления заказа включили в ту же систему адаптивных макетов. Это сохраняет последовательность интерфейса после выбора товара: элементы заказа оформлены с учётом устройства, на котором посетитель просматривает магазин.
Вёрстка, интеграция и дополнительные функции
Подготовили вёрстку согласованных страниц и интегрировали её в полный функционал Shop-Script 7. Дополнительно выполнили следующие работы:
- Сверстали интерфейс плагина слайдера для главной страницы.
- Интегрировали покупку в один клик и оформили соответствующее действие в интерфейсе магазина.
- Подключили фотографии категорий и согласовали их отображение с навигацией каталога.
- Оформили постраничную навигацию для просмотра списков товаров.
- Сверстали плагин опроса в общем стиле сайта.
- Реализовали переключение фотографий товара непосредственно в категории.
- Добавили кнопку «Полная версия сайта» на телефонах и планшетах.
Работа с модулями охватывала их подключение и внешний вид: элементы каталога, товарные карточки и дополнительные блоки согласовали с разработанной темой. Переключение фотографий позволяет рассмотреть товар в списке, а постраничная навигация организует просмотр большого каталога. Кнопка полной версии даёт посетителю дополнительный способ выбора отображения сайта на мобильном устройстве.
Другие проекты и разработка сайта
Посмотрите разработку магазина страйкбола «Шаромёт» и разработку магазина пейнтбола DDsport.ru в нашем портфолио сайтов.
Для нового проекта можно заказать создание интернет-магазина на Webasyst, обсудить программирование и доработки Shop-Script и связаться с Quadro Design.