14 Oct 2013
Ridgemoor Supply had a product catalog site powered by an extensive database of product and supplier information. A robust CMS application allows Ridgemoor to update their supply catalog, and supply photos. While the site had rich interface comprised on HTML 5 and CSS styling, the SEO standings were being impacted by speed of the server application. Yet, providing a complete client-side solution and REST architecture would hinder the SEO results further.
ActiveEngine Software created a new application that consumed the product data via an API, retaining the current database schema and allowing for a web site launch with zero impact on the content suppliers.
The solution was to create a web service API that provided product data via REST calls. This was accomplished using ASP.Net WebAPI from Microsoft. The underlying components for fetching data remained unchanged.
A separate MVC 4 web application was created to become the face of the new web site. Since the payload from the REST calls was light, server side templating with Razor was selected to create the page content, thus preserving all SEO information. The look and feel was created using Twitter Bootstrap and jQuery. Full text search of the catalog products and suppliers by the site visitors was implemented using the jQuery plug-in DataTables.Net. Since the data resides on the page for the products, the search feature is extremely fast.
An Architecture That Allows For New Features
With a solid process for fetching and displaying data, the next challenge was to create a feature that would allow site visitors to create a quote by visiting each change, clicking and supplying the quantity. While a shopping cart solution may come to mind, this would have required that a more complex feature set be created on the server, with accounts, user profiles and the like. Instead, HTML 5 storage technology was used as the data store for collecting the product and quantity. Each page uses a jQuery framework KnockoutJS to create a simple and effective means of collecting items for a quote. The customer can search, and add the item to the quote from each product page. No additional web service was required other than an end point for submitting the quote and sending a subsequent email.