Как организовать произвольный вывод блока "Связь с менеджером"

В статье мы рассмотрим пример, как с помощью  модуля "Шаблоны данных", модуля "Фотогалереи", модуля "Обратная связь" и xslt-шаблонизатора UMI.CMS создать функциональность вывода произвольного менеджера, с его фотографией, а также функцией отправки письма. Самым нетерпеливым предлагаю сразу прокрутить до конца этот пост и кликнуть на ссылку, чтобы посмотреть пример. А уже потом читать, как это сделать :)

Формулируем задачу: в дизайне сайта есть блок с фотографией менеджера, его данными и кнопкой "отправить письмо". Менеджеры в данном блоке выводятся из списка в прозвольном порядке.

1. Создаем новый тип данных "Менеджеры"
Для реализации  данной задачи за основы был взят модуль "Фотогалерея", так как он удовлетворяет всем основными условиям. Для начала в модуле "Шаблоны данных" создадим на основе типа "Фотография" новый тип данных "Фотография менеджера".

В созданном типе данных создаем новую группу полей "Менеджеры" и вводим необходимые нам поля: "ФИО менеджера", "Фотография менеджера" (можно использовать стандартное поля типа "Фотогалерея"), "Должность менеджера", "E-mail менеджера".

2.Создаем фотогалерею менеджеров, с данными созданного типа
Создаем фотогалерею, в которой создаем фотографии, типом данных которых является созданный нами ранее тип "Фотография менеджера".

3.Делаем произвольную выборку фотографии (в нашем случае - менеджер)
В данном случае нам необходимо воспользоваться внутреним протоколом UMI.CMS usel,который как раз предназначен для данной цели. Все выборки на основе данного протокола представляются собой xml файл. Файл должен находиться в папке usels в корне сайта. Создаем в папке usels файл getManager.xml (имя файла является также именем выборки), со следущим кодом.

<?xml version="1.0" encoding="utf-8"?>
<selection mode="and">
     <target result="pages">
          <type module="photoalbum" method="photo" />
		  <category>{1}</category>
     </target>
     <sort>rand()</sort>
     <limit>1</limit>
</selection>

 Комментарии к коду:
Строка 3 указывает, что результатом выборки будет страница.
Строка 4  указывает нам, что выбирать мы будем фотографию в альбоме.
Строка 5 указызывает, что искать мы будем в указанной категории, в нашем случае мы будем передовать в данную выборку id категории первым параметром.
Строка 6 указывает, что результат выборки надо будет перемешать случайным образом.
Строка 7 указывет, что ответом выборки должен быть только один элемент.

К данной выборке из xslt-шаблона мы обращаемся следующим образом:
<xsl:apply-templates select="document('usel://getManager/102')/udata" mode="usel_manager" />
В нашем случае 102 - это id фотоальбома "Менеджеры".

Результатом работы выборки будет следующий xml файл:

<udata generation-time="0.043569">
	<page id="104" parentId="102" 
        link="/menedzhery/dfcbkq/" is-active="1" 
        object-id="27214" type-id="783" update-time="1241596312" 
        alt-name="василия" xlink:href="upage://104">
	  <basetype id="36" module="photoalbum" method="photo">Фотография</basetype>
	  <name>Василий</name>
	</page>
	<total>3</total>
</udata>

 4.Вывод менеджера с данными

XSLT код:

<xsl:template match="udata" mode="usel_manager">
	<xsl:apply-templates select="page" mode="usel_manager" />
</xsl:template>
 
<xsl:template match="page" mode="usel_manager">
<xsl:variable name="man_tree" select="document(@xlink:href)/udata" />
	<div class="manager">
	  <xsl:apply-templates 
           select="$man_tree//property[@id='9236']" mode="man_photo"/>
          
	  <xsl:apply-templates 
           select="$man_tree//property[@id='9238']" mode="man_props" /> 
          
	  <xsl:apply-templates 
           select="$man_tree//property[@id='9237']" mode="man_props" /> 
          
	  <a href="#" onClick="return AJQ('/umap.getManager/{@id}/', 'ajax');">
          задать вопрос</a>
          
	</div>
