Shoptet Developers Tools

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 and Step templates.

Information function of Shoptet Developers Tools

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()

Entering the shoptet.dev.enableEventsMonitoring() command will switch on the function and event monitoring (until the page is reloaded). If any supported function is now executed, information about that function will be written to the console along with possible function parameters.

To enable debugging for a longer period, simply create a cookie directly from the console:

// 10 = number of days of cookie validity
shoptet.cookie.create('monitorJSEvents', '1', {days: 10})

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(), or by creating the cookie monitorJSEvents with negative validity (for example days: -1). Feature monitoring should never be turned on globally.

Modify functionality with Shoptet Developers Tools

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.

Supported functions

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 burned**, 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 features. 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);
    });

Shoptet events when changing DOM

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. A ShoptetDOMContentLoaded event is a general one and will be burned 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
    });

Custom functions before submitting the form

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 vracovsky@shoptet.cz. If possible and of global use to our clients, we will try to do our best.