О-06778
Коммерческая печать с логотипом
600 руб
Оснастка для печати
Срок изготовления
Загрузите Свидетельство о постановке на учет
Введите контакты для оформления заказа

Создаём форму в ZeroBlock с выбором параметров в 2 шага и переходом на оплату в банк Тинькофф в Tilda?

Создаём статичную форму из блока BF204N в ZeroBlock
Порядок выполнения:
1. Создаём ZeroBlock и заполняем его контентом
2. В ZeroBlock создаём элемент HTML и добавляем в него блок
<div class="t678 zero"></div>
3. Добавляем на станицу форму BF204N и заполняем её (+добавляем скрытое поле с именем nomerzakaza)
4. Добавляем блок BF101 - кнопка
5. Добавляем код №1 - это код перемещения фомры
Меняем в нём 3 ID
6. Добавляем код №2 - Это код банка
7. Добавляем код №3 - Это код калькулятора и второго шага
Необходимо заменить:
tn_img_1518680764408 - это фото вида печати
tn_img_1518689903273 - это фото 24 или 1 час
tn_text_1518680122832 - это поле цены
tn_text_1518680121689 - это поле наименования товара

Скрипты и стили добавляем в блок ДРУГОЕ►T123

1
<script type="text/javascript">
//Задаём ID наших блоков
var idzero = '#rec44951597'; //ZeroBlock 
var idforma = '#rec44953223'; //Блок с формой
var idknopka = '#rec44954555'; //Блок с кнопкой
$(idzero).addClass("zeroformstyle"); 
//Скрываем лишние шаги
$(idforma+" "+".t-input-group:eq(3)").css("display" , "none");
$(idforma+" "+".t-input-group:eq(4)").css("display" , "none");
$(idforma+" "+".t-input-group:eq(5)").css("display" , "none");
$(idforma+" "+".t-input-group:eq(6)").css("display" , "none");
//Скрываем кнопку КУПИТЬ
$(idforma+" "+".t-submit").css("display" , "none"); 
//Скрываем кнопку ОФОРМИТЬ
$(idknopka).css("display" , "none"); 
//Клонируем кнопки
 $(idknopka+" "+".t142 .t-btn").appendTo(idforma+" "+".t678 .t-form__submit");

//клонируем нашу форму в ZeroBlock
$(idforma).appendTo(".t678.zero");
//Скрывает табличку с ошибкой заполнения
$(".t-form__errorbox-middle").hide();
//Скрывает надписи об ошибке заполнения
$(".t-input-error").hide();
</script>

<style type="text/css">
/*Задаём цвет таблички об успешной отправке данных */    
    .t-form__successbox{
        background:#02a0c7 !important;
    }
/*Высота полей ввода */    
    .zeroformstyle input{
    
    }
/*Отступ между полями */     
    .zeroformstyle t-input-group{
    margin-bottom: 20px !important;
    }
/*Задаём цвет при наведении для кнопки в Zero */
    .zeroformstyle button:hover {
    background-color:#914c50 !important;
    }   
/*Задаём высоту и плавность перехода для кнопки в Zero */
    .zeroformstyle button{
       transition: all 0.3s ease-in-out;
    }    
       .t-input-group_nm{
     margin-top:30px;   
    }
    
 </style>

2
<style>.tinkoffPayRow{display:block;margin:1%;width:160px;}</style>
<script src="https://securepay.tinkoff.ru/html/payForm/js/tinkoff.js"></script>
<form name="TinkoffPayForm" onsubmit="pay(this); return false;">
	<input class="tinkoffPayRow" type="hidden" name="terminalkey" value="TinkoffBankTest">
	<input class="tinkoffPayRow" type="hidden" name="frame" value="true">
	<input class="tinkoffPayRow" type="hidden" name="language" value="ru">
    <input class="tinkoffPayRow" type="text" placeholder="Сумма заказа" name="amount" required>
    <input class="tinkoffPayRow" type="text" placeholder="Номер заказа" name="order">
    <input class="tinkoffPayRow" type="text" placeholder="Описание заказа" name="description">
    <input class="tinkoffPayRow" type="text" placeholder="ФИО плательщика" name="name">
    <input class="tinkoffPayRow" type="text" placeholder="E-mail" name="email">
    <input class="tinkoffPayRow" type="text" placeholder="Контактный телефон" name="phone">
    <input class="tinkoffPayRow" type="submit" value="Оплатить">
</form>

3
<script>

//Задаём переменные
var itogvid = 0,
    itogspeed =0,
    cenaobich = 300,
    cenaavtomat = 600,
    cenazachas = 500,
    summa =600;