</xsl:template>
 
<xsl:template match="property[@id='9236']" mode="man_photo">
	<xsl:apply-templates 
         select="document(concat('udata://system/makeThumbnail/
         (', string(value/@path), ')/150/auto'))/udata" />
	
</xsl:template>
 
<xsl:template match="property" mode="man_props">
	<p><xsl:value-of select="value" /></p>
</xsl:template>

 5. Выводим форму отправки сообщения данному менеджеру
Для визуального эффекта, сделаем вывод формы отправки сообщения с помощью ajax-запроса.

Для данной функциональности мы будем использовать протокол umap (для генерации нужного нам xhtml кода), а также js-framework jquery, для упрощения работы с Ajax.

Протокол umap используется для трансформации полученных от работы системы xml файлов в указанный тип, с помощью xlt преобразований.
Для использования данного протокола, мы должны в файле umaps/sitemap.xml прописать инструкцию преобразования.

<match pattern="^umap.getManager/(.*)/$">
    <generate src="upage://{1}" />
    <transform src="./xsltTpls/ajax/manager.xml" />
    <serialize type="html"/>
</match>

Комментарии:
Cтрока 1 - патерн, по которому будет срабатывать umap - ^umap.getManager,  /(.*)/ - отлавливаем переданный параметр
Строка 2 - источник трансформации, в нашем случае страница менеджера. ((.*) = {1})
Cтрока 3 - путь до файла преобразования.
Строка 4 - тип получаемой трансформации.

В файле трансформации manager.xml мы должны преобразовать xml страницы менеджера в форму отправки сообщения.

Код manager.xml

<xsl:output method="html"/>
<xsl:template match="/">
 
<div id="ajax" style="display:block;">
  <div class="mailManager">
    <xsl:apply-templates select="//property[@id='9236']" mode="man_photo" />
     
     <form action="/webforms/post/" method="post" onSubmit="return checkForm(this);">
      <input type="hidden" name="data[subject]" value="Сообщение с формы задать вопрос" />
      <xsl:value-of select="//property[@id='9238']/value" />
      
      <label for="message">Вопрос:</label>
      <textarea id="message" name="message" required="Задайте вопрос"></textarea>
      
      <xsl:apply-templates select="document('udata://system/captcha/')/udata" />
      <input type="hidden" name="email_to" value="{//property[@id='9239']/value}" />
      <input type="submit" value="Отправить вопрос" />
      
      <a href="#" onClick="return destroy('ajax');">закрыть</a>
     </form>
   </div>
</div>
</xsl:template>
 
 
<xsl:template match="property" mode="man_photo">
 <xsl:apply-templates select="document(concat('udata://system/makeThumbnail/
(',string(value/@path), ')/150/auto'))/udata" />
</xsl:template>

Результатом работы umap будет html-код формы отправки сообщения.

JS функция вставки результата работы umap в указанный div.

Как упоминалось ранее, мы используем jquery

Код функции AJQ 

AJQ = function(XMLname,idResDiv) {
 jQuery.ajax({
 url: XMLname,
 method: 'get',
 cache: false,
 beforeSend: function(){},
 success: 
  function(resp) {
   document.getElementById(idResDiv).parentNode.innerHTML = resp;
  }
  });
}

Данная функция просто передает путь до xml второй параметр id div, в который надо вставить код. В конструкцию beforeSend вставляем прелоадер для ajax.

Также хотелось бы привести xslt шаблон создания thumbnail, используемый в данной статье.

Код для макроса makeThumbnail

<xsl:template match="udata[@method = 'makeThumbnail']">
 <xsl:param name="class" />
 <xsl:param name="alt" />
 <xsl:param name="align" />
 <img src="{src}" width="{width}" height="{height}" alt="{$alt}" title="{$alt}">
 <xsl:if test="$class">
   <xsl:attribute name="class"><xsl:value-of select="$class"/></xsl:attribute>
 </xsl:if>
 <xsl:if test="$align">
   <xsl:attribute name="align"><xsl:value-of select="$align" /></xsl:attribute>
 </xsl:if>
</img>
</xsl:template>

Пример реализации