CSP Global Hosted by Bagelhost

Digesting business requirements and challenges, and developing solutions specifically for WordPress.

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