Карусель товаров (Flash + UMI.CMS)

В этот раз я опишу пример взаимодействия Flash и UMI.CMS. На примере я опишу ту самую «карусель» товаров, которую давно обещал описать в каментах предыдущего поста. Задача была сделать крутящуюся карсусель из изображений товаров, взятых из каталога. Как только я занялся решением этой задачи, тут же для себя уяснил что с математикой у меня плохо. Попытки описать траекторию анимации и траекторию движения только доказали это. Поэтому решил найти что-то подобное среди готовых решений. Немного погуглив, нашел на форуме сайта demiart.ru реализацию карусели из картинок. Посмотрел, данные берутся из XML, - то что нужно. Во флешке пришлось многое изменить, из оригинала оставил лишь часть, отвечающую за анимацию. Исходник я приложил, каждый потом сможет сделать то, что ему нужно. Здесь же я освещу лишь общие моменты, дабы не отбирать хлеб у фрилансеров и у себя тоже :) 

Здесь можно посмотреть  живой пример. Итак, чтобы увидеть сиё творение необходимо будет создать 2 файла, скопировать ещё 2 и отредактировать один файлик. Первым делом создадим правило для umap. Откроем папку /umaps/, найдем и откроем файл sitemap.xml. Между последним закрывающим тегом </mathch> и закрывающим тегом </sitemap> необходимо разместить следующий код:

<match pattern="^getRandObjects/(.*)$">
    <param name="cache" value="10" />
    <generate src="usel://getObjects/{1}" />
    <transform src="./xsltTpls/karusel-objects.xsl"></transform>
    <serialize type="xml" />
</match>

Этим мы сообщили системе, что по запросу somesite.ru/getRandObjects/ ей будет необходимо получить данные по протоколу usel и трасформировать полученные данные по XSLT шаблону.

Далее нам нужно создать XML файл для usel. Usel — это протокол для взаимодействия с API umiSelection. На входе он получает xml файл, который описывает какие именно данные нам нужны, а на выходе отдает xml с результатом выборки из базы данных. Создадим в папке /usels/ файл с названием getObjects.xml и поместим туда следующий код:

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

Здесь мы говорим, что нам нужны случайные (7-ая строчка) объекты каталога (4-ая строчка) из указанного раздела каталога с указанной глубиной (5-ая строчка), с ограниченим на выборку (8-ая строчка) и результатом выборки должны быть страницы (3-ая строчка).

Все, остаётся создать шаблон, по которому будут трансформироваться полученные данные. Откроем папку /xsltTpls/, создадим файл с именем karusel-objects.xsl и поместим этот код:

1. <?xml version="1.0" encoding="UTF-8"?>
2. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3. <xsl:output encoding="utf-8" method="xml" indent="yes"/>
4.  
5.   <xsl:template match="/">
6.     <catalog_items>
7.       <items>
8.         <xsl:apply-templates select="udata/page"/>
9.       </items>
10.     </catalog_items>
11.   </xsl:template>
12.  
13.   <xsl:template match="page">
14.       <xsl:apply-templates select="document(concat('upage://', @id))/udata/page/properties" />
15.     </xsl:template>
16.  
17.     <xsl:template match="properties">
18.      <item>
19.         <image><xsl:value-of select="document(concat('udata://system/makeThumbnailFull/(.', string(group/property[@name='header_pic']/value), ')/70/70'))/udata/src" /></image>
20.       <link_to><xsl:value-of select="../@link" /></link_to>
21.       <item_name><xsl:value-of select="../name" /></item_name>
22.       <price><xsl:value-of select="group/property[@name='price']/value" /> руб.</price>
23.     </item>
24.     </xsl:template>
25.  
26. </xsl:stylesheet>
27. 
    

Внимательный читатель заметит, что для создания превью я использую функцию makeThumbnailFull. В отличии от обычного makeThumbnail, данный макрос при жестко заданных значениях ширины и восоты не деформирует её, если соотношения сторон расходятся от заданных, а обрезает лишнее. Иногда очень полезно, когда при верстке необходимо вставлять изображения с фиксированными размерами, а «сплющивать» их не хочется. Незнаю почему разработчики её держат в секрете, я её обнаружил помоему ещё в версии 2.6.5.

Тут есть еще один важный момент. Найдите следующий код: string(group/property[@name='header_pic']/value). Я использую в качестве основного изображения товара «Картинку для заголовка», если вы используете другое поле то подставьте его имя вместо 'header_pic'.

В принципе все готово, остаётся закинуть  два файлика: этот в папку /js/, и этот в папку /images/, и можно смело в нужное место в любом шаблоне вставлять следующий код:

1. <div id="umi-karusel-cont">
2. <script src="/js/swfobject.js" mce_src="/js/swfobject.js" type="text/javascript"></script>
3. <script type="text/javascript">
4.         var rnumber = Math.floor(Math.random()*9999999);
5.         var so = new SWFObject("/images/catalog.swf?r="+rnumber,
6.                                 "umi-karusel",
7.                                 "350",
8.                                 "140",
9.                                 "9",
10.                                 "#ffffff");
11.         so.addParam("allowScriptAccess", "always");
12.         so.addVariable("path", "адрес каталога");
13.         so.addVariable("depth", "глубина");
14.         so.addVariable("limit", "10");
15.         so.write("umi-karusel-cont");
16. </script>

Обратите внимание на последние строчки снизу, не забудьте прописать путь и глубину выборки. Как и обещал: исходник флешки в формате fla (Adobe Flash CS4).