Motor State Parts Catalog Viewer

Each year Motor State Distributing publishes several product catalogs, focusing on different segments of the performance aftermarket. Motor State wanted a way to upload their product catalog PDFs and display them on their site, as well as the online stores for dozens of their dealers. There were two parts to this project: the administrative catalog management system (PHP & Mysql) and the catalog viewer. The catalog viewer is one of the very few sites where I designed the layout and styling, though I’m not sure I should admit that. I also wrote the client-side scripting using Javascript, JQuery, and a heavy dose of AJAX.

Each catalog contains between 200 and 450 pages. Each page is represented by two images, a default lower resolution and a zoomable and pannable high resolution image. Most pages in the catalog contain anywhere from a dozen to a couple hundred products. Each product has an assortment of data associated with it (e.g. SKU, price, name, availability, etc.). A single catalog-worth of data weighs a little over one megabyte. Needless to say, this is a lot of data to transmit all at once for such an application, not to mention loading all this data into browser memory is prone to performance issues. It was necessary to make heavy use of AJAX, loading the data in smaller chunks as the user clicks around the catalog. Each page view retrieves only the necessary information to render the page, the catalog image and product list. As the user hovers over the SKU list on the right the tooltip data is requested through an AJAX call. The search and browse tabs all function in a similar manner, using AJAX to retrieve the requested content as the user searches or clicks on a filter button.

The tabbed interface and event handling is done using JQuery and JQuery UI. While the interface seems very simple, there is a surprising amount of event handlers, from the zoom and pan feature on the catalog page, the hover actions on the SKU list, the page navigation buttons and dropdown, to the alphabetic filters on the browse lists, and the hover events on the individual page results. Because the entire catalog is built on a single page with no refreshes needed, product searches can be carried from search tab to catalog tab without having to use cookies or pass variables around in the query string.

Related Page: 2010 Hot Rod Parts and Accessories