edetinternational.com

Project Details

Requirements

EDET International required a new modern website as their existing site was old and hard to navigate. The new site needed to convey a contemporary feel whilst still staying true to their existing brand. The site needed a content management system to allow the business to maintain dynamic data relating to fairs and also allow customers and potential customers to submit quote requests for new business.

Solution

A single page site was developed to ensure that the key business information was clearly set out and easily accessible. End users would not need to navigate around an unnecessary menu structure to find the information that they were looking for. WordPress was chosen as the CMS due to the ease at which multi language locales can be implemented and maintained. Although being primarily in French and English, new languages can be added in the future, quickly and easily without any code changes. A request form was included utilising ajax for form submission and image parsing.

Technologies Used

Interesting Problems

How to structure lots of Information 

After deciding on a SPA approach, it become clear that I had to find a way to present a lot of information in a small space with no navigation away from the home page. It needed to work responsively (a mobile first approach) and be easily maintained in the backend.

The information to be presented was a dynamic list of antique fairs per month with dates, times and links to external sites. I decided to use my favourite carousel library, slick.js and implement two, linked carousels. The first carouse l would allow the user to select the month of the year and the second carousel would display the fairs for the given month. The whole form would be controlled with a select box to specify a year.


This scales very nicely for small screens and requires nothing special to be implemented in stylesheets or javascript. Simply put, it just works: -

Ajax Image Processing

As a systems person when a client requests an "emailing" function, I'm more interested in what happens next after the email is received. Perhaps email isn't really solving the problem, maybe we have another opportunity to remove a human task in the business process. However in this case, it was decided that due to the volume of expected requests anything more than an email would probably be overkill. So, sending forms through ajax is nothing new however I had never been asked to send image data through the pipe before and had assumed that it was easy to do. HTML 5 does just that, makes it easy however, there were a few gotchyas that I needed to be aware of along the way.

As the target of the form in this case is a simple email sent to the company admin, I needed to send the images as attachments to the email. There are a few different components to this solution. First is the HTML form on the document. Next is the way the form is validated client side before being sent via ajax to the standard ajax handling in WordPress. Some server side validation is carried out before the email is compiled and sent out via SendGrid.

Enctype

In sending multiple images don't forget to include enctype in the form tag.

<form id="edet-request-form" class="row" enctype="multipart/form-data">
    // some form stuff in here

Input Type = File

When I used the input type = file tag there were a few things I did to try an make the user experince as best as possible. First, using this standard HTML5 tag will leverage the native browser file select functionality making it feel normal with which ever device you are using.

<div id="form-items">
    <fieldset class="form-item-details" id="form-item-1" data-ref="1">
        <div class="columns">             <input type="file" name="quote-form-upload-image[]" id="quote-form-upload-image-1" class="quote-form-uploader" data-multiple-caption="{count} files selected" multiple="multiple">             <label for="quote-form-upload-image-1" class="upload-button button" id="quote-form-upload-button-1" data-original-content=" _e('Upload Image', 'edettheme'); ?>"> _e('Upload Image', 'edettheme'); label>             <div class="remove-image">                 <div class="delete-image" id="delete-image-1"></div>             </div>         </div>         <div class="delete-me" id="delete-me-1"></div>     </fieldset> </div>

Here you can see that I've used an array declaration on the input name value, this allows the user to select multiple items in the upload. I've also used a variable {count} in the data value "multiple-caption". This is so that in the event that the user selects multiple items, we can count the number of items and display it back, thereby increasing the usability. Don't forget again to set the multiple attribute on the input tag. There is also a button to allow the user to delete the attached images.

A more in depth way to manage the user experience for this function would be to upload the images directly, parse them and show a thumbnail of each one (in a similar way to how images are uploaded to Facebook for example). This would allow individual file validation and would provide a superior interface however due to the size of the project, a simpler approach was favoured.

WordPress Ajax Handling

Making sure we stick to the WordPress way of handling ajax functionality, we send the ajax request to admin-ajax.php and register our handler in functions.php

//Send mail function
add_action('wp_ajax_send_request_email'array('Request_Email''send_request_email') );
add_action('wp_ajax_nopriv_send_request_email', array('Request_Email', 'send_request_email') );
add_filter('wp_mail_content_type'array('Request_Email''mail_content_type') );


class Request_Email {
    public static function send_request_email() {
        //stuff in here
    }
    public static function mail_content_type() {
        return "text/html";
    }
}

We can now loop through the php globals variable $_FILES, saving our uploaded image to secure temporary location, perform our validation, compile the email and then send.

// Check files array for files $_FILES[]
if (count($_FILES> 0) {
    //for each file input
    foreach ($_FILES as $file) {
        //test to see if the file input is a multiple or a single
        if (is_array($file['name'])) {
            //to handle multiple files in each file input
            for ($fileCount 0; $fileCount count($file['name']); $fileCount++) {
                if ($file['error'][$fileCount] == 0) {
                    $target_file = $target_dir . basename($file['name'][$fileCount]);
                    // Validation
                    // Error Handling
                }
            }
        }
    }
}            
// If all was okay then send the mail using WP Mail
$mail = wp_mail($to$subject$message$headers$attachments);

Not forgetting to get rid of those temp files when we're done!

// Delete files (unlink)
foreach ($_FILES as $file) {
    if (is_array($file['name'])) {
        for ($fileCount = 0$fileCount <= count($file['name']); $fileCount++) {
            unlink($file['tmp_name'][$fileCount]);
        }
    } else {
        unlink($file['tmp_name']);
    }
}
exit();


Send me an email at

hello@jongosling.com