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

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

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

 

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

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

 

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

 

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

 

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

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

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

 

  1. <udata generation-time="0.043569">
  2. <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">
  3. <basetype id="36" module="photoalbum" method="photo">Фотография</basetype>
  4. <name>Василий</name>
  5. </page>
  6. <total>3</total>
  7. </udata>

 

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

XSLT код:

 

  1. <xsl:template match="udata" mode="usel_manager">
  2. <xsl:apply-templates select="page" mode="usel_manager" />
  3. </xsl:template>
  4.  
  5. <xsl:template match="page" mode="usel_manager">
  6. <xsl:variable name="man_tree" select="document(@xlink:href)/udata" />
  7. <div class="manager">
  8. <xsl:apply-templates
    select
    ="$man_tree//property[@id='9236']" mode="man_photo"/>

  9. <xsl:apply-templates
    select
    ="$man_tree//property[@id='9238']" mode="man_props" />

  10. <xsl:apply-templates
    select
    ="$man_tree//property[@id='9237']" mode="man_props" />

  11. <a href="#" onClick="return AJQ('/umap.getManager/{@id}/', 'ajax');">
    задать вопрос</a>
  12. </div>
  13. </xsl:template>
  14.  
  15. <xsl:template match="property[@id='9236']" mode="man_photo">
  16. <xsl:apply-templates
    select
    ="document(concat('udata://system/makeThumbnail/
    (', string(value/@path), ')/150/auto'))/udata"
    />
  17. </xsl:template>
  18.  
  19. <xsl:template match="property" mode="man_props">
  20. <p><xsl:value-of select="value" /></p>
  21. </xsl:template>

 

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

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

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

 

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

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

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

Код manager.xml

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

 

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

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

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

Код функции AJQ 

  1. AJQ = function(XMLname,idResDiv) {
  2. jQuery.ajax({
  3. url: XMLname,
  4. method: 'get',
  5. cache: false,
  6. beforeSend: function(){},
  7. success:
  8. function(resp) {
  9. document.getElementById(idResDiv).parentNode.innerHTML = resp;
  10. }
  11. });
  12. }

 

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

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

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

  1. <xsl:template match="udata[@method = 'makeThumbnail']">
  2. <xsl:param name="class" />
  3. <xsl:param name="alt" />
  4. <xsl:param name="align" />
  5. <img src="{src}" width="{width}" height="{height}" alt="{$alt}" title="{$alt}">
  6. <xsl:if test="$class">
  7. <xsl:attribute name="class"><xsl:value-of select="$class"/></xsl:attribute>
  8. </xsl:if>
  9. <xsl:if test="$align">
  10. <xsl:attribute name="align"><xsl:value-of select="$align" /></xsl:attribute>
  11. </xsl:if>
  12. </img>
  13. </xsl:template>

 

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

Читайте также:

Теги

Авторы блога