Tech specs - JS hooks

Permalink

This is for advanced users and developers.

The controller renders JavaScript code on the invoking website, and once loaded, the script starts its run, looking for links to convert to buttons.

There are two hooks defined within the JS code, and they’re array objects.

Note: if you are going to set JavaScript hooks to the controller, then you should add the hook definitions on the <head> and then the invocation code at the end of the <body>.

Pre-init hook

If you want to do something to the button links before they’re turned into buttons, you just need to add a function element to the wpuni_mciwidget_preinit_callbacks array as follows:

<script type="text/javascript">
    /////////////////////////////////////////////////////////
    // Hook sample for CryptoWiz Controller pre-init event //
    /////////////////////////////////////////////////////////
    
    // Let's assume that these variables already exist in the DOM...
    var order_id   = 121564;
    var user_id    = 467897984561;
    var user_name  = 'John Doe';
    var user_email = 'johndoe@nowhere.com';
    
    // We'll also asume that the URL already contains some placeholders to replace with, E.G.:
    // https://blockchainfinancial.com/crypto_wiz/buttonizer/public_key/button_id
    //     ?entry_id={entry_id}
    //     &entry_data1={user_id}
    //     &entry_data3={user_name}
    //     &entry_data2={user_email}
    
    // First, we check if the callbacks array is undefined.
    // If so, we’ll init it.
    if ( typeof wpuni_mciwidget_preinit_callbacks === 'undefined' )
        wpuni_mciwidget_preinit_callbacks = [];
    
    // Here’s our hook:
    wpuni_mciwidget_preinit_callbacks[wpuni_mciwidget_preinit_callbacks.length] = function() {
        console.log('Running my custom CryptoWiz pre-init now!');
        
        // Let’s load all button links in an array
        var $all_links = jQuery(wpuni_mcwidget._buttonizer_selector);
        
        // Now let’s do something with them!
        $all_links.each(function() {
            var $link = $(this);
            var href  = $link.attr('href');
            
            console.log( 'Link URL before modification: %s', href );
            href = href.replace('{entry_id}',   encodeURI(order_id));
            href = href.replace('{user_id}',    encodeURI(user_id));
            href = href.replace('{user_name}',  encodeURI(user_name));
            href = href.replace('{user_email}', encodeURI(user_email));
            console.log( 'Link URL after modification: %s', href );
        });
    };

</script>

Post-init hook

This snippet will define a function that will run after the buttons have been rendered:

<script type="text/javascript">
    //////////////////////////////////////////////////////////
    // Hook sample for CryptoWiz Controller post-init event //
    //////////////////////////////////////////////////////////
    
    // First, we check if the callbacks array is undefined.
    // If so, we’ll init it.
    if ( typeof wpuni_mciwidget_postinit_callbacks === 'undefined' )
        wpuni_mciwidget_postinit_callbacks = [];
    
    // At this moment, all button links have been converted to buttons.
    // Here’s our hook:
    wpuni_mciwidget_postinit_callbacks[wpuni_mciwidget_postinit_callbacks.length] = function() {
        console.log('Running my custom CryptoWiz post-init now!');
        
        // Let’s load all button links in an array
        var $all_buttons = jQuery('.' + wpuni_mcwidget._default_selector_classname + '[converted_link]');
        
        // Now let’s do something with them!
        $all_buttons.each(function() {
            var $button = $(this);
            console.log(
                'Here is a button ~ id:%s caption: %s',
                $button.attr('button_id'),
                $button.attr('caption')
            );
        });
    };
 </script>

Remember: the hooks must be added before the invocation script, and preferably, this should be added at the end of the <body> while the hook snippets should be added somewhere on the <head>.

Further reading

Use cases

 The callback functionality

Tech Specs index

Analytics

Go back to the manual index