//При переключении переключателей
$( ".t-radio__wrapper" ).change(function() {

//Если выбрали АВТОМАТИЧЕСКУЮ
if ($(".t-radio:eq(0)").prop('checked')) {
    //Меняем фото и цену
    $("[imgfield='tn_img_1518680764408']").attr("src","https://static.tildacdn.com/tild3039-6163-4632-a239-353765343731/avtomat.png");
    itogvid=cenaavtomat;
};
//Если выбрали ОБЫЧНУЮ
if ($(".t-radio:eq(1)").prop('checked')) {
    //Меняем фото и цену
    $("[imgfield='tn_img_1518680764408']").attr("src","https://static.tildacdn.com/tild3238-3562-4732-b438-616161623235/obichnaya.png");
    itogvid=cenaobich;
};
//Если выбрали за 24 часа
if ($(".t-radio:eq(2)").prop('checked')) {
     //Меняем фото и цену
      $("[imgfield='tn_img_1518689903273']").attr("src","https://static.tildacdn.com/tild3735-6634-4736-b332-343963663431/24chas.png");
     itogspeed = 0;
     
};
//Если выбрали за час
if ($(".t-radio:eq(3)").prop('checked')) {
    //Меняем фото и цену
    $("[imgfield='tn_img_1518689903273']").attr("src","https://static.tildacdn.com/tild3838-6663-4539-b564-306435623130/1chas.png");
    itogspeed = cenazachas;
};
//Выводим итоговую цену
   summa = itogvid+itogspeed;
   $("[field='tn_text_1518680122832']").text(summa+' руб');
    
});
    
*******************************************************************************    
//При клике на кнопку ОФОРМИТЬ ЗАКАЗ включаем второй шаг
$(function(){
       $(idforma+" "+".t142__submit").click(function () {
          
           if($(".uploadcare-widget").hasClass("uploadcare-widget-status-ready")){
               
              $(".t-input-subtitle").css({'font-weight' : '600', 'color':'#ff0000' , 'text-transform' : 'uppercase'});

               
           } else {
              $(".t-input-subtitle").css({'font-weight' : '300', 'color':'#000000'  , 'text-transform' : 'none'});
          
            //Скрываем кнопку ОФОРМИТЬ ЗАКАЗ
           $(idforma+" "+".t142__submit").css("display" , "none");
           //Скрываем первый шаг и открываем второй
           $(idforma+" "+".t-input-group:eq(0)").css("display" , "none");
           $(idforma+" "+".t-input-group:eq(0)").css("display" , "none");
           $(idforma+" "+".t-input-group:eq(1)").css("display" , "none");
           $(idforma+" "+".t-input-group:eq(2)").css("display" , "none");
           $(idforma+" "+".t-input-group:eq(3)").css("display" , "block");
           $(idforma+" "+".t-input-group:eq(4)").css("display" , "block");
           $(idforma+" "+".t-input-group:eq(5)").css("display" , "block");
           $(idforma+" "+".t-input-group:eq(6)").css("display" , "block");
           //Открываем кнопку КУПИТЬ
           $(idforma+" "+".t-submit").css("display" , "block"); 
          
  //При нажатии на кнопку  присваиваем сумму заказа полю AMOUNT Тинькофф формы и название позиции         
           $("input[name='amount']").val(summa);
           $("input[name='description']").val( $("[field='tn_text_1518680121689']").text());
           
           
           
            return;
           }; 
         });
});       
******************************************************************************    
    
</script>

4
<style>
/*Скрываем блок с формой Tinkoff*/
    #rec44972811{
        display:none;
    }
    
</style>

<script>

$(document).ready(function(){
 //Формируем буквы заказа
function str_rand() {
        var result       = '';
        var words        = 'QWERTYUIOPASDFGHJKLZXCVBNM';
        var max_position = words.length - 1;
            for( i = 0; i < 2; ++i ) {
                position = Math.floor ( Math.random() * max_position );
                result = result + words.substring(position, position + 1);
            }
        return result;
    };
 //Формируем числа заказа    
function randomNumber (m,n)
{
  m = parseInt(m);
  n = parseInt(n);
  return Math.floor( Math.random() * (n - m + 1) ) + m;
};
//Создаём переменную номера заказа
var nomerzakaza = str_rand() + randomNumber (10000,99999); 
//Присваиваем номер заказа полю ORDER Тинькофф формы
$("input[name='order']").val(nomerzakaza);
$("input[name='nomerzakaza']").val(nomerzakaza);


//Блокируем Enter при заполнении формы
$(".t-form").keydown(function(event){
        if(event.keyCode == 13) {
          event.preventDefault();
          return false;
      }
   });


//При отправке штатной формы
 window.mySuccessFunction= function($form){
        
       //Скрываем лишние элементы после отправки
       $(".t-form__inputsbox").css("display" , "none");
       //присваиваем данные форме Тинькофф формы 
         $("input[name='phone']").val($("input[name='Phone']").val());
         $("input[name='name']").val($("input[name='Name']").val());
         $("input[name='email']").val($("input[name='Email']").val());
   
      
        //Вызываем терминал банка
       $('.tinkoffPayRow')[9].click();
       

        
    }
   
    $('.js-form-proccess').each(function(){
        $(this).data('success-callback', 'window.mySuccessFunction');
    });

});

</script>
Made on
Tilda