Кейс. Разработка формы заказа, для интернет магазина авточехлов

Добрый день.

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

  1. Выбор необходимого материала авточехла;
  2. Выбор цвета авточехла. Причем цвет необходимо было представить в виде миниатюр авточехлов и при клике на нужный цвет, он должен подсвечиваться, как выбранный;
  3. Нужен предпросмотр выбранного авточехла прямо в форме и при клике на это изображение должно открываться увеличенное изображение;
  4. Нужен расчет стоимости выбранного авточехла.

Чтобы не нагромождать форму, нужно было разбить её на несколько страниц:

  1. На первой странице выбираем необходимой чехол;
  2. На второй странице пользователю предлагается выбрать подарок к заказу;
  3. И уже на третьей странице идет контактная форма, где запрашивается имя и телефон клиента.

В итоге нам удалось создать вот такую форму:

Разработка формы заказа, для интернет магазина авточехлов

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

Далее внутрь секции добавили переключатель, для выбора материала и еще две отдельных секции, с одной колонкой, внутрь которых добавили изображения авточехлов:

Добавление изображений, для предпросмотра авточехла

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

Добавление миниатюр, для выбора цвета

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

Настройка логических правил

Таких правил получилось достаточно много, пришлось потратить несколько часов на их настройку.

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

Настройка внешнего вида формы используя CSS код

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

Для этого в теме оформления в разделе CSS, первой строчкой подключили его стили, а javascript обработчик подключили через менеджер скриптов в настройках формы:

Добавление javascript кода, через менеджер скриптов

Также мы добавили скрипт, который при выборе подарка, на второй странице, сразу переводит клиента на третью страницу, для ввода контактных данных. О том, как это сделать, мы рассказывали вот здесь.

В итоге, у нас получилась довольно функциональная форма заказа. Если что-то не понятно, то задавайте свои вопросы в комментариях ниже.

Комментарии
Готовые шаблоны веб-форм
Basic

Анкета покупателя недвижимости

Вы можете полностью опросить потенциального покупателя, чтобы удовлетворить его потребности Подробнее
Gold

Назовите родные континенты представленных животных

Сможете ли назвать континенты животных, которые представлены на фото? Подробнее
Platinum

Лучший актёр последнего десятилетия

Установите голосование на свой сайт и узнайте мнение пользователей Подробнее
Platinum

Что вы знаете о своем здоровье и теле?

Для размещения на интернет-ресурсах ЗОЖ, медицинских и оздоровительных центров, аптек, фитнес-залов, тематических СМИ, магазинов продуктов и т.д.
$ 5.00
Подробнее