Добрый день! Пытаюсь сделать загрузку ресурса в модальном окне (быстрый просмотр). Всё работает как нужно, но есть некоторые проблемы, которые не получается решить. Опишу всё подробно.
Создаю ресурс, название getcontent
. В содержимом ресурса, вызов сниппета:
[[!getContent]]
Сниппет getContent
имеет следующее содержимое:
<?php
if (empty($_REQUEST['id'])) return '';
$id = $_REQUEST['id'];
$res = $modx->getObject('modResource', $id);
$out = $modx->getChunk('modal_content', array(
'image' => $res->getTVValue('image'),
'mytv' => $res->getTVValue('mytv'),
'content' => $res->get('content'),
'crumbs' => $modx->runSnippet('pdoCrumbs', array('to' => $id, 'showHome' => 1, 'outputSeparator' => '/')),
'prevnext' => $modx->runSnippet('pdoNeighbors', array( 'id' => $id,
'tplNext'=> '@INLINE <li class="next link-next" onclick="getCont(this);" data-id="[[+id]]"><button>[[+menutitle]] →</button><i class="fas fa-angle-right fa-lg"></i></li>',
'tplPrev'=> '@INLINE <li class="previous link-prev" onclick="getCont(this);" data-id="[[+id]]"><i class="fas fa-angle-left fa-lg"></i> <button>← [[+menutitle]]</button></li>',
'tplWrapper'=> '@INLINE <span onclick="getCont(this);" data-id="[[+id]]">[[+prev]][[+next]]</span>',
'showLog'=> '0',
'sortdir'=> 'asc',
'parents'=> '2'
))
));
return $out;
Чанк modal_content
:
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-pdoCrumbs">[[+crumbs]]</div>
<div class="modal-prevnext">[[+prevnext]]</div>
</div><!-- Modal Header -->
<!-- Modal body -->
<div class="modal-body">
<div class="modal-img"><img src="[[+image]]" alt="" /></div>
<div class="modal-introtext">[[+introtext]]</div>
<div class="modal-contents">[[+content]]</div>
[[+mytv]]
</div><!-- Modal body -->
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div><!-- Modal footer -->
</div>
</div>
В шаблоне:
<div id="staticBackdrop" data-easein="bounceUpIn" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"></div>
<script>
function getCont(i) {
var id = $(i).attr("data-id");
$.ajax({
type: "POST",
url: "/getcontent.html",
data: "id=" + id,
success: function (content) {
$("#staticBackdrop").html(content);
}
});
}
</script>
Ссылка для вызова модального окна в чанке результатов pdoTools
или mFilter2
:
<a href="#staticBackdrop" class="read-more" onclick="getCont(this);" data-id="[[+id]]" data-toggle="modal">Быстрый просмотр</a>
В итоге:
- получаем AJAX загрузку всех полей, которые указаны в сниппете;
- работу pdoNeighbors, переход к следующему и предыдущему ресурсу;
- хлебные крошки pdoCrumbs.
Список проблем:
1) Иногда происходит так, что при переходе к следующему или предыдущему ресурсу, модальное окно закрывается. Остаётся тёмный фон. Происходит это не всегда, с чем это может быть связано?2) Как в данном случае можно разделить значения поля mytv
запятой? В чанке пытался обычным способом это сделать:
[[+mytv:replace=`||==, `]]
Но так не работает.
3) Не понятен такой момент, при нажатии на следующую, происходит два запроса. Нормально ли это?4) Вообще на сколько этот вариант для реализации быстрого просмотра, правильный с точки зрения производительности и т.д. Возможно как-то проще и лучше можно сделать?
1. Попробуйте дополнительно добавить «$("#staticBackdrop").modal('show')»:
2. Может быть вы в параметре вывода дополнительного поля (TV) не указали разделитель:
3. Вы поместили лишний вызов «getCont(this);» в tplWrapper. Поэтому у вас и вызывается 2 раза.
Уберите его:
4. Этот вариант вы создали из готовых сниппетов. Конечно, можно написать производительней, если этот функционал реализовать самостоятельно, но это потребует больше времени. В этом случае его можно написать конкретно под этот проект и возможно без применения различных сниппетов. Тем более в нём можно будет реализовать чтобы он выдавал данные в формате JSON, а далее в JavaScript их парсить и выводить на страницу.
Вы правы я не указал разделитель в параметрах вывода тв, поэтому не мог разделить значения запятой. TplWrapper убрал, теперь вызывается один раз. По поводу альтернативного решения, тоже всё предельно понятно, Александр, огромное Вам спасибо.
Как обычно: