Skip to content

Instantly share code, notes, and snippets.

@wpsmith
Forked from lorenzocaum/new_gist_file.md
Created November 5, 2016 19:52
Show Gist options
  • Save wpsmith/82aad6c91a3186f7b7a7e2db5c4ae553 to your computer and use it in GitHub Desktop.
Save wpsmith/82aad6c91a3186f7b7a7e2db5c4ae553 to your computer and use it in GitHub Desktop.
Setup Kicksend's Mailcheck with Event Espresso 4's registration checkout page #optimization

This sample coding will add Mailcheck from Kicksend to your registration checkout page. It is helpful for preventing spelling errors in email addresses.

Step 1 - Setup Mailcheck resources

Download the Kicksend Mailcheck JavaScript file from here:

https://raw.githubusercontent.com/mailcheck/mailcheck/d25dc9a119ca844bb35b1baf341cca0a634e4ac9/src/mailcheck.min.js

Then upload the mailcheck.min.js file to your WordPress site. You can add it to this location using an SFTP or FTP client like FileZilla, Cyberduck, or Transmit:

/wp-content/uploads/espresso/js

You'll need to create the js folder above. This will then be the final installation location:

/wp-content/uploads/espresso/js/mailcheck.min.js

Step 2 - Add supporting coding

The sample coding in the next section can be added to your child theme’s functions.php file (do not include the opening php tag) or a site specific plugin:

http://eventespresso.com/wiki/create-site-specific-plugin-wordpress-site/

The value 123 in the sample coding should be changed to the page ID of your actual registration checkout page. This can be found by going to your WP dashboard and clicking on the registration checkout WordPress page. The ID appears at the end of the URL.

For example, if the ID for your registration checkout page was 567, then you should use that value in the sample coding instead of 123.

Here is a demo of how it appears on the registration checkout page for Event Espresso 4:

http://cl.ly/image/2K3W2j350D2S

Additional Notes

var domains in the sample coding in the next section holds an array (a grouping) of domains to check. Additional domains can be added to the array. For example, if you wanted to add myeventswebsite.com, then you would add a comma after the last entry (outlook.com), then quotes and add the domain between the quotes. Here is an overview of what that might look like:

var domains = ["yahoo.com", "google.com", "hotmail.com", "gmail.com", "me.com", "aol.com", "mac.com",
      "live.com", "comcast.net", "googlemail.com", "msn.com", "hotmail.co.uk", "yahoo.co.uk",
      "facebook.com", "verizon.net", "sbcglobal.net", "att.net", "gmx.com", "mail.com", "outlook.com","myeventswebsite.com"];
//* Load the Mailcheck JavaScript file into the header
function ee_mailcheck_registration_checkout_load_resources() {
if ( is_page( 123 ) ) {
?>
<script type="text/javascript" src="/wp-content/uploads/espresso/js/mailcheck.min.js"></script>
<?php
}
}
add_action('wp_head', 'ee_mailcheck_registration_checkout_load_resources');
//* Load the settings for Mailcheck into the footer
function ee_mailcheck_registration_checkout_load_settings() {
if ( is_page( 123 ) ) {
?>
<script type="text/javascript">
jQuery(document).ready(function($){
var domains = ["yahoo.com", "google.com", "hotmail.com", "gmail.com", "me.com", "aol.com", "mac.com",
"live.com", "comcast.net", "googlemail.com", "msn.com", "hotmail.co.uk", "yahoo.co.uk",
"facebook.com", "verizon.net", "sbcglobal.net", "att.net", "gmx.com", "mail.com", "outlook.com"];
var topLevelDomains = ["co.uk", "com", "net", "org", "info", "edu", "gov", "mil"];
// var superStringDistance = function(string1, string2) {
// string distance algorithm of your choosing
// }
var selector = 'input[id$=-email]';
$(selector).on('blur', function(){
$(this).mailcheck({
domains: domains, // optional
// secondLevelDomains: secondLevelDomains, // optional
topLevelDomains: topLevelDomains, // optional
// distanceFunction: superStringDistance, // optional
suggested: function(element, suggestion) {
var $parent = $(selector).parent();
$('.ee-required-text', $parent).remove();
$parent.append('<span class="ee-required-text">Did you mean <a href="#" class="ee-mailcheck">' + suggestion.full + '</a>?</span>');
},
empty: function(element) {
// callback code
}
});
});
$('a.ee-mailcheck').live('click', function(){
$(selector).val( $(this).html() );
$(this).parent().remove();
return false;
});
});
</script>
<?php
}
}
add_action('wp_footer', 'ee_mailcheck_registration_checkout_load_settings');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment