MODX Evolution + AJAX: решение примеров универсальным методом

В данной статье продолжим разбирать предыдущий метод внедрения AJAX в сайт на базе MODX, а также примеры его использования для решения других распространенных задач

MODX Evolution + AJAX: решение примеров универсальным методом

Немного теории

Ресур в MODX - абстракция, т.е. создаваемый документ может быть как страницей html, так и файлом в текстовом формает, xml страницей, таблицей стилей, скриптом, каталогом, документом MS Word или Excel, да и вообще любыми другими данными, которые могу храниться на сервере.

Вывод: вы можете генерировать содержимое источника опираясь на шаблоны и вызовы сниппетов в каком угодно, удобном вам, формате (html, json, xml, raw).

 

Решение примеров

В зависимости от поставленной задачи готовится шаблон определенного типа.

 

Задача 1. Необходимо организовать одностраничный сайт с возможностью размещать новости и вызывать их в определенный блок на странице по клику на дайджест.

 

Шаг 1. Создаем блоговый раздел для размещения в него статей, так как это одностраничный сайт, то в качестве этого раздела может выступать и главная страница.

Шаг 2. Создаем шаблон для вывода статьи (называем например Article-RAW), внутри которого помещаем код, полной статьи:

<article itemscope itemtype="http://schema.org/Article">
<h1 itemprop="name">[*longtitle:ifempty=[*pagetitle*]*]</h1>
<meta itemprop="inLanguage" content="ru" />
<span class="date">[[aDate? &date=`[*createdon*]` &date2=`[*pub_date*]`]]</span>
<span itemprop="articleBody">[*content*]</span>
</article>

Шаг 3. Создаем чанк с шаблоном для вывода элемента списка статей blog-out-tpl, при клике по которому будет происходить загруза в заданный далее блок:

<article class="blog-out-item" data-docurl="[(site_url)][~[+id+]~]">
[[if? &is=`:!empty` &then=`<img src="" alt="" width="120" />`]]
<span class="date">[+date+]</span>
<h2>[+pagetitle+]</h2>
</article>

Обратите внимание на параметр data-docurl, в нем будет генерироваться ссылка на страницу со статьей.

Шаг 4. Создаем чанк со структурой блока статей:

<section id="news">
<span class="heading">События</span>
<div id="mw-sh-last"></div>
[!Ditto?
&id=`news`
&parents=`[*id*]`
&display=`all`
&paginate=`0`
&filter=`isfolder,1,2`
&outerTpl=`@CODE:<div class="article-list">[+ditto+]</div>`
&tpl=`blog-out-tpl`
&dateSource=`pub_date`
&orderBy=`pub_date DESC`
&dateFormat=`%d.%m.%Y` !]
</section>

Шаг 5. Размещаем следующий JS-код:

<script type="text/javascript">
$(function () {
$(document).ready(function() {
$(".blog-out-item:first").trigger( "click" );
});
$(".blog-out-item").bind("click", function() {
$(".blog-out-item").removeClass("active");
$(this).addClass("active");
var doc = $(this).attr("data-docurl");
$.ajax({
beforeSend: function() {
$("#mw-sh-last").addClass("loading");
},
url: doc,
dataType: "html",
data: {},
success: function(data) {
$("#mw-sh-last").removeClass("loading");
data = $.parseHTML(data);
$("#mw-sh-last").html(data);
}
});
});
});
</script>

Шаг 6. Наполняем сайт несколькими статьями и закрываем от иденксации раздел, например Disallow: /blog/*

Строка $(".blog-out-item:first").trigger( "click" ); имитирует клик по первой новости, так как изначально место вывода не содержит никакой информации.

 

Задача 2. Необходимо вызвать превью товара по заданному шаблону в сплывающем окне.

 

Задача решается совершенно аналогично предыдущей, за исключением нескольких шагов. Нам помогут сниппеты DocInfo и status. Первый доступен в базовой поставке, а код второго ниже:

<?php
$type = (isset($type)) ? $type : "checked";
$prefix = (isset($prefix)) ? $prefix : null;
$postfix = (isset($postfix)) ? $postfix : null;

if ($_REQUEST[$param]) {
switch (true) {
case $type == "selected" && $_REQUEST[$param]==$value:
$output = "selected=\"selected\"";
break;
case $type == "checked" && $_REQUEST[$param]==$value:
$output = "checked=\"checked\"";
break;
case $type == "value":
$output = $_REQUEST[$param];
break;
}
}
if ($prefix) {
$output = $prefix.$output;
}
if ($postfix) {
$output = $output.$postfix;
}

return $output;
?>

Суть сниппета в выводе передоваемых на страницу значений параметров.

Шаг 1. Создаем шаблон для краткого отображения продука (называем например product-info-RAW), внутри которого размещаем приблизительно такой код:

<h1>[!DocInfo? &docid=`[!staus? &param=`doc_id`!]` &field=`pagetitle`!]</h1>
<img src="[!DocInfo? &docid=`[!staus? &param=`doc_id`!]` &field=`image`!]" />
<p>Артикул: [!DocInfo? &docid=`[!staus? &param=`doc_id`!]` &field=`articul`!]</p>
<p>Цена: [!DocInfo? &docid=`[!staus? &param=`doc_id`!]` &field=`price`!]</p>
<!-- Любая информация или парметры, которые вы хотите отобразить при быстром просмотре -->
<p>[!DocInfo? &docid=`[!staus? &param=`doc_id`!]` &field=`introtext`!]</p>

Создаем новый ресурс в дереве документов с произвольным именем и псевдонимом. Применяем к нему наш шаблон. На вкладке Настройка страницы устанавливаем параметры, как показано на изображении:

Шаг 2. В шаблон для вывода списка товаров добавляем параметр data-docid="" и триггерный элемент, при нажатии на который произойдет событие, например <span class="quickview button">Быстрый просмотр товара</span>, а также блок, в котрый будем выводить результат <div id="quickviewer"></div>, В зависимости от сайта этот блок можно разместить в модальном окне или всплывающей подсказке - на ваше усмотрение.

Шаг 3. Размещаем следующий JS-код:

<script type="text/javascript">
$(function () {
$(".product-item").bind("click", function() {
var docid = $(this).attr("data-docid");
$.ajax({
beforeSend: function() {
$("#quickviewer").addClass("loading");
},
url: [*ID_ресурса_с_выводом*],
dataType: "html",
data: {
doc_id: docid
},
success: function(data) {
$("#quickviewer").removeClass("loading");
data = $.parseHTML(data);
$("#quickviewer").html(data);
}
});
});
});
</script>

Шаг 4. Настраиваем стили в соответсвии с вашим сайтом и наслаждаемся результатом.

Задача 3. ...

Предложите в комментарии свой вариант.

×
Предложите тему или интересную задачу для следующей статьи:
×

Ждем входящих данных...