AJAX и UMI.CMS — это просто. JSON

umi-cms-vertical1

Вам наверняка известно, что вы можете получить любую страницу, объект, макрос(функцию) в json-формате(если не знали, я отрываю вам глаза ;)). С json и UMI очень просто работать, но к сожалению, об этом мало где написано... Исправляю ситуацию. Кстати, не так давно я написал стать про UDATA/UPAGE

В этом примере, давайте попробуем запросить информацию по корзине пользователя.

В отличии от примера с UDATA/UPAGE, не нужно ничего трансформировать.

Нужно к строке URL добавить .json и dataType установить json. Далее обработать результат, который вернет сервер.

$.ajax({
	url: '/udata/emarket/cart/.json',
	type: "get",
	dataType: 'json',
	async: true,
	timeout: 30000,

	beforeSend: function (data) {
		// Функция выполняется перед отправкой AJAX запроса на сервер
	},
	success: function (data) {
		var html = '';

			html += '<div class="product-info">';
			html += '<div>Товаров в корзине: ' + data.summary.amount + ' шт. товаров</div>';
			html += '<div>На сумму: ' + data.summary.price.actual + ' ' +  data.summary.price.suffix + '</div>';

			html += '<hr />';
			html += '<div>У вас в корзине:</div>';

			html += '<ul>';
			for (i in data.items.item) {
				var item = data.items.item[i];

				html += '<li>' + item.name + '</li>';

			}
			html += '</ul>';

			html += '</div>';

		$('#resp1').html('').html(html);
	},
	complete: function (data) {
		// Функция выполняется по завершению AJAX запроса и функции success
	},
	error: function (data) {
		// Функция выполняется в случае ошибки
	}
});

Демо здесь.

Кстати на сайте sapphire-shop.com.ua реализован такой механизм регистрации 😉

Важно, это демонстрация возможностей, прошу не писать о различного рода проверках кода и прочем, эта задача ложиться на ваши плечи.

Bookmark the permalink.

Также может быть интересно:

  • Евгений

    Очень полезная статейка спасибо, только вот вопрос вместе с товарами в корзине пытаюсь вставить и изображение товара. Получается получаю его по: /upage/ID.json ... но само изображение не обновляется после загрузки ... или в ajax нельзя подгружать изображения?

    • Скорее всего у вас не успевает отработать ajax-запрос, который тащит изображение.

  • Андрей

    Здравствуйте.

    Спасибо за работу которую вы делаете, по UMI почему-то вообще мало информации в интернете, и мало кто пишет в деталях.

    Может быть вопрос не по теме, но буду рад если вы ответите.

    Для настройки электронной коммерции, например в яндексе, нам необходимо передавать информацию о заказах в метрику по средствам «json».

    var yaParams = {

    order_id: «12345»,

    order_price: 123.45,

    currency: «RUR»,

    exchange_rate: 1,

    goods:

    [

    {

    id: "1",

    name: "название товара",

    price: 100,

    quantity: 1

    }

    ]

    };

    Может вы подскажите как будет выглядеть этот код для UMI? Сайт стандартный с сервиса umi.ru

    • По идее вам нужно разработать метод, который нужно будет вызывать на странице «Спасибо за заказ», который будет получат заказ и передавать данные на сервер Yandex.

      Только очень важно, чтобы этот метод вызывался после покупки.

      • Андрей

        У меня на странице товара выводится информация о заказе который совершил покупатель. Вопрос только в том, как эти данные поместить в форму яндекс метрики.

        Форма которая выводит информацию о заказе:

        xsl:template match="purchasing[@stage = 'result' and @step = 'successful']">

        Вы заказали:

        Ваш заказ №: .

        Количество заказанных товаров: , на общую сумму:

        .

        Цена: .

        Количество: шт.

        Но если я вставляю xsl формы в форму кода яндекса, например:

        var yaParams = {

        order_id: ,

        order_price: ,

        }

        Нечего не работает) Я чайник, помогите пожалуйста)

  • Panda Tamara

    Это стыд, так обрабатывать результат ajax ответа. Для формирования верстки используется шаблонизатор. Вот вам пример, правильного url — ' /udata/emarket/cart/?transform=/modules/custom/analize.xsl'

    • Ув. Тамара, вы сравнивали скорость ответа сервера и размер документа, если происходит запрос xml и json, если нет, тогда этот скрин для вас — prntscr.com/80nur3

      Там четко видно 😉

      Для больших ресурсов это ОЧЕНЬ важно.

      Что касается правильно примера, если бы вы внимательно прочитали статью, то вы бы увидели ссылку на эту статью — pontyk.com.ua/umi-cms/ajax-i-umi-udata-upage/

      Удачи!

      • Panda Tamara

        самое интересное, что из этой статьи я об этом способе и узнал...)) С вашими аргументами согласен, сделал поспешные выводы. За информацию спасибо