Как принять заявку, когда товара нет в наличии в Tilda

Создали каталог товаров в блоке ST305N

Добавили код (форма на отдельной странице ч1) на страницу с каталогом в блок Т123 и в продуктовый footer
В коде задаём надпись кнопке и ссылку страницы с формой
let btnCaption = 'Сообщить о поступлении'; //Надпись на кнопке
let formlink= 'productoutform'; //Ссылка на страницу с формой

Вариант для формы в BF402N
Создали страницу с адресом productoutform для заказа и добавили в ней форму BF402N (видео заменить на картинку, надпись под видео не удалять)

Вариант для формы в ZeroBlock
Создали страницу с адресом productoutform для заказа и добавили в ней ZeroBlock с формой

создали Shape для фото товара с классом productout-img (загрузить картинку)
создали Text для описания товара с классом productout-text

В форме создали скрытое поле с именем needproduct

Добавили код (форма на отдельной странице ч2) в блок Другое Т123 на этой созданной странице

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Создаём форму для оформления заявки на отсутствующий товар на отдельной странице или в popup окне.

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера (форма на отдельной странице ч1)


<script>
$( document ).ready(function() {
let btnCaption = 'Сообщить о поступлении'; //Надпись на кнопке
let formlink= 'productoutform'; //Ссылка на страницу с формой
function needproductClear(){    
  $('.t-store__prod-popup__btn-wrapper').removeClass('needproduct');
  $('.t-rec').removeClass('needparent needactive');
}
function needproduct(){
   if($(".needactive .t-store__prod-popup__btn").hasClass("t-store__prod-popup__btn_disabled")) {
                 $('.js-store-prod-popup-buy-btn-txt').html(btnCaption+' &#128383;');
                 $('.t-store__prod-popup__btn-wrapper').addClass('needproduct');
                 $('.t-store__prod-popup__btn-wrapper .t-store__prod-popup__btn').wrap('<div class="needproduct-btn"></div>');
                 $('.t-store .t-popup.t-popup_show , .t-store__product-snippet').closest('.r>div').addClass('needparent');
                };  
};
   var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        var newVal = $(mutation.target).prop(mutation.attributeName);
        if (mutation.attributeName === "class") {
        setTimeout(function(){
         if($(".t-store .t-popup").hasClass("t-popup_show")) {
             setTimeout(function(){
             $('.t-store .t-popup.t-popup_show').closest('.t-rec').addClass('needactive');    
             needproduct();}, 100);	
         }else{needproductClear()}; }, 100);
    };});
});
observer.observe( document.body, {  attributes: true});
setTimeout(function(){
    if($('div').is('.t-store__product-snippet')){
        $('.t-store__product-snippet').addClass('needactive');
        needproduct();
    };
}, 400);	

$('body').on('click','.needproduct-btn',function(e){e.preventDefault();

    let prodMainInfo = [];

    prodMainInfo.push('Название товара: '+$('.needparent .t-store__prod-popup__name').text());
    prodMainInfo.push($('.needparent .t-store__prod-popup__sku').text());
    prodMainInfo.push('Цена: '+$('.needparent .js-product-price.t-store__prod-popup__price-value').text()+' '+$('.t-store__prod-popup__price-currency').html());
    //prodMainInfo.push($('.needparent  .js-store-product').attr('data-product-img'));
     prodMainInfo.push(  $('.needparent  .js-store-product .t-slds__item_active .t-slds__bgimg').attr('data-original')  );
    
    let currentCotrols = $(this).closest('.js-product').find('.js-product-controls-wrapper');
    let numOption = currentCotrols.find('.t-product__option').length;
    let prodOption={};
    if(numOption){
        currentCotrols.find('.t-product__option').each(function(index) {
            prodOption[$(this).find('div.t-product__option-title').text()] = $(this).find('.t-product__option-select').val();
        });
        localStorage.setItem ("prodOption", JSON.stringify(prodOption));
    }else{ localStorage.removeItem('prodOption');};
    
     if (prodMainInfo[0]){ 
        localStorage.setItem('prodMainInfo', JSON.stringify(prodMainInfo));
        window.open('/'+formlink , '_blank')
    };
    
});   
    $(document).on('click','.needactive .t-slds__bullet',function(e){
        setTimeout(function(){needproduct();}, 600);});   
    $(document).on('change','.needactive .t-product__option-select',function(e){
        setTimeout(function(){
        $('.t-store__prod-popup__btn-wrapper').removeClass('needproduct');
        needproduct();}, 600);});   
    $(document).on('input','.needactive input',function(e){
        setTimeout(function(){
        $('.t-store__prod-popup__btn-wrapper').removeClass('needproduct');
        needproduct();}, 200);});           
        
});
</script>
<style>
.t-store__prod-popup__btn_disabled, .js-store-prod-popup-buy-btn-txt { opacity: 1 !important;}
.t-store__prod-popup__btn-wrapper {
    cursor: pointer;
    width: max-content;
}
.t-store__prod-popup__btn-wrapper {
    display: flex;
}
</style>

