Одновременно разбивка по страницам(пагинация) и ajax подгрузка по кнопке "Загрузить еще" в PDO PAGE.

Добрый день! Подскажите пожалуйста возможно ли сделать одновременно пагинацию с разбивкой по страницам и кнопку для ajax загрузки ресурсов при помощи PDO PAGE из коробки?
Алексей
Алексей
03 февраля 2023, 10:08
modx.pro
5
646
+2

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

Артур Шевченко
Артур Шевченко
03 февраля 2023, 11:04
3
+3
Прям из коробки нельзя, надо немного поправить JS. Вот это
if (config.history) {
                if (typeof(jQuery().sticky) == 'undefined') {
                    $.getScript(config['assetsUrl'] + 'js/lib/jquery.sticky.min.js', function () {
                        pdoPage.initialize(config);
                    });
                    return;
                }
                pdoPage.stickyPagination(config);
            }
            else {
                $(config.pagination).hide();
            }
Заменить на это
$(document).on('click', config['link'], function (e) {
                e.preventDefault();
                var href = $(this).prop('href');
                var key = config['pageVarKey'];
                var match = href.match(new RegExp(key + '=(\\d+)'));
                var page = !match ? 1 : match[1];

                if (pdoPage.keys[key] != page) {
                    $(config['more']).find('button').attr('disabled', false);
                    if (config.history) {
                        if (page == 1) {
                            pdoPage.Hash.remove(key);
                        } else {
                            pdoPage.Hash.add(key, page);
                        }
                    }
                    $this.loadPage(href, config);
                }
            });

            if (config.history) {
                if (typeof(jQuery().sticky) == 'undefined') {
                    $.getScript(config['assetsUrl'] + 'js/lib/jquery.sticky.min.js', function () {
                        pdoPage.initialize(config);
                    });
                    return;
                }
                pdoPage.stickyPagination(config);

                $(window).on('popstate', function (e) {
                    if (e.originalEvent.state && e.originalEvent.state['pdoPage']) {
                        $this.loadPage(e.originalEvent.state['pdoPage'], config);
                    }
                });

                history.replaceState({pdoPage: window.location.href}, '');
            }
И в pdoPage параметру ajaxMode установить значение button.
    Алексей
    Алексей
    03 февраля 2023, 12:17
    0
    Я правильно понял, что надо поменять этот код в файле assets/components/pdotools/js/pdopage.js? Поменял, но ничего не произошло, пагинации присваивается класс display:none; не могу понять где. Но даже если присвоить через css display: block !important; то работает не корректно, если пользуешься кнопкой, а потом пагинацией, то перебрасывает по такой ссылке site.ru/?page=1&pageId=17&hash=caba36b7635ec52390b81ac85612a759468b600c на несуществующую страницу.
      Алексей
      Алексей
      03 февраля 2023, 12:52
      0
      Выставил параметр ajaxHistory=1, сейчас пагинации не присваивается класс display: none, то есть отображается и кнопка и постраничная разбивка, но попрежнему работает не корректно
        Алексей
        Алексей
        03 февраля 2023, 12:53
        0 
        <div id="pdopage" class="items-product">
								<div class="row rows row-flex">
									{'!pdoPage' | snippet : [
										'element'=>'msProducts',
										'parents'=>$modx->resource->id,
										'depth'=>10,
										'tpl' =>'product.tpl',
										'limit' =>4,
										'maxLimit'=>200,
										'pageLimit'=>10,
										'ajax'=>1,
										'ajaxHistory'=>1,
										'ajaxMode'=>'button',
										'tplPage' =>'@INLINE <a href="{$href}" class="but">{$pageNo}</a>',
										'tplPageActive'=>'@INLINE <a href="{$href}" class="but active">{$pageNo}</a>',
										'tplPageWrapper'=>'@INLINE <div class="pagination">{$pages}</div>',
										'tplPagePrev' =>'@INLINE <li class="control"><a href="{$href}"><</a></li>',
										'tplPageNext'=>'@INLINE <li class="control"><a href="{$href}">></a></li>',
										'tplPageSkip'=>'@INLINE <span>...</span',
										'tplPagePrevEmpty'=>'@INLINE <li class="disabled"><span><<</span></li>',
										'tplPageNextEmpty'=>'@INLINE <li class="disabled"><span>>></span></li>',
										'sortby'=>'{"menuindex":"DESC"}',
										'where'=>'{"template":"6"}'
									]}
								</div>
								<div class="pages">
									[[!+page.nav]]
								</div>
							</div>
          Алексей
          Алексей
          03 февраля 2023, 13:44
          0
          Добавил в вызов 'frontend_js'=>'[[+assetsUrl]]js/pdopage.js', все заработало. Единственное если кнопкой подгружаешь до последней страницы, то кнопка пропадает, а при возврате при помощи пагинации не появляется.
            Артур Шевченко
            Артур Шевченко
            03 февраля 2023, 16:30
            0
            Да, там ещё кое-что надо изменить. После
            $.post(config['connectorUrl'], params, function (response) {
            вставить
            if(response.page != response.pages){
            $(config['more']).find('button').attr('disabled', false);
        }else{
            $(config['more']).find('button').attr('disabled', true);
        }
            И закомментировать или удалить
            if (config['mode'] == 'button') {
                    if (response['pages'] == response['page']) {
                        $(config['more']).hide();
                    }
                    else {
                        $(config['more']).show();
                    }
                }
              Алексей
              Алексей
              03 февраля 2023, 17:13
              0
              Спасибо большое за помощь, все работает.
            Vladimir
            Vladimir
            03 августа 2023, 11:59
            0
            Повторил всё за вами, но кнопка не появилась, пагинация появилась но при клике перезагружает страницу.
            &ajaxMode=`button`
&ajaxHistory=`1`
&frontend_js=`/assets/pdopage.js`
            Правда запускается через mFilter2
            Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
            9