Адаптивный классический интернет-магазин

Адаптивный классический интернет-магазин

5 октября 2017


Автор: Трофимчук Ксения
Прошло полгода с момента публикации нашего первого интернет-магазина «whatAsoft: Классический интернет-магазин», который мы создавали специально для людей, вынужденных запускать свой онлайн бизнес в условиях ограниченного бюджета. Мы изначально стремились максимально снизить стоимость сайта под ключ, поэтому сразу договорились, что решение будет:

  1. Работать на самой доступной редакции CMS «1С-Битрикс» — «Старт».
  2. Поддерживать только базовый функционал интернет-магазина: каталог, карточка товара, корзина, оформление заказа.
  3. Не «ломаться» на мобильных устройствах, но без полноценного адаптива.
  4. Принимать онлайн-платежи через интеграцию с сервисом «Яндекс.Касса».
  5. Иметь только необходимые возможности по кастомизации. Например, настройку цветовых схем.

В таком виде решение было реализовано и опубликовано в «Маркетплейсе». Довольно быстро стало понятно, что людям очень нужен адаптивный дизайн. Об этом довольно часто спрашивали, в том числе, были такие вопросы и в обсуждении.

В результате, пришли к необходимости сделать первое большое обновление решения. В обновлении, помимо адаптивности были реализованы:

  1. Небольшие доработки программного кода. Исправлены некорректные поведения в нескольких местах решения.
  2. Перенесли выбор цветовой схемы в настройки решения. Можно будет легко сменить выбранную цветовую схему после установки.
  3. Добавлена настройка стартового вида списка товаров в разделе каталога. Плитка или список.
  4. Доработан справочник статусов товара — добавлены диапазоны значений. Удобно использовать при синхронизации с «1С».
Для иллюстрации адаптивного дизайна, приводим ниже серию изображений с небольшими комментариями.


Фото 1: «Адаптивный классический интернет-магазин»

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


Фото 2: «Адаптивный классический интернет-магазин»

Фильтр каталога на мобильном устройстве


Фото 3: «Адаптивный классический интернет-магазин»

Внешний вид каталога на телефоне: список товаров и карточка товара


Фото 4: «Адаптивный классический интернет-магазин»

Вывод меню на смартфоне


Фото 5: «Адаптивный классический интернет-магазин»

Еще раз главная страница на различных устройствах крупным планом.

Если у вас есть вопросы, пожелания или комментарии, можете оставить их внизу этой страницы, либо на странице самого решения.