CSP Global Hosted by Bagelhost

Background.

CSP Global is an IT solutions company, that integrates the offerings of several brands into a cohesive system depending on their client's needs. They prepared a web design mockup for me to implement, but they also wanted their website to:

• Qualify their sales prospects.
• Make it easy for visitors to find specific brands or solutions.

Discussion with Project Stakeholders.

Based on their budget and time constraints, we settled on an "auto-complete" search bar (a.k.a. fuzzy search), and an enquiry form. Prior to the meeting, I found a few plugin options that seemed to fit the requirements, albeit at this point these options were untested.

Unsatisfactory Plugins.

After testing the plugins, they turned out to be too heavy-duty in what they tried to do, and had visible performance and usability issues. e.g. no caching of search results, so auto-complete would make expensive runtime database queries and take 2-3 seconds to respond.

Apart from that, the hundreds of customization options in the plugins' admin dashboard was complicated enough to make "Plugin User" a likely job title. This is unfortunately a common occurence in the WordPress world, but you get what you pay for.

So I wrote my own plugin instead.

I found a well-written Javascript fuzzy search library called Fuse.js and the enquiry form just needed a little bit of PHP, Javascript, and the wonderful Contact Form 7 plugin. So I ended up writing a WordPress plugin wrapper for all of these components, with performance and ease-of-use in mind.

The resultant code was all over the place given the rush I was in, but it did the job.

Some points to summarize how the plugin works:

• All product information is stored in a WordPress Custom Post.
• Whenever product information is updated, the admin clicks a "rebuild index" button within the dashboard, to update the search results cache.
• This cache is a JSON object that's loaded everywhere the search bar is, and is also used to populate the options on the enquiry form.
• The cache is stored and retrieved with the WordPress Options API, which natively supports JSON serialization/deserialization.

The Result.

Their search function loads blazingly fast, and their enquiry form is automatically updated whenever their product information is updated.

Search Bar

Enquiry Form