In order to make editing our templates easier for external coders, Shoptet Developers Tools have been developed. This is a set of JavaScript functions available in Techno, Tango, Waltz, Classic, Step, Disco and Samba templates.
If you now open the console (F12) in your browser, you will see the following message:
Shoptet developers tools version 0.1.2
Events monitoring is disabled.
To enable events monitoring, run shoptet.dev.enableEventsMonitoring()
Function shoptet.dev.enableEventsMonitoring() has an optional parameter expires. without this parameter you enable the events monitoring for one day, but you can use your own desired expiration:
shoptet.dev.enableEventsMonitoring(true, {days: 0, hours: 1})
Entering this command will reload the page and switch on the functions and events monitoring. If any supported function is now executed, information about that function will be written to the console along with possible function parameters.
This gives you an overview of what is happening “in the background”, what functions are running and how they are interrelated. You can switch off the logging by an inverse command shoptet.dev.disableEventsMonitoring() Functions and events monitoring must never be turned on globally, it has no purpose for clients.
The most powerful function of Shoptet Developers Tools is the ability to capture events of running functions, to add functions to their own callbacks, and to respond to DOM changes.
Enter the shoptet.scripts.monitoredFunctions command to find a list of currently supported functions (these will be added further on). After each of these functions is performed**, the event with the same name is fired**, i.e. for example showPopupWindow.
The functions beginning with shoptet.MODULE_NAME. are considered stable, and you will be informed in advance about any changes in them via this blog.
If you want to respond to any call of a specific function, such as showPopupWindow, you can do this by doing the following:
document.addEventListener('shoptet.global.showPopupWindow', function () {
// code to be executed each time you call showPopupWindow
});
You can also forward your own function as a callback of any of the supported functions. In this callback, you have access to the arguments with which the function was called:
shoptet.scripts.setCustomCallback('shoptet.global.showPopupWindow', function(args) {
console.log(
'I am callback function "shoptet.global.showPopupWindow", called with the following arguments: '
);
console.log(args);
});
The shoptet.scripts.availableDOMLoadEvents command will list the events that happen when you load a new part of DOM and that we currently enable for use. The ShoptetDOMContentLoaded event is a general one and will be fired each time a part of DOM is loaded by AJAX, along with an event that defines a specific change, such as ShoptetDOMCartContentLoaded.
Other events that you can respond to, are in shoptet.scripts.availableDOMUpdateEvents, and shoptet.scripts.availableCustomEvents. We will add events step by step.
If I use an example from practice, then once the contents of the basket are reloaded, some individual modifications are often necessary. Until now, you have only been able to listen to the general event ajaxcomplete. Now you can make targeted edits each time you reload your basket contents:
document.addEventListener('ShoptetDOMCartContentLoaded', function () {
// code to be executed after loading basket contents
});
You also have the option to access the form submission process with your own script. This relates to submitting an order, for example submitting a discussion post, subscribing to a newsletter, or submitting a product query.
If you create the shoptet.custom.postSuccessfulValidation function, this will be invoked after successfully validating the form, just before the form is submitted. The function must return either a true value to send the form, or a false value to stop sending the form – in which case you must ensure the form is submitted.
Nevertheless, the function shoptet.custom.postFailedValidation will be called after form validation has failed. This function does not have to return any value.
Both functions receive a single parameter, form, which includes the validated form.
/*
* This function will be called after successful validation, right before form submit.
* Argument "form" is currently validated form
* Function has to return true (to submit form) or false (to interrupt form submitting)
*/
shoptet.custom.postSuccessfulValidation = function(form) {
// Do your stuff here...
return true;
};
/*
* This function will be called after unsuccessful validation, right before the form submitting is interrupted.
* Argument "form" is currently validated form
*/
shoptet.custom.postFailedValidation = function(form) {
// Do your stuff here...
};
If you are working with JavaScript and know any function or event that could be helpful for you, contact us at partneri@shoptet.cz. If possible and of global use to our clients, we will try to do our best.