Один из крупнейших производитель летней и зимней спецодежды и спецобуви в России, странах СНГ и ближнего зарубежья.
Задача: сделать адаптивную верстку на всем сайте и натянуть ее на имеющийся бэк. Изменить работу корзины: реализовать корректное определение типа цены и учет скидок. Обновить платформу 1С-Bitrix до последней версии.
Адаптивность сайта
На примере Главной страницы рассмотрим, как происходит «сложение» десктопной версии в мобильную.
Горизонтальное меню в планшетной и мобильной версии сворачивается в «гамбургер».
В мобильной версии список разделов каталога превращается в кнопку со всплывающим подменю.
В десктопном варианте разделы каталога представлены в виде иконок, при нажатии на кнопку «Показать все категории» открываются подразделы каталога.
Слайдер карточек товаров в зависимости от разрешения экрана пользователя может содержать 2, 3 или 4 карточки в видимой области. Размеры самих карточек в слайдере не изменяется и соответствует размерам карточек в каталоге.
Подписка на рассылку выделена отдельной строкой, что акцентирует внимание пользователя на этой возможности.
Новости и пресс-релизы при переходе из дестопного варианта в мобильный меняют ориентацию с горизонтальной на вертикальную.
При адаптации подвала скрываются наименее значимые его области.
Адаптивные дизайн и верстка (http://prntscr.com/k208w0)
В рамках этих работ:
1. Сделан адаптивный дизайн на 2 разрешения: планшет и мобильная версия, десктоп остался неизменным по желанию Заказчика.
2. Реализована адаптивная верстка сайта (3 разрешения + респонсив между ними) с использованием flex-технологий.
Корзина и оформление заказа (http://prntscr.com/k20a9t)
На сайте существует 3 типа цен (розничная, оптовая и акционная), а также действует политика скидок, зависящая от суммы единовременной покупки пользователя. Нами была настроена корректная работа корзины и механизмов подсчета цен и скидок.
Типографика и цвет
Придерживаясь фирменного стиля и сохраняя корпоративный дух была разработана компоновка шрифтов, интерактивных и других элементов на страницах для удобства использования сайта на мобильной и планшетной версии.
