Как сделать прайс-лист TB103, инфо-панель в Zero и оформить заказ в форме BF502N в Tilda
Специи из Тайланда
Картинка
Название
Цена, $
Цена, руб
Количество, шт
Итог, руб
Аджика
1.2
Бадьян
1.08
Кардамон
0.92
Имбирь
1.16
Кокос
1.04
Кориандр
0.82
Корица
0.76
Паприка
0.64
Бергамот
1.44
Галангал
1.33
Аджика
1.2
Бадьян
1.08
Кардамон
0.92
Имбирь
1.16
Кокос
1.04
Кориандр
0.82
Корица
0.76
Паприка
0.64
Бергамот
1.44
Галангал
1.33
Аджика
1.2
Бадьян
1.08
Кардамон
0.92
Имбирь
1.16
Кокос
1.04
Кориандр
0.82
Корица
0.76
Паприка
0.64
Бергамот
1.44
Галангал
1.33
Аджика
1.2
Бадьян
1.08
Кардамон
0.92
Имбирь
1.16
Кокос
1.04
Кориандр
0.82
Корица
0.76
Паприка
0.64
Бергамот
1.44
Галангал
1.33
Аджика
1.2
Бадьян
1.08
Кардамон
0.92
Имбирь
1.16
Кокос
1.04
Кориандр
0.82
Корица
0.76
Паприка
0.64
Бергамот
1.44
Галангал
1.33
Аджика
1.2
Бадьян
1.08
Кардамон
0.92
Имбирь
1.16
Кокос
1.04
Кориандр
0.82
Корица
0.76
Паприка
0.64
Бергамот
1.44
Галангал
1.33
Аджика
1.2
Бадьян
1.08
Кардамон
0.92
Имбирь
1.16
Кокос
1.04
Кориандр
0.82
Корица
0.76
Паприка
0.64
Бергамот
1.44
Галангал
1.33
Аджика
1.2
Бадьян
1.08
Кардамон
0.92
Имбирь
1.16
Кокос
1.04
Кориандр
0.82
Корица
0.76
Паприка
0.64
Бергамот
1.44
Галангал
1.33
Аджика
1.2
Бадьян
1.08
Кардамон
0.92
Имбирь
1.16
Кокос
1.04
Кориандр
0.82
Корица
0.76
Паприка
0.64
Бергамот
1.44
Галангал
1.33
Аджика
1.2
Бадьян
1.08
Кардамон
0.92
Имбирь
1.16
Кокос
1.04
Кориандр
0.82
Корица
0.76
Паприка
0.64
Бергамот
1.44
Галангал
1.33
Аджика
1.2
Бадьян
1.08
Кардамон
0.92
Имбирь
1.16
Кокос
1.04
Кориандр
0.82
Корица
0.76
Паприка
0.64
Бергамот
1.44
Галангал
1.33

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

1
Создали прайс в блоке TB103 (заполнили название, цену и фото
( см. рис. ниже))
2
Создали ZeroBlock (высота 80px ) для вывода итоговой информации и кнопки заказа.
В этом блоке добавили:
- Text для общего кол-ва (задали class - summcount )
- Text для суммы заказа (задали class - totalsum )
- Button для вызова формы (задали ссылку #makeorder)
- Button для сброса заказа (задали ссылку #cancelorder)
3
Создали форму BF502N со ссылкой вызова #makeorder
и добавили в ней поле "Для вода в несколько строк"
8 строк с именем orderlist
4
Создали pop-up GL08N со ссылкой вызова #popup:productgallery
c 1 картинкой
5
Добавили первый код в блок Другое - Т123 в то место, где будет таблица
Добавили второй код в блок Другое - Т123 в конец страницы
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём прайс-лист из блока TB103, оформляем панель заказа в ZeroBlock, форму заказа собираем в BF502N и делаем zoom для картинок из блока GL08N
Фрагмент видео
Библиотека для примера
<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>
В заказе:
0
шт
На сумму:
0
руб
Made on
Tilda