Loading...
О НАС
КЛИЕНТАМ
ПАРТНЁРАМ
СЛЕДИТЕ ЗА НАМИ
ОТВЕТИМ НА ВОПРОСЫ
В ЧАТ-БОТЕ:
Nolim Academy
Расширение
Онлайн-чат
Академия
Расширение
Техподдержка
Расширение
Онлайн-чат
Nolim Academy
Модификации
Профиль
Подписка
Партнерская программа
ВРЕМЯ НАСТРОЙКИ: 5 МИНУТ

Как сделать калькулятор на Тильде

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

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

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

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

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

Вариант #2: С передачей в форму
  • «Введите id зеро блока» – id Зеро-блока, в котором находится форма;
  • «Выберите эффект» – в данном разделе инструкции описан пример настройки варианта «с передачей в форму»;
  • «Введите id BF204N блока»;
  • «Цвет фона попапа успешной отправки формы»;
  • «Цвет текста в попапе успешной отправки формы»;
  • «Цвет иконки в попапе успешной отправки формы»;
  • «Цвет крестика в попапе успешной отправки формы»;
  • «Введите ссылку для кнопки» – указываешь ссылку кнопки, которую ранее добавляли в Зеро-блоке (например, #linkbtn);
  • «Какие поля передавать» – можно выбрать вариант «передавать все поля» или «передавать только перечисленные»;
Дополнительные настройки:
  • «Отправлять форму при нажатии Enter» – есть возможность включить или отключить данную функцию;
  • «Сбрасывать поля формы после отправки» – выбираешь необходимый вариант;
  • «Скрывать стандартный попап об успехе» – выбираешь необходимый вариант.

Вариант #3: Просто калькулятор
  • «Введите id зеро блока» – id Зеро-блока, в котором находится форма;
  • «Выберите эффект» – в данном разделе инструкции описан пример настройки варианта «просто калькулятор»;
Применение данной настройки отключает возможность отправки формы настроенной в Зеро-блоке, «нажатием на enter».

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

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