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

  • params['content_url'] Current URL.
  • params['data'] Additional data. My be different in various conditions.
  • params['section'] Object with the keys 'id' — identifier of the current part of the “Product” section (e.g., 'product' denoting a single product page; in the future other parts are planned to be added, for instance, for the management of product lists, which will have other identifiers); 'content_selector' — the selector of the main content element, not including the sidebar.

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

  • params['content_url'] Current URL.
  • params['data'] Additional data, which be different in various conditions.
  • params['section'] Object with the keys 'id' — identifier of the current part of the “Product” section; 'content_selector' — the selector of the main content element, not including the sidebar.

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”).

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

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

  • event.server_errors Array of error messages received from the server. If one of the errors was generated by a handler of the PHP hook backend_prod_presave then the corresponding error array item is an object with the following keys: 'id' — standard string value 'plugin_error', 'plugin' — plugin ID, 'name' — arbitrary error identifier, which can be used to differently display various types of error messages, 'text' — localized error message to be displayed to a user.

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

shop_reports_init

Triggered upon the initialization of the “Reports” section content in the Webasyst 2 interface mode. Allows, for instance, adding custom methods to the JavaScript controller accessible via the $.reports property.

Example

// add a handler for custom URL ?action=reports#myplugin/ in the reports section
$(document).on('shop_reports_init', function() {
    $.reports.mypluginAction = function(params) {
        this.load('?plugin=myplugin&module=reports');
    };
});