JavaScript-хуки
Новый редактор товаров
Посмотрите исходный код примера плагина с использованием JavaScript-хуков.
wa_before_load
Срабатывает непосредственно перед загрузкой содержимого по AJAX для элемента '#wa-app'
.
Параметры
params['content_url']
Текущий URL.params['data']
Дополнительные данные. Могут быть различными в разных ситуациях.params['section']
Объект с ключами 'id' — идентификатор текущей части раздела «Товары» (например,'product'
— часть редактирования одного товара; в будущем планируется добавлять другие части — например, часть для управления списка товаров, у которой будет другой идентификатор);'content_selector'
— селектор элемента с основным содержимым (без панели боковой панели).
Пример кода
$('#wa-app').on('wa_before_load', function (event, params) { console.log('Пользователь инициировал обновление содержимого по AJAX.'); });
wa_loaded
Срабатывает после загрузки по AJAX содержимого для контейнера с селектором '#wa-app'
.
Параметры
params['content_url']
Текущий URL.params['data']
Дополнительные данные. Могут быть различными в разных ситуациях.params['section']
Объект с ключами'id'
— идентификатор текущей части раздела «Товары»;'content_selector'
— селектор элемента с основным содержимым (без панели боковой панели).
Пример кода
$('#wa-app').on('wa_loaded', function (event, params) { console.log('Содержимое редактора товара обновлено.'); });
wa_before_save
Срабатывает перед отправкой данных на сервер при сохранении свойств товара. Позволяет отменить отправку данных на сервер и показать сообщение об ошибке по результатам клиентской валидации значений полей товара.
Обработчик события нужно регистрировать для элементов с селекторами '#js-product-general-section'
(раздел «Основные данные») или '#js-product-sku-section-wrapper'
(раздел «Цены и характеристики»).
Пример кода
$(document).on('wa_before_save', '#js-product-sku-section-wrapper', function(event) { var $field_wrapper = $('#myplugin-some-field'); var $field = $field_wrapper.find('input'); // Вызов собственной функции для удаления ранее показанного сообщения об ошибке. removeVisibleErrors($field_wrapper); var value = $field.val(); // Вызов собственной функции для валидации значения. if (!isValid(value)) { // Вызов собственной функции для отображения сообщения. showErrorMessage($field, $field.data('validation-error-message')); // Предотвращение отправки данных на сервер в случае ошибки валидации. event.preventDefault(); } else { // Добавление значения поля в данные формы, которые должны быть отправлены на сервер. // Это необходимо, только если у поля нет заполненного атрибута 'name'. event.form_data.push({ name: 'some_field', value: value }); } });
wa_save
Срабатывает сразу после отправки данных на сервер при сохранении товара, не дожидаясь ответа от сервера. Удобно использовать, если необходимо отправлять данные на собственный контроллер плагина при сохранении свойств товара — в этом случае нет необходимости дожидаться ответа от контроллера Shop-Script, как при использовании хука wa_after_save
.
Параметры
Пример кода
$(document).on('wa_save', '#js-product-general-section', function(event) { var message = 'Данные товара отправлены на сервер.'; if (event.product_id !== undefined) { message += ' ID товара — ' + event.product_id + '.'; } console.log(message); });
wa_after_save
Срабатывает после отправки данных на сервер при сохранении свойств товара и получения ответа от сервера. Позволяет показывать сообщение об ошибке, полученное с сервера. Сообщение об ошибке может быть сформировано обработчиком PHP-хука backend_prod_presave.
Параметры
event.server_errors
Массив сообщений об ошибках, полученных с сервера. Если какая-то ошибка получена от обработчика PHP-хука backend_prod_presave, то соответствующий элемент массива ошибок — это объект со следующими ключами:'id'
— стандартная строка'plugin_error'
,'plugin'
— идентификатор плагина,'name'
— произвольный идентификатор ошибки (можно использовать для разделения логики отображения для разных видов ошибок),'text'
— локализованное сообщение об ошибке, которое нужно показать пользователю.
Пример кода
$(document).on('wa_after_save', '#js-product-general-section', function(event) { if (!event.server_errors || !event.server_errors.length) { // Ничего не делать, если нет ошибок. return; } var $field_wrapper = $('#myplugin-some-field'); var $field = $field_wrapper.find('input'); var errors = event.server_errors || []; $.each(errors, function(i, error) { if (error.id == 'plugin_error' && error.plugin == 'myplugin' && error.name == 'general_bottom') { showErrorMessage($field, error.text); // Удалить эту ошибку из общего списка ошибок, // если сообщение об этой ошибке не нужно показывать в стандартном месте внизу страницы. errors[i] = undefined; } }); });