• MODX

Как загрузить ресурс в модальное окно на 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')»:
success: function(content){
  $("#staticBackdrop").html(content);
  $("#staticBackdrop").modal('show');
}
2. Может быть вы в параметре вывода дополнительного поля (TV) не указали разделитель:
||
3. Вы поместили лишний вызов «getCont(this);» в tplWrapper. Поэтому у вас и вызывается 2 раза.
Уберите его:
'tplWrapper'=> '@INLINE <span>[[+prev]][[+next]]</span>'
4. Этот вариант вы создали из готовых сниппетов. Конечно, можно написать производительней, если этот функционал реализовать самостоятельно, но это потребует больше времени. В этом случае его можно написать конкретно под этот проект и возможно без применения различных сниппетов. Тем более в нём можно будет реализовать чтобы он выдавал данные в формате JSON, а далее в JavaScript их парсить и выводить на страницу.
Александр
Александр
Здравствуйте! В результате проблема с необоснованным и в внезапным закрытием модального окна решена.
Вы правы я не указал разделитель в параметрах вывода тв, поэтому не мог разделить значения запятой. TplWrapper убрал, теперь вызывается один раз. По поводу альтернативного решения, тоже всё предельно понятно, Александр, огромное Вам спасибо.
Александр
Александр
Александр, здравствуйте! Не получается не как разобраться, подскажите пожалуйста, как можно добавить в сниппет getContent в место «tv» поля компонента extendresource?
Александр Мальцев
Александр Мальцев
Привет!
Как обычно:
$modx->addPackage('extendresource', $modx->getOption('core_path').'components/extendresource/model/');

$extendResource = $modx->getObject('extendResource',array(
  'resource' => $id,
));
if (is_object($extendResource)) {
  $poletest = $extendResource->get('poletest');
  $poletest2 = $extendResource->get('poletest2');
}