Как использовать две разных пагинации в mFilter2

Александр, добрый вечер, как можно использовать одновременно, две пагинации в mFilter2, к примеру одна обычная а другая ajax, подгрузить ещё, если возможно, опишите пожалуйста, как это можно реализовать и можно ли вообще?

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

Евгений
Евгений
Вроде бы все работает, но вот контент и опции фильтров остаются доступными, и в результате пока ждешь загрузку, ты не понимаешь что происходит, и можно ткнуть в любое поле фильтра, что доп. фильтрацию.
Александр Мальцев
Александр Мальцев
Ну сделайте этот процесс более информативным. Покажите на это время какой-нибудь анимированный значок или придумайте что-то другое. Область с фильтрами, например можно сделать недоступной на время выполнения этого процесса, чтобы пользователь ничего лишнего не нажал.
Александр Мальцев
Александр Мальцев
Добрый вечер!
Пример совмещения постраничной навигации и кнопки «Загрузить ещё».
Для этого по умолчанию устанавливаете постраничную навигацию.
После этого:
1. В чанке tpl.mFilter2.outer (параметр &tplOuter) добавляете кнопку, например, с классом btn_more:
...
<div id="mse2_results">
  {$results}
</div>
<button class="btn btn-default btn_more">Загрузить еще</button>
..
2. Добавляете на страницу скрипт:
$('.btn_more').click(function() {
  var href= $('.mse2_pagination .page-item.active').next('.page-item').find('.page-link').attr('href');
  $.get(href, function(data) {
    var 
       mse2_results = $('#mse2_results', data),
       mse2_pagination = $('.mse2_pagination', data);
    $('#mse2_results').append(mse2_results);
    $('.mse2_pagination').html(mse2_pagination);
  });
});
Александр
Александр
Здравствуйте! Александр, спасибо Вам, за отличное решение, правда не могу понять правильно ли у меня, всё работает. Чанк tpl.mFilter2.outer вынесен в обычный шаблон и этот параметр &tplOuter, я не использую а просто разместил скрипт в шаблоне и кнопку.

Происходит следующее, если нажимаю подгрузить, подгружает, но когда грузить уже нечего, при нажатии на кнопку подгрузить, пропадает стандартная постраничная пагинация default, при следующем нажатии на кнопку повторно начинают грузятся ресурсы и так происходит до бесконечности, можно нажимать и они будут подгружаться, долго капался и предполагаю что в данном случае так и должно быть, так как класс disabled к кнопке не применяется, поэтому будет постоянная подгрузка при нажатии, правильно я понимаю?

Александр
Александр
Поспешил и забыл написать в предыдущем комментарии о такой проблеме, если использую две стандартных пагинации и подгрузку, при нажатии подгрузить к двум стандартным пагинациям добавляется еще две, как этого можно избежать?

В шаблоне так:
<div class="mse2_pagination">
 [[!+page.nav]]
</div>

<div id="mse2_results">
 [[+my.results]]
</div>
<button class="btn btn-default btn_more">Загрузить еще</button>

<div class="mse2_pagination">
 [[!+page.nav]]
