AJAX и UMI.CMS — это просто. UDATA/UPAGE
Эту статью хочу посвятить тому, как просто работать с 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 объекты