AJAX и UMI.CMS — это просто. UDATA/UPAGE

umi-cms-vertical1

Эту статью хочу посвятить тому, как просто работать с AJAX в UMI.CMS.

Я рассмотрю два примера. Первый — это работа с протокол UPAGE/UDATA, второй — JSON (также можно использовать XML).

Принцип работы следующий — вам нужно сделать передать обычный HTTP запрос к серверу, а после его трансформировать в указанный в URL XLS-шаблон. Далее показать пользователю.

Например — /upage/30?transform=modules/catalog/ajax/product-info.xsl

Путь к шаблону передается в transform. Используется шаблон по умолчанию для домена. Путь от папки modules. Например:
/catalog/ajax/product-info.xsl

Javascript, AJAX. Я люблю использовать jQuery, там все готово :):

$.ajax({
	url: '/upage/30?transform=/modules/catalog/ajax/product-info.xsl',
	type: "get",
	dataType: 'html',
	async: true,
	timeout: 30000,
	beforeSend: function (data) {
		// Функция выполняется перед отправкой AJAX запроса на сервер
	},
	success: function (data) {
		// Тут делаете что-то с вашим ответом "data"
		$("#resp1").html('').html(data);
	},
	complete: function (data) {
		// Функция выполняется по завершению AJAX запроса и функции success
	},
	error: function (data) {
		// Функция выполняется в случае ошибки
	}
});

XLS-шаблон

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >

	<!-- Можно с легкостью использовать xsl:include для подключение доп. шаблонов -->
	<!-- <xsl:include href="../../catalog/common.xsl" /> -->
	<xsl:template match="udata">
		<!-- Здесь ваш HTML шаблон. Все как обычно -->
		<!-- Пример -->
		<div class="product-info">
			<div class="product-info-title">
				<span>Название: </span>
				<xsl:value-of select="page/name" />
			</div>
			<div class="product-info-price">
				<span>Цена: </span>
				<xsl:value-of select="//property[@name = 'price']/value" />
			</div>
			<div class="product-info-price"></div> 
		</div> 
	</xsl:template>
</xsl:stylesheet>

Пример работы в демо

К слову, на сайте sapphire-shop.com.ua подобным образом реализован механизм добавления товара в корзину 😉

В следующей статье я рассмотрю JSON объекты