JavaScript hooks

New product editor

Look at the source code of a plugin example with the use of JavaScript hooks.

wa_before_load

Triggered immediately before content is fetched by AJAX for the '#wa-app' element.

Parameters

Code example

$('#wa-app').on('wa_before_load', function (event, params) {
    console.log('Content update via AJAX initiated by a user.');
});

wa_loaded

Triggered upon the loading of content by AJAX for the '#wa-app' element.

Parameters

Code example

$('#wa-app').on('wa_loaded', function (event, params) {
    console.log('Product editor content updated.');
});

wa_before_save

Triggered before data sending to the server when a product is being saved. Allows canceling the data sending and displaying of an error message as a result of a client-side validation of product fields.

An event handler must be registered for elements with the selectors '#js-product-general-section' (tab “Basic data”) or '#js-product-sku-section-wrapper' (tab “Prices and features”).

Code example

$(document).on('wa_before_save', '#js-product-sku-section-wrapper', function(event) {
    var $field_wrapper = $('#myplugin-some-field');
    var $field = $field_wrapper.find('input');

    // Calling a custom function to remove a previously shown error message.
    removeVisibleErrors($field_wrapper);

    var value = $field.val();

    // Calling a custom validation function.
    if (!isValid(value)) {
        // Calling a custom function to show an error message.
        showErrorMessage($field, $field.data('validation-error-message'));

        // Preventing the form from sending data to the server in case of a validation error.
        event.preventDefault();
    } else {
        // Adding the field value to form data, which will be sent to the server.
        // Necessary only if plugin's field has no 'name' attribute.
        event.form_data.push({
            name: 'some_field',
            value: value
        });
    }
});

wa_save

Triggered immediately upon sending data to the server when a product is being saved, without waiting for a server response. Convenient if you need to send plugin’s data to its own controller and do not need to wait for a response from the Shop-Script’s product saving controller as you usually do when using the wa_after_save hook.

Parameters

Code example

$(document).on('wa_save', '#js-product-general-section', function(event) {
    var message = 'Product data sent to the server.';

    if (event.product_id !== undefined) {
        message += ' Product ID is ' + event.product_id + '.';
    }

    console.log(message);
});

wa_after_save

Triggered after data product data have been sent to the server and a server response has been received when a product is being saved. Allows displaying of an error message received in the server response body. The error message can be generated by a plugin’s handler for the PHP hook backend_prod_presave.

Parameters

Code example

$(document).on('wa_after_save', '#js-product-general-section', function(event) {
    if (!event.server_errors || !event.server_errors.length) {
        // Do nothing if there are no errors.
        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);

            // Remove this error from the error list if it's message
            // should not be shown again in the standard location at the page bottom.
            errors[i] = undefined;
        }
    });
});