Конфигуратор продукта для WordPress
WordPress

Конфигуратор продукта для WordPress

Поделитесь с друзьями:

В этой статье расскажу как сделать простой конфигуратор продукта с помощью Caldera Forms. Сразу скажу, если вам понадобится использовать отправку формы или нажатие кнопки «Submit» как событие для Яндекс Метрики, то возникнет серьезная проблема: не получится настроить отслеживание событий. По крайней мере, мне решить проблему не удалось. Но если нужен простой конфигуратор продукта для WordPress без примочек, то получится отлично. Ладно, пора начинать.

Конфигуратор на Caldera Forms

Конфигуратор для WordPress

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

  1. Visual Product Configurator for Woocommerce. Мощный конфигуратор, имеет массу настроек, позволяет реализовать визуальный редактор. Это для моих целей избыточно.

  2. Contact Form 7. Удобно, но есть проблема с зависимостями. Конечно, можно реализовать с помощью сторонней надстройки, но усложнять не хотелось. Кстати, цели Метрики в CF 7 добавить довольно легко. Зная CSS можно сделать очень приличную форму.

  3. Другие типы форм. Ninja Form — классный плагин, но зависимости (conditional fields) — платные. Gravity Forms шикарен, но платный. WPForms некрасивый и глючная капча с постоянно валящимся спамом вынудили с данным плагином расстаться.

В итоге принял решение остановиться на Caldera Forms. Не самый популярный плагин, хотя 100 000+ установок очень даже неплохо, так что смело можно сказать, что только на фоне некоторых других форм обратной связи не особо популярен.

Собственно, теперь пора перейти непосредственно к обзору создания простого конфигуратора на Caldera Forms.

Простые действия

Итак, плагин установлен, теперь пришло время приступать к разработке. Здесь все реализовано просто: перетаскиваем поле, выбираем его тип, вводим данные, готово. Ничего сложного, подробно расписывать такую мелочь не буду. Например, на картинке ниже вы можете увидеть, как будут выглядеть поля.

Поля конфигуратора продукта для WordPress

Я разрабатываю конфигуратор сервера на Caldera Forms. Значит, у нас появляется выпадающее меню с комплектующими. Например, «процессор». Сначала создаем графу «Тип процессора». Там указываем: Xeon E3, E5, E7 и т. д.

Тип процессора в Caldera Forms

Теперь создаем отдельное выпадающее меню на каждый тип. Например, на фото для E3.

Выбираем CPU

Теперь обратите внимание на «Ярлык». Здесь стоит указать уникальный идентификатор, который будет нетрудно запомнить. Дальше нам это очень понадобится.

Поле "Ярлык" в Caldera Forms

Итак, все поля созданы. Теперь переходим к созданию условий (conditional fields).

Зависимости в конфигураторе

Ниже размещу картинку, на которой отмечено, куда требуется перейти, чтобы настроить условия. Здесь тоже нет ничего трудного.

Конфигуратор продукта для WordPress: зависимости

Смотрите. У нас есть тип условия. Первое — «Скрыть». Выбираем его. В графе «Если» указываем следующее «Выберите тип процессора» не является Intel Xeon Processor E3. В графе справа отмечаем, что скрыть. Как видите, там указаны ярлыки, которые до этого указывали.

Как видите, простая логика. Если что-то «является», «не является», «больше чем», «меньше чем», «начинается с», «заканчивается на», «содержит», то выполняем определенное действие с полем.

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

Что можно сделать с полем? Его можно скрыть, то бишь, при соблюдении условий поле не будет отображаться. Показать, в таком случае поле будет отображаться при соблюдении набора зависимостей, а также отключить, в таком случае поле будет отображаться, но с ним будет невозможно взаимодействовать.

Зависимости в Caldera Forms

Caldera Forms для конфигуратора

Как будете работать дальше, зависит от вашей логики, но зависимые поля в Caldera Forms – довольно мощный инструмент, позволяющий реализовать довольно сложные схемы. Пользуйтесь, надеюсь, сумел вам помочь. Теперь вы способны сделать довольно сложный конфигуратор продукта для WordPress. Конечно, не самый красивый, но эффективный.

Добавить комментарий

Ваш e-mail не будет опубликован.