Проблема (купить в 1 клик, модальное окно). pdoPage, Ajax [РЕШЕНО]

Добрый день!
Есть сайт, на нем стандартный вывод товаров через pdoPage (ajax) кнопкой «показать еще». В карточке товара есть кнопка «Купить в один клик»:

<a class="fancyboxModal element__application-button" style="font-weight: 700;" href="#productapplication" data-theme="{$pagetitle | striptags  | replace :' "':' «' | replace :'"':'»'}" data-id="{$id}">Купить в 1 клик</a>

и немного js:

$('#pdopage').on('click','a[href="#productapplication"]',function(e){
  e.preventDefault();
  var productapplicationtheme, productapplicationid;
  productapplicationtheme = $(this).data('theme');
  productapplicationid = $(this).data('id')
  $('#productapplicationinput').val(productapplicationtheme);
});

Но, работает модальное окно только на первой странице, если нажать кнопку «показать еще», товары показываются, но кнопка «Купить в один клик» уже не работает. Я думаю это связано с DOM деревом, но не пойму как решить.
Может кто-то уже сталкивался с подобным? Подскажите. Спасибо!

Алексей

06 октября 2021, 09:47

551

Комментарии: 6

Павел Романов

06 октября 2021, 11:26

Попробуйте переинициализировать fancybox по callback от pdoPage:

<script>
if(typeof pdoPage !== 'undefined') {
    pdoPage.callbacks.after = function(config, response) {
        $('.fancyboxModal ').fancybox({
	    // .....
        });
    };
}
</script>

Алексей

06 октября 2021, 12:07

Павел, добрый день!
Спасибо за ответ, но я не совсем понял что надо сделать? :(

Павел Романов

06 октября 2021, 12:36

Добавить этот код на страницу, прописав вместо //… опции fancybox, которые у Вас используются для при клике на ссылку с классом fancyboxModal.

Алексей

06 октября 2021, 12:48

Спасибо, я понял. Все поставил. Работает, но страница как-будто постоянно загружается
Вот изначально:

А вот когда нажимаешь «показать еще»:

Но модальное окно работает

Павел Романов

06 октября 2021, 12:53

А если так?:

<script>
if(typeof pdoPage !== 'undefined') {
    pdoPage.callbacks.after = function(config, response) {
        $('.fancyboxModal ').fancybox({
	    // .....
        });
        
        $('#pdopage').removeClass('loading');
        $('#pdopage').css('opacity', 1);
    };
}

Алексей

06 октября 2021, 12:56