Сделать постраничную навигацию на AJAX для сниппета Ditto в CMS / CMF MODX Evolution оказывается можно очень просто.
К примеру, если ваш вызов Ditto с параметрами выглядит наподобие этого:
<div id="ajax-container">
<div id="articles">
[[Ditto?
&paginateAlwaysShowLinks=`1`
&tpl=`subpost`
&dateSource=`editedon`
&dateFormat=`%d.%m.%Y`
&paginate=`1`
&display=`4`
&parents=`3`
&hideFolders=`1`]]
[+previous+] [+pages+] [+next+]
</div><!--/#ajax-container-->
</div><!--/#articles-->
То скрипт на JavaScript будет вот таким:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
$('a.ditto_page,a.ditto_next_link,a.ditto_previous_link').live('click', function() {
var url = $(this).attr('href');
$('#ajax-container').load(url + ' #articles');
return false;
});
});
</script>
Ниже оставлю вам несколько пояснений к используемым селекторам JQuery:
- a.dittopage — ссылки-номера страниц;
- a.ditto_next_link — ссылка на следующую по списку страницу;
- a.ditto_previous_link — ссылка на предыдущую по списку страницу.
В настройках ресурсов, где будет такой динамичный контент не забывайте убирать флажки «кэшируемый».
Суть здесь в том, что я на JS переопределяю обработку клика посетителя по ссылке пагинации, заменяя переходы на новые page подгрузкой контента с помощью метода load().
У меня вся страница пихается в #ajax-container
Добрый день!
Да пагинация в таком ключе действительно работает. Но у меня вопрос как сделать такую же пагинацию если я вызываю дитто через API?
Вот вызов:
$pop_tovary = $modx->runSnippet(‘Ditto’,
array(
‘parents’ => $id_cat,
‘tpl’ => ‘tovary-tpl’,
‘orderBy’ => ‘pagetitle ASC’,
‘hideFolders’ => ’1′,
‘display’ => $disp,
‘paginate’ => ’1′,
‘paginateAlwaysShowLinks’ => ’1′,
‘depth’ => ’2′,
‘filter’ => $date_filter
)
);
$pop_tovary = str_replace(‘[!', '[[', $pop_tovary);
$pop_tovary = str_replace('!]‘, ‘]]’, $pop_tovary);
$pop_tovary = $modx->parseDocumentSource($pop_tovary);
$pop_tovary = $modx->evalSnippets($pop_tovary);
echo $pop_tovary . ‘ [+previous+] [+pages+] [+next+] ‘;