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