JavaScript-хуки

Новый редактор товаров

Посмотрите исходный код примера плагина с использованием JavaScript-хуков.

• wa_before_load
• wa_loaded
• wa_before_save
• wa_save
• wa_after_save

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;
        }
    });
});