Top.Mail.Ru
Loading...
No-code платформа для интеграции с российскими сервисами
Адаптер
Мы в соцсетях
Ответим на вопросы
Техподдержка
Образовательные курсы и гайды для IT-специалистов
Академия
Клиентам
О нас
Плагин для Тильды
Партнерам
Академия
Расширение
Техподдержка
Модификации
Профиль
Подписка
Партнерка
Новости +13
Шаблоны
Идеи
Услуги
NLM092 ВРЕМЯ НАСТРОЙКИ: 5 МИНУТ

КАК СДЕЛАТЬ КАЛЬКУЛЯТОР НА ТИЛЬДЕ?

Модификация поможет сделать свой калькулятор в Зеро блоке, который выводит результат сразу форму или в корзину, с возможностью задать название товару, артикул и изображение.
Данная модификация позволяет настроить три варианта калькулятора:
  • «С передачей в корзину» — позволяет кастомизировать форму в Зеро-блоке и суммировать указанные поля, выводя их результат сразу в корзину;
  • «С передачей в форму» — дает возможность кастомизировать форму в Зеро-блоке и указать какие именно поля отправлять в форму;
  • «Просто калькулятор» — убирает возможность отправки формы нажатием на «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 блока»;
  • «Цвет фона попапа успешной отправки формы»;
  • «Цвет текста в попапе успешной отправки формы»;
  • «Цвет иконки в попапе успешной отправки формы»;
  • «Цвет крестика в попапе успешной отправки формы»;
  • «Введите ссылку для кнопки» — указываешь ссылку кнопки, которую ранее добавляли в Зеро-блоке (например, #linkbtn);
  • «Какие поля передавать» — можно выбрать вариант «передавать все поля» или «передавать только перечисленные»;
Дополнительные настройки:
  • «Отправлять форму при нажатии Enter» — есть возможность включить или отключить данную функцию;
  • «Сбрасывать поля формы после отправки» — выбираешь необходимый вариант;
  • «Скрывать стандартный попап об успехе» — выбираешь необходимый вариант;
  • «Блокировать кнопку оплаты в случае если не выбран ни один из пунктов» — при включенной настройке блокируется кнопка оплаты.

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

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

Имей в виду:


  • Если на сайте установлено в настройках «Не продавать товар, если данные о нем отличаются», то в корзине просто появится ошибка и заявку нельзя будет отправить. Для корректной работы необходимо указать вариант «разрешать продавать товар без проверок»;
  • После отправки корзины, страница автоматически перезагружается и сбрасывает поля. Если необходимо, чтобы поля не сбрасывались, можно использовать модификацию NLM052 Автозаполнение полей.
  • Если на странице есть несколько кастомных форм с калькулятором, то у каждой такой формы должен быть свой блок BF204N и своя уникальная ссылка на кнопку отправки #sendform1, #sendform2 и т. д.;
  • Чтобы всплывающие подсказки «Обязательное поле» не появлялись под другими полями, проверь очередность слоёв элементов внутри зеро блока;
  • Не нужно подключать приемщики данных к каждому полю внутри зеро блока. Их нужно подключать к стандартной форме BF204N или к Корзине;
  • Если языки ошибок внутри форм не совпадает с языком сайта, проверьте настройки: Язык ошибок в формах и Настройках сайта → Ещё → Язык сайта;
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 4
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 4 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 3
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 2
Создать аккаунт — это быстро и просто.
Войдите или зарегистрируйтесь на платформе
Шаг 1
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Копировать код
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1