How to trigger the notify component ?

Hey Mathieu,

Your approach isn't bad but you must make sure that your script load after jQuery and UIkit. If you don't want to add it in a file and have it inline, then I would suggest to use wp_add_inline_script() core function. Use uikit as the first argument which will ensure it loads after UIkit and therefore, after jQuery too 😉 Here is an example:

add_action( 'wp_enqueue_scripts', 'example_enqueue_assets' );

function example_enqueue_assets() {
 wp_add_inline_script( 'uikit', 'console.log( "Loading jQuery version " + jQuery.fn.jquery, "\nLoading UIkit version " + UIkit.version )' );
}

If you load the script above and look at your console, you will see that jQuery and UIkit are available (check your browser console and you will see that).

Hope that helps,

Hello Thierry,

Thanks a lot for pointing me in this direction. I've tried to trigger the notify component with wp_add_inline_script but it does not work. I'm probably not familiar enough with this function. 🙁

Maybe the best option, as you mentionned it, is to trigger the notify component not inline but via a separate file.

To do so, in my functions.php, I've added this (inspired from what I've seen in the functions.php of Banks Child Theme) :

// Enqueue uikit assets
beans_add_smart_action( 'beans_uikit_enqueue_scripts', 'docteo_enqueue_uikit_assets', 5 );

function docteo_enqueue_uikit_assets() {

    if ( is_buddypress () ) {

    // If it is a BuddyPress page, add the theme js as a uikit fragment
    beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/js/notify-set.js', 'js' );

    }

}

Then, in a folder called "js", in my theme, I've added a file with this (I've copied the snippet below from the UiKit notify component doc page) :

!(function( $ ) {

 $(function(){
            $("body").on("click", ".uk-button[data-message]", function(){
                UIkit.notify($(this).data());
            });
        })

} )( window.jQuery );

And it works ! But two problem remains :

• when I click on the button, the message appears twice ;
• I can't change the status message from its default appearance to, let's say, warning or success message. This, for instance, does not work : <button class="uk-button" data-message="This is a message." data-pos="bottom-left" status="success">Click me</button> : the notification looks the same.

Once again, thanks a lot, Thierry, for your help and your patience.

Mathieu