Sencha Inc. | HTML5 Apps

Blog

Implementation Spotlight: ShowMeTheParts.com

September 13, 2010 | Jay Robinson

Have you ever needed to find a part for your car? Cycle Consulting, Inc. and Vertical Development, Inc. collaborated to build “ShowMeTheParts” – a browser-based application for use by automotive parts manufacturers, distributors, retailers, or consumers that provides access to automotive parts data. The application design goals were intelligence, ease of use, fast performance, remote configuration, and customizable color, style, or themes. Cycle Consulting, Inc. has expertise in custom software development specializing in database and web application development using leading edge tools, most notably the Ext JS JavaScript framework. Vertical Development, Inc. brought expertise in aggregating automotive parts catalog data and disseminating it using custom database applications.

“After reviewing the design, functionality, direction, documentation, and supporting user community of various JavaScript frameworks, we chose Ext JS.”

Why We Chose the Ext JS Framework

We chose Ext JS because of the overall design, component architecture, and robust handling of data along with the flexible and powerful grid and associated components. Plus, the detail of the Ext JS API documentation and the thorough list of examples made Ext JS the best choice.

Basic Functionality and Usage

The basic function of ShowMeTheParts is to allow a user to search for one or more automotive parts using specific criteria. The application performs a search in an automotive parts catalog database and returns the results in a grid control.

Search results based on an Application (Year, Make, Model, Product, and Engine) search
Search results based on an Application (Year, Make, Model, Product, and Engine) search

ShowMeTheParts has several features that make it fast and easy to perform searches and narrow the results: drop down pick lists are based on the user’s selection, lists in a series are automatically expanded, and if the list has only one item it’s selected automatically and focus is transferred to the next list in the series. This intelligent behavior is a result of using Ext JS components and the robust event model.

ShowMeTheParts also provides a filter condition which is based on the data that the user retrieved.

Filter menu based on the current search results
Filter menu based on the current search results

Users can filter their search results using a new dynamic filter menu that is attached to the grid column header context menu. Users select values for the filter condition from the menu and “Activate”, “Deactivate”, or “Refresh” the filter condition. The filter condition values are retrieved from the search results, so users can easily specify a valid filter condition. Also, the columns in the grid that support filtering are identified with a small magnifying glass icon; clicking on the magnifying glass icon displays the filter menu. To implement this functionality, we extended the Ext JS grid component using the excellent documentation.

After finding a part, users can display the detail information, which may include one or more images. Users can navigate the images using the thumbnails and make them larger or smaller. We used the powerful template and data view classes in the Ext JS framework to build this feature.

Part detail dialog with images of the part and detail information about the part.
Part detail dialog with images of the part and detail information about the part.

Configuration and Custom Branding

We wanted the flexibility to change the configuration and deployment of ShowMeTheParts without altering the source code or impacting performance. We created configuration settings that are retrieved at runtime to alter features, functionality, and behavior. When the site is deployed, a configuration utility saves settings persistent storage on the Web server. As a result, application functionality and data can be tailored specifically to the user’s needs.

Search results based on an Exhaust (Year, Make, Model, Engine, and Qualifier) search
Search results based on an Exhaust (Year, Make, Model, Engine, and Qualifier) search

We also wanted to modify colors and styles easily for use of corporate colors or logos. The Ext JS framework allowed us to use a custom theme to match the “branding” for a particular implementation. Also, the recent separation of the style sheets in Ext JS 3.0 into visual and structural elements made it even simpler. Currently, there are nearly 100 custom implementations. Some examples:

A more extensive list is available on the Vertical Development, Inc. website.

Shopping Cart and Third Party Shopping Cart Integration

In the first version of ShowMeTheParts, users had to purchase from the manufacturer’s or retailer’s e-commerce site. Adding shopping cart functionality to ShowMeTheParts quickly became a priority. We extended the configuration settings functionality to enable dynamic configuration of the shopping cart functionality, integrating ShowMeTheParts with external shopping carts resulting in efficient handling of e-commerce transactions.

Internal application shopping cart populated with parts to purchase.
Internal application shopping cart populated with parts to purchase.

Google Maps and “Where To Buy” Functionality

Some users want to get parts from a local vendor, so we integrated Google Maps making it easy to find location and contact information. In most cases, the list of local vendors will be displayed on the Google Map with their detail information displayed in the grid below. When street address information isn’t available, the vendor information appears only in the grid.

Purchase locations of local retailers who sell the specified part.
Purchase locations of local retailers who sell the specified part.

Final Thoughts

ShowMeTheParts usage has grown significantly. Last month, we had over 500,000 unique visits and over 1.5 million database queries. It’s currently free, so give it a try. Without registering, you can search for parts from 1996-2000. For more extensive searches, you can register for a login, so you can access the full functionality.

There are 11 responses. Add yours.

AwesomeBob

4 years ago

I think we’ve already seen this before…

Jay Robinson

4 years ago

AwesomeBob, our newsletter subscribers get access to advanced content. Lucky you!

Alessandro Giannone

4 years ago

Hi Jay,

How can I get in touch with you regarding our product SambaJAM which is built with GXT?

If you’d like, I could give you a demo walkthrough and tell you more about what we’ve done and what we are planning on doing.

Kind Regards,
Alessandro

AwesomeBob

4 years ago

Good to know!

Imran

4 years ago

Good Job

Giovani

4 years ago

Nice….
What should I do if I want to submit a system built on EXTJS to be featured on this BLOG?

Oscar Flor

4 years ago

Is a nice web application….

Loiane

4 years ago

Nice!

Jay Robinson

4 years ago

You can always try to contact us at http://www.sencha.com/contact/ We’ll. see what we can do!

Jordan

4 years ago

I guess this is a very innovative thought from your side. Really appreciate your efforts to share all these info here because I was looking for this info for a long time. Even though I came across some interesting posts, it wasn’t informative enough and I was lacking a clear picture. But your post surely gave me that necessary clear picture.

Boss

3 years ago

Son of a gun, this is so hlefpul!

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.