Библиотека для примера (форма на отдельной странице ч2)


<script>
$( document ).ready(function() {
if (localStorage.getItem('prodMainInfo') !== null) {
    let getMainProduct = JSON.parse(localStorage.getItem("prodMainInfo"));  
    let productForText='';
    let productForForm='';
    for (let i=0; i<3; i++){
        productForText += `${getMainProduct[i]}<br>`;
        productForForm += `${getMainProduct[i]}; `;
    };
    if (localStorage.getItem('prodOption') !== null) {
    let getOptionProduct = JSON.parse(localStorage.getItem("prodOption"));    
        for (var key in getOptionProduct) {
            productForText += `${key}: ${getOptionProduct[key]}<br>`;
            productForForm += `${key}: ${getOptionProduct[key]}; `;
        };
    };
    $('.t700__video-descr').html(productForText); 
    $('.productout-text .tn-atom').html(productForText); 
    
    setTimeout(function(){
        $('.t700__img').attr('src', getMainProduct[3]);
        $('.productout-img .tn-atom').css('background-image', 'url('+getMainProduct[3]+')').attr('data-original', getMainProduct[3]);
    }, 1000);
    $('input[name="needproduct"]').val(productForForm.replace(/\s{2,}/g, ' '));
    function waitingFormComplete(){
        setTimeout(function(){$('input[name="needproduct"]').val(productForForm.replace(/\s{2,}/g, ' '))}, 3000);    
    }; waitingFormComplete();
    $(window).resize(function() {clearTimeout(window.resizedFinished); window.resizedFinished = setTimeout(function(){ waitingFormComplete()}, 1000);});
};
});
</script>

Библиотека для примера (форма в pop-up)

Создали каталог товаров в блоке ST305N

Создали форму BF502N шириной 10 колонок
Ссылка для открытия блока #popup:productout
В форме создали скрытое поле с именем needproduct
Форму разместили на странице каталога и в продуктовый footer

Добавили код ниже на страницу с каталогом в блок Т123 и в продуктовый footer
В коде задаём надпись кнопке и ссылку на pop-up с формой
let btnCaption = 'Сообщить о поступлении'; //Надпись на кнопке
let formlink = '#popup:productout'; //Ссылка на popup


<script>
$( document ).ready(function() {
let btnCaption = 'Сообщить о поступлении'; //Напись на кнопке
let formlink = '#popup:productout'; //Ссылка на popup
let popupBlk = $('div[data-tooltip-hook="'+formlink+'"]').closest('.t-rec');
let formNeedID='';
if(popupBlk.length){
    popupBlk.addClass('needform');
    formNeedID =  popupBlk.attr('id').replace(/[^0-9]/g,"")
};
popupBlk.find('.t-popup__container').prepend('<div class="t702__leftcol"><div class="t702__leftcol_wrapper"><div class="t702__leftcol-img"></div><div class="t702__leftcol-txt t-descr"></div></div></div>');
function needproductClear(){    
  $('.t-store__prod-popup__btn-wrapper').removeClass('needproduct');
  $('.t-rec').removeClass('needparent needactive');
}
function needproduct(){
    if($(".needactive .t-store__prod-popup__btn").hasClass("t-store__prod-popup__btn_disabled")) {
                 $('.js-store-prod-popup-buy-btn-txt').html(btnCaption+' &#128383;');
                 $('.t-store__prod-popup__btn-wrapper').addClass('needproduct');
                 $('.t-store__prod-popup__btn-wrapper .t-store__prod-popup__btn').wrap('<div class="needproduct-btn"></div>');
                 $('.t-store .t-popup.t-popup_show , .t-store__product-snippet').closest('.r>div').addClass('needparent');
    }else{
        $(".needproduct-btn").contents().unwrap();
    };
};
   var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        var newVal = $(mutation.target).prop(mutation.attributeName);
        if (mutation.attributeName === "class") {
        setTimeout(function(){
         if($(".t-store .t-popup").hasClass("t-popup_show")) {
             setTimeout(function(){
             $('.t-store .t-popup.t-popup_show').closest('.t-rec').addClass('needactive');    
             needproduct();}, 100);	
         }else{needproductClear()}; }, 100);
    };});
});
observer.observe( document.body, {  attributes: true});
setTimeout(function(){
    if($('div').is('.t-store__product-snippet')){
        $('.t-store__product-snippet').addClass('needactive');
        needproduct();
    };
}, 400);	

