140 people in the never sign up plugin is somewhat holding up but still missing some features.
Among its functions is the one that customizes the profile page for some users making it look like an extended subscription form.
Looking like a form people expects it to behave like one and is taken aback by its mute success and lousy failure messages.
Short story long this means that a success confirm dialog is mandatory to reassure users about profile details success.
Going with the hooks
Using the Deubg Bar plugin and its Actions and Filters add-on I take a look to what happens when on the user profile page and hook a conditioned load into the admin_init
hook
$this->functions->add_action('admin_init', array(
$this,
'maybeLoadDataUpdateConfirmationDialogMarkupAndScripts'
));
Here you can see I’m using my Adapter Classes plugin as a base but still the code is not that difficult to understand.
The method itself
public function maybeLoadDataUpdateConfirmationDialogMarkupAndScripts()
{
if (!$this->isUserTarget()) {
return false;
}
if (!$this->userComesFromProfile()) {
return false;
}
$this->functions->add_action('show_user_profile', array(
$this,
'appendDataUpdateConfirmationDialog'
));
// $this->appendDataUpdateConfirmationDialog();
$this->enqueueDataUpdateConfirmationDialogScript();
return true;
}
It uses two utility method to check that the user has the target role (in the code below hardocoded for simplicity)
public function isUserTarget()
{
$roles = array(
'member',
'subscriber'
);
foreach ($roles as $role) {
if (membersignup_User_Role_Checker::is_user_of_role($role)) {
return true;
}
}
return false;
}
And, to avoid showing the jQuery confirmation dialog anytime a user accesses his profile, that the user comes from the profile page
public function userComesFromProfile()
{
$httpReferer = $this->functions->wp_get_referer();
if (false === strpos($httpReferer, 'profile.php')) {
return false;
}
return true;
}
The two conditionals stand to make sure that the dialog only appears when a user is taken back to the profile page after having either inserted data for the first time or having updated them.
To differentiate message from a first insertion and a later update of data I hook into the personal_options_update
hook
$this->functions->add_action('personal_options_update', array(
$this,
'setFirstCompile'
));
to set a value that tells me this is not the first time the user accesses his profile. The hook is fired when the user clicks the Update
button for the first time making it a one time alone trigger
public function setFirstCompile()
{
$userId = $this->functions->get_current_user_id();
$key = 'firstCompile';
$this->functions->update_user_meta($userId, $key, 'no');
}
that value is checked, in fact, in the function that will append the dialog markup code to the profile page
public function appendDataUpdateConfirmationDialog()
{
$confirmationDialogTitle = $this->functions->esc_html('Data saved');
$updateMessage = $this->functions->esc_html('Updates saved, thank you.');
$firstEntryMessage = $this->functions->esc_html("Data has been saved into the database, thank you.\nCome back any time to update.");
$confirmationDialogMessage = null;
// if it's the first time the user fill his profile then differentiate the message
if ($this->isUserFirstCompilation()) {
$confirmationDialogMessage = $firstEntryMessage;
}
else {
$confirmationDialogMessage = $updateMessage;
}
// include the view
include_once (MEMBERSIGNUP_PLUGIN_DIRPATH . 'includes/views/userDataUpdateConfirmationDialog.php');
return true;
}
Another functions, finally, loads the required script and styles into the page
public function enqueueDataUpdateConfirmationDialogScript()
{
// register the script
$src = MEMBERSIGNUP_PLUGIN_URL . 'assets/js/modalUserDataUpdateConfirmation.min.js';
$handle = 'modalConfirmation';
$this->functions->wp_register_script($handle, $src, array(
'jquery-ui-dialog'
));
// enqueue the script
$this->functions->wp_enqueue_script($handle);
// enqueue WordPress default dialog style
$this->functions->wp_enqueue_style('dialogStyle', k'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');
$this->functions->wp_enqueue_style('wp-jquery-ui-dialog');
return true;
}
The jQuery script is of the trivial sort
jQuery(document).ready(function($) {
$( "#membersignupDataUpdateConfirmationDialog" ).dialog({
modal: true,
buttons: {
Chiudi: function() {
$( this ).dialog( "close" );
}
}
});
});
The final result, after the user has updated his data, is this [caption id=“attachment_381” align=“aligncenter” width=“742”] Updates saved, thank you.[/caption]