Калькулятор в Zero Block на Тильде — результат в форму

Данная модификация позволяет настроить три варианта калькулятора:

• «С передачей в корзину» — позволяет кастомизировать форму в Зеро-блоке и суммировать указанные поля, выводя их результат сразу в корзину;
• «С передачей в форму» — дает возможность кастомизировать форму в Зеро-блоке и указать какие именно поля отправлять в форму;
• «Просто калькулятор» — убирает возможность отправки формы нажатием на «enter» для калькулятора собранного в Зеро-блоке.

Прежде, чем приступить к настройке данной модификации, необходимо собрать форму в Зеро-блоке. При выборе вариантов «С передачей в корзину» или «С передачей в форму» есть возможность кастомизировать форму следующим образом:

• Собери в Зеро-блоке свою уникальную форму. Она может состоять из различных типов полей, расположенных в нужном для тебя месте;
• У каждого поля заполни переменную (variable name). В настройках кнопки (button) удали все цвета, текст, а высоту поставь 0px;
• Создай свою кнопку (картинка, шейп, кнопка, текст) в Зеро-блоке и укажи ей ссылку, такую же как и в генераторе (например, #linkbtn);
• Добавь на страницу блок BF204N в случае выбора варианта «С передачей в форму» или блок с корзиной, если выбираешь вариант «С передачей в корзину».

Далее, приступаешь к настройке генератора:

Вариант #1: С передачей в корзину

• «Введите id зеро блока» — id Зеро-блока, в котором находится форма;
• «Выберите эффект» — в данном разделе инструкции описан пример настройки варианта «с передачей в корзину»;
• «Заголовок товара» — заголовок товара, который будет указан в корзине;
• «Подзаголовок или артикул товара» — дополнительное поле в котором можно разместить необходимый комментарий;
• «Названия поля 'калькулятор' из зеро блока (Variable name)» — имя переменной такое же, как и у поля калькулятор, именно это значение отвечает за итоговую стоимость товара в корзине;
• «Разделение тысячных» — выбери нужный вариант;
• «Url изображения» — ссылка на изображение, которое будет отображаться миниатюрой в корзине.

Чтобы скопировать ссылку на изображение — добавляешь на страницу блок галереи GL12, загружаешь свое изображение и копируешь ссылку на него. После этого, блок с галереей можно скрыть (но не удалять).

• «Удалять стандартные поля в корзине» — при необходимости можно скрыть стандартные поля корзины;
• «Введите ссылку для кнопки» — указываешь ссылку кнопки, которую ранее добавляли в Зеро-блоке (например, #linkbtn);
• «Какие поля передавать» — можно выбрать вариант «передавать все поля» или «передавать только перечисленные»;
• «Отправлять форму при нажатии Enter» — есть возможность включить или отключить данную функцию;
• «Сбрасывать поля формы после отправки» — выбираешь необходимый вариант;
• «Блокировать кнопку оплаты в случае если не выбран ни один из пунктов» — при включенной настройке блокируется кнопка оплаты;

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

• «Название опции» — то название, которое будет прописано в корзине
• «Имя поля, откуда берем значение для опции (Variable name)» — имена переменных полей из формы в Зеро-блоке, откуда будет приходить указанное значение в корзину.

Вариант #2: С передачей в форму

• «Введите id зеро блока» — id Зеро-блока, в котором находится форма;
• «Названия поля 'калькулятор' из зеро блока (Variable name)» — имя переменной такое же, как и у поля калькулятор, именно это значение отвечает за итоговую стоимость товара в форме;
• «Разделение тысячных» — выбери нужный вариант;
• «Выберите эффект» — в данном разделе инструкции описан пример настройки варианта «с передачей в форму»;
• «Введите id BF204N блока»;

Важно: Если форма не отправляется, проверьте настройки полей в стандартном блоке BF204N. В этом блоке не должно быть никаких полей — если они есть, удалите их и переопубликуйте страницу. Если проблема не решилась, попробуйте отключить в настройках профиля Тильды опцию «Участвовать в тестировании новых функций».

• «Цвет фона попапа успешной отправки формы»;
• «Цвет заголовка в попапе успешной отправки формы»;
• «Цвет текста в попапе успешной отправки формы»;
• «Цвет иконки в попапе успешной отправки формы»;
• «Цвет галочки в иконке попапа успешной отправки формы»;
• «Цвет фона кнопки в попапе успешной отправки формы»;
• «Цвет текста кнопки в попапе успешной отправки формы»;
• «Цвет крестика в попапе успешной отправки формы»;
• «Введите ссылку для кнопки» — указываешь ссылку кнопки, которую ранее добавляли в Зеро-блоке (например, #linkbtn);
• «Какие поля передавать» — можно выбрать вариант «передавать все поля» или «передавать только перечисленные»;

Дополнительные настройки:

• «Отправлять форму при нажатии Enter» — есть возможность включить или отключить данную функцию;
• «Сбрасывать поля формы после отправки» — выбираешь необходимый вариант;
• «Скрывать стандартный попап об успехе» — выбираешь необходимый вариант;
• «Блокировать кнопку оплаты в случае если не выбран ни один из пунктов» — при включенной настройке блокируется кнопка оплаты.

Вариант #3: Просто калькулятор

• «Введите id зеро блока» — id Зеро-блока, в котором находится форма;
• «Названия поля 'калькулятор' из зеро блока (Variable name)» — имя переменной такое же, как и у поля калькулятор, именно это значение отвечает за итоговую стоимость товара;
• «Разделение тысячных» — выбери нужный вариант;
• «Выберите эффект» — в данном разделе инструкции описан пример настройки варианта «просто калькулятор»;

Применение данной настройки отключает возможность отправки формы настроенной в Зеро-блоке, «нажатием на enter».

• «Блокировать кнопку оплаты в случае если не выбран ни один из пунктов» — при включенной настройке блокируется кнопка оплаты.

После заполнения всех полей, копируешь сгенерированный HTML код и вставляешь его в блок Т123.

Имей в виду:

• Если на сайте установлено в настройках «Не продавать товар, если данные о нем отличаются», то в корзине просто появится ошибка и заявку нельзя будет отправить. Для корректной работы необходимо указать вариант «разрешать продавать товар без проверок»;
• После отправки корзины, страница автоматически перезагружается и сбрасывает поля. Если необходимо, чтобы поля не сбрасывались, можно использовать модификацию NLM052 Автозаполнение полей.
• Если на странице есть несколько кастомных форм с калькулятором, то у каждой такой формы должен быть свой блок BF204N и своя уникальная ссылка на кнопку отправки #sendform1, #sendform2 и т. д.;
• Чтобы всплывающие подсказки «Обязательное поле» не появлялись под другими полями, проверь очередность слоёв элементов внутри зеро блока;
• Не нужно подключать приемщики данных к каждому полю внутри зеро блока. Их нужно подключать к стандартной форме BF204N или к Корзине;
• Если языки ошибок внутри форм не совпадает с языком сайта, проверьте настройки: Язык ошибок в формах и Настройках сайта → Ещё → Язык сайта;