6 мар 2024 в 23:46

Как показать свою кнопку со всплывающим окном в товарах Tilda, когда товара нет в наличии

Средний

Ожидает приглашения

Когда товара в каталоге товаров Тильды нет в наличии, внутри карточки товара автоматически пропадает кнопка добавления в корзину.

Это логично, но что если мы не хотим терять клиента? Дадим ему возможность оставить заявку, добавив собственную кнопку во все карточки товаров, которых нет в наличии на место вот этой серой кнопки.

Что делать и код для добавления кнопки и формы в карточку товара Тильды «не в наличии»

Добавляем на страницу всплывающее окно, которое мы хотим видеть по клику на кнопку и настраиваем его. Можно добавить любое подходящее вам из библиотеки блоков Тильды, вбив в поиск слово popup. В настройках поп-апа в поле со ссылкой, по которой он вызывается, вписываем #popup:productout Где находятся все popup блоки Тильды.
Добавляем на страницу блок T123 и вставляем в него код, который размещён ниже. Текст в коде ’Cообщить о поступлении’ вы можете заменить на свой собственный. Именно он будет отображаться на нашей кнопке.

<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+'');
                 $('.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;

}
.t702__leftcol {
    display: none;
}
.t702__leftcol_wrapper{
    display: none;
}
.t702__leftcol-img {
    display: none;
}
.t702__leftcol-txt span {
    display: none;
}


.t702__leftcol_wrapper {
    display: none;
}

.t702__leftcol {
    display: none;
}
.t702__leftcol-img {
    display: none;
}
}

.t702__leftcol_wrapper {
   display: none;
}
.t702__leftcol-img {
    display: none;
}
.t702__leftcol_wrapper {
    display: none;
}
}

</style>

<style>
  @media screen and (min-width: 1080px) {
    .t-store__prod-popup__btn.t-store__prod-popup__btn_disabled.t-btn.t-btn_sm {
      margin-left: 0px !important;
      width: 310px !important;
    }
  }
</style>

<style>
  @media screen and (max-width: 640px) {
    .t-store__prod-popup__btn.t-store__prod-popup__btn_disabled.t-btn.t-btn_sm {
      margin-left: 0px !important;
      width: 340px !important;
    }
  }

   @media screen and (min-width: 640px) {
       .t-store__prod-snippet__container {padding-top: 50px !important;}
   }
</style>

Не забывайте, что работа кода будет видна только на опубликованной странице.

Теги:

Хабы:

Веб-разработка