В статье мы рассмотрим пример, как с помощью  модуля "Шаблоны данных", модуля "Фотогалереи", модуля "Обратная связь" и 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>

 

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

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

Категории

Теги

мероприятия версии UMICMS продукты UMI MySQL разделение баз данных партнеры технологии Кейсы обзоры маркетинг developer программинг менеджмент xslt документация шаблоны Служба Заботы маркетинг веб студии москва UMI события лицензии новинки UMI Edu UMI Cloud модуль UMISummit business облако тегов кастомы uwdc Челябинск разработчики конференция Конкурс UMIRU exchange 28 Обмен данными 1C Интеграция с 1С хостинг юмихост umihost UMICMS рейтинг flash actionscript каталог анимация видео техподдержка tpl local scope macro кейсы итоги года SAPE seo мероприятие рынок веб разработки экономика Алексей Самойлов Сергей Котырев KINETICA CMS Сибирская интернетнеделя UMIWorkshop интернетмагазин интернет-магазин интернет магазин интернет-маркетинг Золотой сайт umi_workshop акция стратегия партнерская_программа партнерство highload РуПромо Машков версия 2_7 кэширование скорость стихи день рождения статьи пресс конференция версия 2_5 Edit_in_Place онлайн платежи кризис достижения CeBIT внедрения umi cms блоги верстка релиз EditInPlace изучение Юми создание модуля модули ReMIX UMI_CMS_Net iPhone XML драйвер как убрать лампочку форма обратной связи языковые версии CMS Pistols музыка UMICMS 28 удобство юзабилити usability user experience интерфейсы CMS Eye tracking ай тракинг usability test UXRussia управление сайтом RIW Russian internet week Softool выставки интернет клиенты сайты umisound cms pistols РИФ 2011 Tagline качество 2012 UMISound Полюса Илья Разин Марат Машков

Авторы блога