Как загрузить ресурс в модальное окно на CMS MODX?
Добрый день! Пытаюсь сделать загрузку ресурса в модальном окне (быстрый просмотр). Всё работает как нужно, но есть некоторые проблемы, которые не получается решить. Опишу всё подробно.
Создаю ресурс, название 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) Вообще на сколько этот вариант для реализации быстрого просмотра, правильный с точки зрения производительности и т.д. Возможно как-то проще и лучше можно сделать?
Ответы: 4
Здравствуйте!
1) Попробуйте дополнительно добавить$("#staticBackdrop").modal('show')
: 2) Может быть вы в параметре вывода дополнительного поля (TV) не указали разделитель:||
.3) Вы поместили лишний вызов
Уберите его: 4) Этот вариант вы создали из готовых сниппетов. Конечно, можно написать производительней, если этот функционал реализовать самостоятельно, но это потребует больше времени. В этом случае его можно написать конкретно под этот проект и возможно без применения различных сниппетов. Тем более в нём можно будет реализовать, чтобы он выдавал данные в формате JSON, а далее в JavaScript их парсить и выводить на страницу.getCont(this);
вtplWrapper
. Поэтому у вас и вызывается 2 раза.Здравствуйте! В результате проблема с необоснованным и в внезапным закрытием модального окна решена.
Вы правы я не указал разделитель в параметрах выводаtv
. Поэтому не мог разделить значения запятой.tplWrapper
убрал, теперь вызывается один раз. По поводу альтернативного решения, тоже всё предельно понятно.Александр, огромное Вам спасибо.
Александр, здравствуйте! Не получается никак разобраться.
Подскажите пожалуйста, как можно добавить в сниппетgetContent
в местоtv1
поля компонента extendresource?Привет!
Как обычно: