В этот раз я опишу пример взаимодействия 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 и поместим туда следующий код:
- <?xml version="1.0" encoding="utf-8"?>
- <selection mode="and">
- <target result="pages">
- <type module="catalog" method="object" />
- <category depth="{3}">{1}</category>
- </target>
- <sort>rand()</sort>
- <limit>{2}</limit>
- </selection>
Здесь мы говорим, что нам нужны случайные (7-ая строчка) объекты каталога (4-ая строчка) из указанного раздела каталога с указанной глубиной (5-ая строчка), с ограниченим на выборку (8-ая строчка) и результатом выборки должны быть страницы (3-ая строчка).
Все, остаётся создать шаблон, по которому будут трансформироваться полученные данные. Откроем папку /xsltTpls/, создадим файл с именем karusel-objects.xsl и поместим этот код:
- <?xml version="1.0" encoding="UTF-8"?>
- <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
- <xsl:output encoding="utf-8" method="xml" indent="yes"/>
- <xsl:template match="/">
- <catalog_items>
- <items>
- <xsl:apply-templates select="udata/page"/>
- </items>
- </catalog_items>
- </xsl:template>
- <xsl:template match="page">
- <xsl:apply-templates select="document(concat('upage://', @id))/udata/page/properties" />
- </xsl:template>
- <xsl:template match="properties">
- <item>
- <image><xsl:value-of select="document(concat('udata://system/makeThumbnailFull/(.', string(group/property[@name='header_pic']/value), ')/70/70'))/udata/src" /></image>
- <link_to><xsl:value-of select="../@link" /></link_to>
- <item_name><xsl:value-of select="../name" /></item_name>
- <price><xsl:value-of select="group/property[@name='price']/value" /> руб.</price>
- </item>
- </xsl:template>
- </xsl:stylesheet>
Внимательный читатель заметит, что для создания превью я использую функцию makeThumbnailFull. В отличии от обычного makeThumbnail, данный макрос при жестко заданных значениях ширины и восоты не деформирует её, если соотношения сторон расходятся от заданных, а обрезает лишнее. Иногда очень полезно, когда при верстке необходимо вставлять изображения с фиксированными размерами, а «сплющивать» их не хочется. Незнаю почему разработчики её держат в секрете, я её обнаружил помоему ещё в версии 2.6.5.
Тут есть еще один важный момент. Найдите следующий код: string(group/property[@name='header_pic']/value). Я использую в качестве основного изображения товара «Картинку для заголовка», если вы используете другое поле то подставьте его имя вместо 'header_pic'.
В принципе все готово, остаётся закинуть два файлика: этот в папку /js/, и этот в папку /images/, и можно смело в нужное место в любом шаблоне вставлять следующий код:
- <div id="umi-karusel-cont">
- <script src="/js/swfobject.js" mce_src="/js/swfobject.js" type="text/javascript"></script>
- <script type="text/javascript">
- var rnumber = Math.floor(Math.random()*9999999);
- var so = new SWFObject("/images/catalog.swf?r="+rnumber,
- "umi-karusel",
- "350",
- "140",
- "9",
- "#ffffff");
- so.addParam("allowScriptAccess", "always");
- so.addVariable("path", "адрес каталога");
- so.addVariable("depth", "глубина");
- so.addVariable("limit", "10");
- so.write("umi-karusel-cont");
- </script>
Обратите внимание на последние строчки снизу, не забудьте прописать путь и глубину выборки. Как и обещал: исходник флешки в формате fla (Adobe Flash CS4).
Комментирование доступно только авторизованным пользователям.
Пожалуйста, зарегистрируйтесь или войдите на сайт.
Я бы на вашем месте воспользовался бы протоколом umap, который формировал бы нам составленную Вами xml.
И флешки бы скармливали getObjects (ну или как там umap назовете). Также можно передавать туда id категории. Все намного будет изящнее - и без лишних файлов.
возвращается xml, который должен попасть в флеш
возвращается xml, который должен попасть в флеш
версия юми 2.8.1
по адресу получается:
Ошибка синтаксического анализа XML: элемент не найден
Адрес: http://avers-bg.ru/getRandObjects/
Строка 1, символ 46:<!-- This page generated in 0.050447 secs -->
---------------------------------------------^