Модификация процедуры заказа в интернет-магазине с использованием APIC версии 5.14.4, доработано и опубликовано API для управления оформлением заказов в интернет-магазине. API позволяет в асинхронном режиме обмениваться с сервером данными о заказе, получать данные о методах доставки, общей сумме заказа, о детализации заказа и комиссиях платёжных систем, без перезагрузки страницы. Этот функционал открывает широкие возможности для адаптации процессов в любом магазине. Пример использованияЗадача: необходимо перенести диалог выбора платёжной системы на шаг оформления заказа, а также вывести общую сумму заказа на этом же шаге. Данные о доступных способах доставкиВ рамках одного магазина может быть несколько видов доставки, распределённых по нескольким группам. Один и тот же вид доставки (например, Почтой России) может быть в нескольких группах. Существуют разные способы обработки случая, когда разные товары в корзине относятся к разным группам. Получить данные о том, какие товары к каким группам относятся, можно двумя путями. Самое простое — воспользоваться переменной ##cart_shipping## в сете purchase_form шаблона eshop_purchase.tpl. В обоих случаях ответом будет объект, в формате JSON. Например, если на демоверсии редакции бизнес положить в корзину «Современную конюшню», «Ламборджини» и «Бинокль», то структура объекта будет такой:
Что можно понять из этого объекта? Во-первых, все три товара относятся к группе доставок «11», а значит, их можно заказать любым способом, который присутствует в этой группе. Во-вторых, отражено какие именно методы доставки присутствуют в группе «11». Причем, доступны как названия методов (например «ЖД доставка»), необходимые для покупателей, так и id методов, потенциально необходимые для дальнейшего общения с сервером. Наконец, в-третьих, доступен массив items, который содержит исчерпывающую информацию по каждому товару (для краткости здесь показаны только id и name). Чтобы получить полноценный JS объект прямо в шаблоне (первый способ), строка декодируется:
Обратите внимание на объект JSON – он появился только в пятой редакции ECMAScript, поэтому для браузера InternetExplorer версии 8 и ниже придётся подключать библиотеку json2.js (https://github.com/douglascrockford/JSON-js).
Обратите внимание на конструкцию «AMI.$» – это «стабильная» проверенная версия jQuery (на момент написания статьи – 1.7.2), подключённая на любой сайт на Amiro.CMS версии 5.14.4+, с серверов Яндекса. По-умолчанию эта же версия доступна и через имя $, но лишь до тех пор, пока вы не подключаетена сайт собственную версию jQuery. Что же делает этот скрипт и куда его вставить? Вставить его можно в любой сет шаблона eshop_purchase.tpl,который выводится на этапе оформления заказа, например в сетpurchase_formлибо в файл common.js. Разберемся, что делаетэтот код. Код состоит из двух частей: «асинхронный запрос на сервер» (ajax()) и «обработчик ответа сервера» (done()). Запрос имеет три параметра, имена, структура и значения которых указаны в коде. При получении ответа с сервера jQuery вызывает обработчик с одним параметром (в данном случае он назван content). Этот параметр и есть JSON строка, которую можно преобразовать в JS объект. Полученный первым или вторым способом объект нужен не только для формирования элементов формы, при помощи которых покупатель мог бы выбрать нужный ему способ доставки (кстати, это реализовано и в прежних версиях шаблона eshop_purchase.tpl), но, прежде всего — для составления второго запроса. Общая стоимость заказаДля второго запроса на сервер потребуется модифицированный объект aCartShipping, полученный выше. Модификация заключается в установке выбранного метода доставки для каждой группы методов. Например, если в группе методов, у которой id равен 11, выбран метод, id которого равен 13, модификация и второй запрос будут такими:
Конечно, в таком виде код не пойдёт: id группы и метода доставки, жестко прописаны в коде. Ниже будет описан более общий способ модификации объекта. В запросе общей стоимости заказа без AJAX запроса не обойтись, потому что для расчёта этой стоимости нужно знать, какие именно способы доставки покупатель выбрал. Сам выбор задаётся через добавление переменной selected_method внутри каждой группы методов. В этом запросе присутствует дополнительный параметр json_data, в котором и должен находиться модифицированный (то есть с выставленной переменной selected_method внутри каждой группы) сериализованный объект aCartShippings в формате JSON. Примерный ответ сервера (содержимое переменной content):
Для краткости пропущена часть свойств и большинство платёжных систем. Объект total содержит суммарную стоимость заказа, с учётом всех налогов и скидок, с учётом стоимости всех доставок, но до учёта комиссии платёжной системы. Комиссия, а также общая стоимость с учётом этой комиссии, содержится в массиве drivers, для каждой платёжной системы в отдельности. «stub» соответствует пункту «оплатить потом». ПримерНеобходимо вывести список платёжных систем на этапе оформления заказа и, в зависимости от выбранных способов доставки и платёжной системы, вывести на экран общую сумму заказа. Для этого необходимо: 1. Сформировать список платёжных систем, как элемент формы типа select Это можно сделать средствами шаблонаeshop_purchase.tpl. Сеты payment_methods_natural_item и payment_methods_juridical_item задают структуру вывода одной платёжной системы для физических и юридических лиц (это два разных списка). Код для шаблона выглядит примерно так (здесь и далее код для юридических лиц пропущен, более подробно про типы лиц можно найти в документации):
Здесь ##name## – уникальное имя платёжной системы (stub, webmoney, yandex и т.д.), сохраняемое в атрибут data-ami-payment-method. При этом покупатель видит переменные локализации типа %%pay_with_ stub%% и т.д. Полный набор платёжных систем будет содержаться в переменных ##payment_methods_natural## и ##payment_methods_juridical## в сете purchase_form. Достаточно обернуть их select`ами и расположить в этом же сете:
Логику скрытия select`ов, в зависимости от выбранного типа лица (физическое или юридическое), также пропущена. 2. Назначить JS обработчики на смену методов доставки С точки зрения браузера смена метода доставки – это клик по радиокнопке, привязанной к любому из методов. Поэтому, сначала радиокнопки помечаются для дальнейшего назначения обработчиков. Сетshipping_method_radio_row – выводит один (каждый) метод доставки. Находится элемент с тегом input и ему задаются атрибуты:
В данном коде всем радиокнопкам был задан id, который начинается с префикса sipping_method_. Дополнительно, чтобы не усложнять JS код операциями со строками, добавлены два атрибута: data-ami-method-id и data-ami-group-id, значения которых подставляет система, их смысл – id метода доставки и id группы, к которой данный метод принадлежит. Помним, что один метод может принадлежать сразу нескольким группам. Атрибуты name и value необходимы для корректной работы системы после отправки формы. Теперь находятся все эти радиокнопки и привязываются (bind()) к событию click функцию, которая будет делать всё необходимое:
Конструкция «id^="shipping_method_"» заставит jQuery найти все элементы с id, начинающихся с shipping_method_. При клике будет вызван код, который определит метод и группу, модифицирует объект и сделает запрос на сервер, после чего выставит цену вызовом функции:
Код функции setShippingMethod описан выше. Осталось совсем ничего, а именно 3. Задать обработчики смены платёжной системы Когда покупатель меняет платёжную систему, меняется и общая сумма заказа. Для удобства, сразу все «итоговые суммы» заказа, для каждой платёжной системы в отдельности, есть в одном ответе сервера. Поэтому обработчику достаточно определить имя новой платёжной системы и вызвать функцию setTotalPrice():
Теперь при смене способа доставки, так и при смене способа оплаты, будет обновляться итоговая цена заказа. В стандартной поставке реализована более сложная схема, с несколько группами доставки, переключением на юридическое лицо, формированием детализированного списка товаров заказа, кешированием ответов сервера. Посмотреть в действии всё это можно на демоверсии редакции бизнес, а найти код – там же, в объекте AMI.Eshop.Purchase, который находится в шаблоне eshop_purchase.tpl.
Комментарии (3)
Ваш комментарий
|