Implementation Spotlight: ShowMeTheParts.com
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.
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.
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.
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.
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.
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.
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.