Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как открыть из карточки товара форму с калькулятором, а затем передать в корзину в Tilda

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

1
Создали товар в каталоге. В тексте товара вставили словосочетание "Рассчитать пошив" и задали ему ссылку #popup:calcform
2
Добавили в footer страницы/каталога:
- Форму BF502N и создали в ней поля
- Поле для ввода в одну строку с именем prodpr
- Поле количество с именем shirina
- Поле количество именем visota
- Поле калькулятор с именем pricecompete
и формулой shirina*0,01*(190+prodpr)
3
Добавили в footer страницы/каталога:
- Блок ST200 c двумя опциями
ширина и высота
- Блок Т123 и вставили в него приведённый ниже код.

В коде изменили ID блока BF502N на свой var popupID = "#rec223570541";
4
Некоторые элементы сделаны на базе этих статей
https://mo-ti.ru/prodpopupbtn
https://mo-ti.ru/infpopup
https://mo-ti.ru/formtocart2
Библиотека для примера

<style>
.popprice {
    font-size: 18px;
    margin-top: 15px;
    color: #000000;
    font-weight: 600;
}
input[name="prodpr"] { pointer-events: none; display: none;}
.actpopuppr .t-input-group_qn {
    width: 50%;
    float: left;
    text-align: center;
}
.actpopuppr .t-input-group_fr{
    clear: both;
    text-align: center;
}
  div[data-record-type="744"]{ display:none;}
    .t706__product-imgdiv {
    background-repeat: no-repeat;
    background-size: contain !important;
    background-color: #ffffff !important;
}
  .js-product .t-store__prod-popup__btn-wrapper{ display: none; }
</style>

<script type="text/javascript"> 
$( document ).ready(function() {
  $(".t778__btn-wrapper a").attr("href", "#popup:calcform");
  var popupID = "#rec223570541";
  $(popupID).addClass('actpopuppr');
  $(popupID+" .t702__text-wrapper").append('<div class="t-name popprice"></div>');
  
//Вызов формы  
  $(document).on('click','a[href="#popup:calcform"]',function(e){
    $(this).closest(".js-product").addClass("selectproduct");
    $(popupID+" .t702__title").text($(".selectproduct .js-product-name").text());
    $(popupID+" .t702__descr").html($(".selectproduct .js-product-sku").text());
    $('.popprice').text($(".selectproduct .js-product-price").text()+' руб/м.п.');
    $(popupID+' .t702__img').attr('src', $('.selectproduct .js-product-img:first').attr('data-original'));
    $(popupID+' input[name="prodpr"]').val($(".selectproduct .js-product-price").text());
    setTimeout(function(){ 
    tcalc__init(popupID.substring(4),  $(popupID+' .t-input-group_fr').attr('data-input-lid'));
    }, 100); 
    $(".js-product").removeClass("selectproduct");
  });
  
var notLazyblock = '.t744 .t-slds__bgimg';
for(let i = 0; i < $(notLazyblock).length; i++){
$(notLazyblock).addClass('loaded plus');
$(notLazyblock+':eq('+i+')').css('background-image', 'url("'+$(notLazyblock+':eq('+i+')').data("original")+'")' );
};        
  
//Отправка в корзину
   $('.actpopuppr .t-submit').click(function() {
     $('.t744 .t-slds__bgimg').css('background-image', 'url('+$(popupID+' .t702__img').attr('src')+')');
     //Цена товара + параметры
     $('.t744__price-value').html( $('.actpopuppr input[name="pricecompete"]').val());
     $('.t744 select:eq(0) option:selected').val($('.actpopuppr input[name="shirina"]').val());
     $('.t744 select:eq(1) option:selected').val($('.actpopuppr input[name="visota"]').val());
     //Название + артикул
     $('.t744__title').html( $('.actpopuppr .t702__title').text());
     $('.t744 .js-product-sku').html( $('.actpopuppr .t702__descr').text());

  setTimeout(function() {  $(".t744__btn")[0].click(); }, 100);
  return false;
   });
 
 $(document).on("keydown", ".t-form", function(event) {return event.key != "Enter";});
});
</script>
Шторы Gemstone
SKU: 700.954.29
100
р.
Ширина шторы(см)
Высота шторы(см)
Made on
Tilda