Как сделать прайс-лист TB103, инфо-панель в Zero и оформить
заказ в форме BF502N в Tilda

<div class="price_table">
 <div class="prod_line top_head">
     <div class="image_header">Картинка</div>
     <div class="name_header">Название</div>
     <div class="dollar_header">Цена, $</div>
     <div class="rub_header">Цена, руб</div>
     <div class="count_header">Количество, шт</div>
     <div class="sum_header">Итог, руб</div>
  </div>
</div>

<style>
.price_table {padding: 40px 0}
.prod_line {
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Montserrat',Arial,sans-serif;
    font-size: 18px;
    text-align: center;
}
.prod_line.top_head {
    height: 55px;
    background-color: #ececec;
}
.prod_line>div {
    width: calc(100% / 6 );
    box-sizing: border-box;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #f3f3f3;
}
.prod_line>div:last-child { border-right: 1px solid #f3f3f3}
.prod_line{border-bottom: 1px solid #f3f3f3}
a.image-link {
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}
.image_img {
    width: 100%;
    height: 100%;
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
}
.name_wrap {font-weight: 600}
input.num_product {
    height: 30px;
    width: 60px;
    text-align: center;
    padding-left: 15px;
    border: none;
    border-bottom: 1px solid #e2e2e2;
    font-family: 'Montserrat',Arial,sans-serif;
    font-size: 18px;
}
input.num_product:focus { outline: none}
.prod_line{ transition: all 0.3s}
.prod_line:hover {box-shadow: inset 0 0 3px 0px #bbbbbb}
.totalinfo{
transform:translateY(100%);
position:fixed;
bottom:0;
width:100%;
z-index:999;
transition:all 0.3s;
}
.totalinfoshow{transform:translateY(0%)}
span.formtotal {
    padding-left: 5px;
    color: #000;
    font-size: 20px;
    font-weight: 600;
}
.prodrow {
    display: flex;
    border-bottom: 1px solid #efefef;
    margin-top: 4px;
    padding: 3px;
    font-size: 12px;
}
.prodrow:nth-child(3) { margin-top: 10px;border-top: 1px solid #efefef;}
.prodrow div { border-right: 1px solid #dcdcdc}
.prodrow div:nth-child(1) {width: 10%}
.prodrow div:nth-child(2) {
    flex-grow: 0;
    width: 50%;
    text-align: left;
    padding-left: 10px;
}
.prodrow div:nth-child(3) { width: 20%}
.prodrow div:nth-child(4) { width: 20%;border-right: none}
}
.t702__descr {
    max-height: 250px;
    overflow-y: auto;
}
input[name="rubles"],textarea[name="orderlist"],div[data-record-type="523"]{display:none}

.dollar_wrap span:after {
    content: " $";
}
.rub_wrap span:after {
    content: " \20BD";
}
.sum_wrap span:after {
    content: " \20BD";
}
.count_wrap:after {
    content: "шт";
    margin-left: 7px;
}

@media screen and (max-width: 960px){
.t123 .t-container {
    max-width: none;
}
.prod_line{
    font-size: 14px;
    height: 75px;
}
input.num_product {
    font-size: 14px;
    width: 40px;
}
.price_table {
    padding: 40px 0px;
}
}

@media screen and (max-width: 580px){
.prod_line.top_head {
    display: none;
}
.prod_line:nth-child(2) {
    border-top: 1px solid #f3f3f3;
}
.prod_line{
    height: auto;
    flex-wrap: wrap;
    justify-content: space-around;
    border: 1px solid #f3f3f3;
    padding: 6px 0;
    box-shadow: inset 0 -55px #f5f5f5;
}
.prod_line>div {
    width: calc(100% / 4 );
    height: 50px;
    border: none !important;
}
input.num_product {
    border: 1px solid #e2e2e2;
}
}
</style>

<script>
$( document ).ready(function() {
let currency = 77;//Курс компании
let formId = 'div.t-popup[data-tooltip-hook="#makeorder"]';

//Заполнить прайс
$('.t523__row').each(function() {
let prodImg = $(this).find('.t523__img').attr('data-original');
let prodName = $(this).find('.t523__persname').text();
let prodprice = Number($(this).find('.t523__time').text());
let rubles = (currency*prodprice).toFixed();
$('.price_table').append('<div class="prod_line"><div class="image_wrap"><a class="image-link" href="#popup:productgallery"><div class="image_img" style="background-image:url('+prodImg+')"></div></a></div><div class="name_wrap">'+prodName+'</div><div class="dollar_wrap"><span>'+prodprice+'</span></div><div class="rub_wrap"><span>'+rubles+'</span></div><div class="count_wrap"><input class="num_product" type="number" value="" placeholder="0" min="0" name="count-items"></div><div class="sum_wrap"><span>0</span></div></div>');
});

//При изменении кол-ва
$(document).on('input.num_product',function(ev){  
    $(ev.target).parent().siblings('.sum_wrap').find('span').html($(ev.target).parent().siblings('.rub_wrap').find('span').html() * $(ev.target).val());
    totalPrice();
});

//Выводить итог в панель
$('a[href="#makeorder"]').closest('.t-rec').addClass('totalinfo');
function totalPrice(){
let totalnum = 0;  let totalsum = 0; 
$('.prod_line:not(.top_head)').each(function() {
totalnum += Number($(this).find('input.num_product').val());
totalsum +=  Number($(this).find('.sum_wrap span').html());
}); 
$('.summcount .tn-atom').html(totalnum);
$('.totalsum .tn-atom').html(totalsum);
//При изменении кол-ва показываем или скрываем панель
if(totalnum>0){ $('.totalinfo').addClass('totalinfoshow')
}else{  $('.totalinfo').removeClass('totalinfoshow')};
};

//Удаление заказа при нажатии кнопки отмена
$(document).on('click','a[href="#cancelorder"]',function(e){ e.preventDefault();
$('input.num_product').val(0);$('.sum_wrap span').html(0);totalPrice();
});

//При нажатии кнопки Оформить заказ, заполняем форму прайсом    
$(document).on('click','a[href="#makeorder"]',function(e){     
$(formId).find('.t702__descr').html('<span>Вы заказали на сумму:</span><span class="formtotal">'+$('.totalsum .tn-atom').html()+' руб.</span>');

let prodlist = 1; let orderlist='*';
$('textarea[name="orderlist"]').val('');
$('.prod_line:not(.top_head)').each(function() {
    if( Number($(this).find('input.num_product').val())>0  ){
     let pname = $(this).find('.name_wrap').html();
     let pupaeSum = $(this).find('input.num_product').val();
     let calcproduct = $(this).find('.sum_wrap span').html()
     $(formId+' .t702__descr').append('<div class="prodrow"><div class="prodlist">'+prodlist+'</div><div class="prodName">'+pname+'</div><div class="prodQuant">'+pupaeSum+' шт.</div><div class="prodTotal">'+calcproduct+' руб.</div></div>');
        orderlist = orderlist+'\n'+prodlist+' - '+pname+' - '+pupaeSum+' шт. - '+calcproduct+' руб.';
        prodlist++;
    };
});
//Заполняем поле ввода в несколько строк
$('textarea[name="orderlist"]').val(orderlist+'\nСумма заказа: '+$('.totalsum .tn-atom').html()+' руб.');
});  

//При клике на фото
$('.image-link').click(function(){
    let imgurl = $(this).find('.image_img').css('background-image');
    let clearimgurl = imgurl.replace('url(','').replace(')','').replace(/\"/gi, "");
    $('.t746 .t-slds__bgimg').attr('data-original', clearimgurl);
    $('.t746 .t-slds__bgimg').css('background-image', imgurl);
});

//Ограничение ввода в поле
$(document).on('change keyup input click','input.num_product',function(e){
if (this.value.match(/[^0-9]/g)) {this.value = this.value.replace(/[^0-9]/g, '')};
//Предел 2 знака
if( $(this).val().length > 2) $(this).val($(this).val().substr(0, 2)); 
});
});
</script>