Как сделать форму предзаказа для товара который закончился?

При помощи этой модификации можно создать форму предзаказа в блоках магазина когда товар закончился. Дополнительно можно изменить текст на кнопке "нет в наличии". Скрипт работает с блоками ST300, ST305N, ST310N, ST315N, ST320N

Модификация работает с включенным Autoscale в блоках

Модификация работает только со стандартным блоком

Номер модификации в библиотеке TiCode

Генератор кода

поделиться модификацией

Ссылка на popup

Класс блока popup

Переменная в форме popup

Текст кнопки

Цвет текста

Цвет фона кнопки

Радиус скругления углов кнопки

войти

Войдите в аккаунт чтобы получить доступ к генератору кода

регистрация

оплатить

Этот генератор кода доступен только тем кто оплатил подписку

Первая часть кода (вставляем в блок Т123)

<script>(function() { var TiCodeBTNShop='Cообщить когда появиться';var TCDPopupOutHref='#ti-preorder';$(function(){setTimeout(function(){$('[href="#ti-preorder"]').click(function(){var title=$(this).closest('.js-product').find('.js-store-prod-name').text();console.log(title);setTimeout(function(){$('.uc-tiout [name="soldout"]').val(title);},500);});$('.js-store-prod-btn2').click(function(){var title2=$(this).closest('.js-product').find('.js-store-prod-name').text();console.log(title2);setTimeout(function(){$('.uc-tiout [name="soldout"]').val(title2);},500);});},3000);});t_onReady(function(){t_onFuncLoad('t_store_init',function(){let link=document.createElement('a');link.setAttribute('href',TCDPopupOutHref);document.body.appendChild(link);let origtxt=document.querySelector('.js-store-prod-popup-buy-btn-txt').innerText;document.querySelectorAll('.t-store').forEach(function(storeBlock){let outprod=new MutationObserver(function(mutations){mutations.forEach(function(mutation){if(mutation.type==='attributes'&&mutation.attributeName==='class'){let buy_btn=storeBlock.querySelector('.t-store__prod-popup__btn');if(storeBlock.querySelector('.t-store__prod-popup__btn_disabled')){buy_btn.querySelector('.js-store-prod-popup-buy-btn-txt').innerText=TiCodeBTNShop;buy_btn.href=TCDPopupOutHref;buy_btn.classList.remove('t-store__prod-popup__btn_disabled');}else{buy_btn.querySelector('.js-store-prod-popup-buy-btn-txt').innerText=origtxt;buy_btn.href='#order';}storeBlock.querySelectorAll('.t-product__option-item').forEach(function(item){item.addEventListener('click',function(e){if(e.target.closest('.t-product__option-item ').classList.contains('t-product__option-item_disabled')){e.preventDefault();storeBlock.querySelector('[href='+TCDPopupOutHref+']').click();}},true);});if('.t-store select [disabled="disabled"]'){storeBlock.querySelectorAll('[disabled="disabled"]').forEach(function(item){item.addEventListener('click',function(e){e.preventDefault();storeBlock.querySelector('[href='+TCDPopupOutHref+']').click();},true);item.removeAttribute('disabled');});}}});});outprod.observe(storeBlock.querySelector('.t-store .t-popup'),{attributes:true});});document.querySelectorAll('.t-store').forEach(function(storeBlock){let startObserver=new MutationObserver(function(mutations){mutations.forEach(function(mutation){if(mutation.attributeName!=='data-preloader-timeout'){storeBlock.querySelectorAll('.t-store__prod-popup__btn_disabled').forEach(function(item){item.querySelector('.t-store__card__btn-text').innerHTML=TiCodeBTNShop;item.href=TCDPopupOutHref;item.classList.remove('t-store__prod-popup__btn_disabled');});}});});startObserver.observe(storeBlock.closest('.t-rec'),{attributes:true});});});}); })();</script> <script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>

КОПИРОВАТЬ КОД

Вторая часть кода (см. инструкцию)

<style>.t-store .t-popup{z-index:2500!important}.t-product__option-item_disabled{pointer-events:all!important}.t-store__prod-popup__price-wrapper{margin-bottom:20px}.t-store .t-store__prod-popup__close-txt-wr,.t-store .t-popup__close{display:block!important}</style><script>$(document).ready(function(){var TiCodeBTNShop='Cообщить когда появиться';var TCDPopupOutHref='#ti-preorder';var TiColorText='#ffffff';var TiColorBg='#000000';var timer=setInterval(function(){if($('.js-store-prod-sold-out').length>=1){clearInterval(timer);$('.js-store-prod-sold-out').css('display','none');$('.t-store__prod-popup__links-wrapper').append(`<a href="${TCDPopupOutHref}" class="t-store__prod-popup__btn t-btn t-btn_sm" style="color:${TiColorText};background-color:${TiColorBg};border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;"><table style="width:100%;height:100%;"><tbody><tr><td class="js-store-prod-popup-buy-btn-txt">${TiCodeBTNShop}</td></tr></tbody></table></a>`)}},50);var timer2=setInterval(function(){if($('[href="#ti-preorder"]').length>=1){console.log('href');clearInterval(timer2);$('.t-store__prod-popup__btn').click(function(){console.log('click');setTimeout(function(){var title2=$('.t-store__prod-popup__info').find('.js-store-prod-name').text();$('.uc-tiout [name="soldout"]').val(title2)},1000)})}},50)});</script> <script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>

КОПИРОВАТЬ КОД

Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта

1. Создаем блок магазина (ST300, ST305N, ST310N, ST315N или ST320N). Товары загружаем в каталог тильда, а в блоках через контент нужно обязательно включить кнопку "Добавить в корзину";

2. Создаем popup блок, например BF502N. В контенте блока задаем блоку ссылку #ti-preorder

3. Создаем в popup скрытое поле с переменной soldout

4. Присваиваем блоку popup класс uc-tiout
Чтобы добавить класс блоку, заходим в настройки блока и сверху от id блока будет кнопка "Добавить CSS Class Name"

5. При необходимости настраиваем дополнительные параметры:
Ссылка для popup - можно указать свою ссылку для popup;
Класс блока popup - можно указать сой класс для popup. Важно! Название должно начинаться с uc-ваш класс;
Переменная в форме popup - указываем название переменной. Это название будет отображаться заявках которые будут приходить;
Текст кнопки - указываем текст для кнопки "нет в наличии";
Цвет текста - указываем такой же цвет текста кнопки который указан в настройках блока магазина;
Цвет фона кнопки - указываем такой же цвет фона кнопки, который указан в настройках блока магазина;
Радиус скругления углов кнопки - указываем такой же радиус углов кнопки который указывали в настройках блока магазина.

6. Копируем первый код и вставляем на страницу под блок магазина и popup, в HTML блок Т123.

7. Копируем второй код и вставляем на пустую страницу в блок Т123. На эту же страницу дублируем popup блок со страницы с магазином. Пустую страницу назначаем шапкой для товаров. Для этого заходим в "товары" > "настройки" > "шапка для товаров". Галочку "открывать товары как страницу" можно не отмечать если не нужно чтобы товары открывались отдельной страницей. Код будет работать в любом случае.