$('body').on('click','.needproduct-btn',function(e){e.preventDefault();
        let imagNeedProd = $('.needparent  .js-store-product').attr('data-product-img');
        $('.t702__leftcol-img').css('background-image', 'url('+imagNeedProd+')').attr('data-original', imagNeedProd);
        let productForText= `Название товара: ${$('.needparent .t-store__prod-popup__name').text()}<br>
                            ${$('.needparent .t-store__prod-popup__sku').text()}<br>
                            Цена: ${$('.needparent .js-product-price.t-store__prod-popup__price-value').text()} ${$('.t-store__prod-popup__price-currency').html()}
                             `;
    
        let productForForm=`Название товара: ${$('.needparent .t-store__prod-popup__name').text()}; 
                            ${$('.needparent .t-store__prod-popup__sku').text()}; 
                            Цена: ${$('.needparent .js-product-price.t-store__prod-popup__price-value').text()} ${$('.t-store__prod-popup__price-currency').html()}; 
                             `;
        
        let currentCotrols = $(this).closest('.js-product').find('.js-product-controls-wrapper');
        let numOption = currentCotrols.find('.t-product__option').length;
        let prodOption={};
        if(numOption){
            productForText +=`<br><span>Опции товара:</span><br>`;
            productForForm +=` Опции товара: `;
            currentCotrols.find('.t-product__option').each(function(index) {
                productForText +=`${$(this).find('div.t-product__option-title').text()}: ${$(this).find('.t-product__option-select').val()}<br>`;
                productForForm +=`${$(this).find('div.t-product__option-title').text()}: ${$(this).find('.t-product__option-select').val()}; `;
            });
        };
        $('.t702__leftcol-txt').html(productForText);
        $('input[name="needproduct"]').val(productForForm.replace(/\s{2,}/g, ' '));
        $('.needparent .t-popup__close').click();
        t702_showPopup(formNeedID);
        t702_resizePopup(formNeedID); 
});   
    $(document).on('click','.needactive .t-slds__bullet',function(e){
        setTimeout(function(){needproduct();}, 600);});   
    $(document).on('change','.needactive .t-product__option-select',function(e){
        setTimeout(function(){
        $('.t-store__prod-popup__btn-wrapper').removeClass('needproduct');
        needproduct();}, 600);});   
    $(document).on('input','.needactive input',function(e){
        setTimeout(function(){
        $('.t-store__prod-popup__btn-wrapper').removeClass('needproduct');
        needproduct();}, 300);});           

});
</script>
<style>
.t-store__prod-popup__btn_disabled, .js-store-prod-popup-buy-btn-txt { opacity: 1 !important;}
.t-store__prod-popup__btn-wrapper {
    cursor: pointer;
    width: max-content;
}
.needform .t702__img {
    display: none;
}
.needform .t-popup__container {
    display: flex;
    overflow: hidden;
}
.needform .t702__wrapper {
    width: 50%;
    box-sizing: border-box;
}
.t702__leftcol {
    width: 50%;
    box-shadow: 0px 0 45px 0 #b1b1b1;
}
.t702__leftcol_wrapper{
    width: 100%;
    height: 100%;
    padding: 40px 45px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    font-size: 14px;
}
.t702__leftcol-img {
    width: 60%;
    height: 60%;
    min-height: 250px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 25px;
}
.t702__leftcol-txt span {
    box-shadow: 0 1px 0px 0 #c1c1c1;
    display: inline-block;
    margin-bottom: 5px;
    margin-top: 5px;
}
@media screen and (max-width:800px){
.needform .t-popup__container{
    flex-direction: column;
    align-items: center;
}
.needform .t702__wrapper {
    width: auto;

}

.t702__leftcol_wrapper {
    flex-direction: row;
}

.t702__leftcol {
    width: 100%;
    box-shadow: 0px 0 10px 0 #b1b1b1;
}
.t702__leftcol-img {
    width: 30%;
    min-height: 180px;
    margin-right: 20px;
    margin-bottom: 0px;
}
}
@media screen and (max-width:500px){
.t702__leftcol_wrapper {
    padding: 30px 10px;  
}
.t702__leftcol-img {
    width: 100px;
    min-height: 100px;
}
.t702__leftcol_wrapper {
    font-size: 12px;
}
}
.t-store__prod-popup__btn-wrapper {
    display: flex;
}
</style>