Сделать постраничную навигацию на 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+] ‘;