</div>
Александр Мальцев
Александр Мальцев
Это пример.
Там уже в зависимости от того, как у вас всё это организовано.
Например, если у вас несколько пагинаций, то используйте ключевое слово this и определяйте элементы относительно уже этой кнопки:
$('.btn_more').click(function () {
  var href = $(this).next('.mse2_pagination').find('.page-item.active').next('.page-item').find('.page-link').attr('href');
  $.get(href, function (data) {
    var
      mse2_results = $('#mse2_results', data),
      mse2_pagination = $('.mse2_pagination', data);
    $(this).prev('#mse2_results').append(mse2_results);
    $(this).next('.mse2_pagination').html(mse2_pagination);
  });
});
Александр Мальцев
Александр Мальцев
Это можно дописать в файле "\assets\components\msearch2\js\web\default.js". Если результатов нет, то добавить к кнопке класс disabled.
Александр
Александр
Спасибо!
Александр
Александр
Александр, доброго вечера! Скажите пожалуйста, как можно вывести в кнопке, количество ресурсов, которое будет подгружено?
Александр Мальцев
Александр Мальцев
Здравствуйте! Это можно выполнить с помощью JavaScript. Общее количество результатов мы можем получить из контента элемента "#mse2_total", текущую страницу из постраничной навигации, а количество результатов по умолчанию отображаемых на странице задать вручную. Потом это вычислить и добавить полученный результат к кнопке «Загрузить ещё».
$(function(){
  function getCountPagesForLoad() {
    var 
      total = parseInt($('#mse2_total').text()),
      pageNo = parseInt($('.mse2_pagination .page-item.active > .page-link').text()),
      resultOnPage = 10,
      output = '';
    if ((pageNo) * resultOnPage < total && (pageNo + 1) * resultOnPage >= total) {
      output = total - pageNo * resultOnPage;    
    } else if ((pageNo + 1) * resultOnPage < total) {
      output = resultOnPage;
    }
    return output;
  } 
  $('.btn_more').text('Загрузить ещё ' + getCountPagesForLoad()); 
  $(document).on('mse2_load', function() {
    $('.btn_more').text('Загрузить ещё ' + getCountPagesForLoad()); 
  });
});
Александр
Александр
Здравствуйте! Спасибо Вам, у меня правда, почему-то выводит только (Загрузить ещё), более не чего, не могу понять пока, почему не работает, в
output = '';
не чего прописывать не нужно, правильно я понимаю?
Александр Мальцев
Александр Мальцев
Здравствуйте!
Это значение по умолчанию, т.е. когда уже нечего подгружать.
Если не выводится, то нужно посмотреть, как организована разметка, т.к. она у вас в проекте может отличаться от дефолтной.
В этом случае необходимо добавить в код 2 строчки и посмотреть какие значения выводятся в консоль:
$(function(){
  function getCountPagesForLoad() {
    var 
      total = parseInt($('#mse2_total').text()),
      pageNo = parseInt($('.mse2_pagination .page-item.active > .page-link').text()),
      resultOnPage = 10, // количество элементов на странице по умолчанию
      output = '';
    console.log('total = ' + total); // всего результатов
    console.log('pageNo = ' + pageNo); // текущая страница
    if ((pageNo) * resultOnPage < total && (pageNo + 1) * resultOnPage >= total) {
      output = total - pageNo * resultOnPage;    
    } else if ((pageNo + 1) * resultOnPage < total) {
      output = resultOnPage;
    }
    return output;
  } 
  $('.btn_more').text('Загрузить ещё ' + getCountPagesForLoad()); 
  $(document).on('mse2_load', function() {
    $('.btn_more').text('Загрузить ещё ' + getCountPagesForLoad()); 
  });
});
Александр
Александр
Добрый вечер! У меня с чанка tpl.mFilter2.outer всё вынесено в шаблон, в вызове фильтра: &toSeparatePlaceholders=`my.` возможно в этом проблема? В консоле выдаёт это:
Александр Мальцев
Александр Мальцев
Теперь нужно проверить правильные ли эти цифры? total совпадает с количеством результатов? pageNo показывает номер текущей страницы?
Также проверить какое количество результатов выводится на странице по умолчанию? Если не 10, то поменять значение этой переменной на нужное:
resultOnPage = 10, // количество результатов на странице по умолчанию
Если total и pageNo не совпадают с действительностью, то посмотреть в каких элементах содержатся эти значения и с помощью каких селекторов их можно получить.
Александр
Александр
Здравствуйте! total да совпадает а этот параметр pageNo не совпадает, показывает 11 а id текущей страницы 2 и ещё когда результатов меньше чем указано по умолчанию, получаю pageNo = NaN
Александр Мальцев
Александр Мальцев
В этом случае нужно посмотреть, как организована пагинация и изменить эту строчку так чтобы она выбирала номер правильно:
pageNo = parseInt($('.mse2_pagination .page-item.active > .page-link').text())
Ну или как другой вариант номер страницы можно получить из URL страницы.
Alexandr
Alexandr
Здравствуйте. Столкнулся с такой же проблемой организовать две пагинации на странице.
Сделал так как вы написали выше, кнопка отображается но при нажатии подгружаются те же товары что и выводятся, при этом в адресной строке адрес не меняется когда переходишь на вторую страницу. Т.е. получается что как такового перехода на вторую страницу нет.

Не подскажете как реализовать что бы подгружались следующие товары?