Interactive Design Techniques

Bootstrap Dealer Locator 1Bootstrap Dealer Locator 2Bootstrap Dealer Locator 3Bootstrap Dealer Locator 4Bootstrap Dealer Locator 5

AgriLabs Bootstrap Dealer Locator

AgiLabs carries a specialty line of calf health products in over 800 store locations nation wide. We developed a custom web site for them to showcase these products, and one of the most important features they needed was a Dealer Locator. The one we developed fit nicely within their new site template, and it was programmed with HTML5/CSS3, Bootstrap 3, PHP5, Fuel-PHP Framework, and a MySQL database.

There were different ways to find the stores nearest to your location, but probably the coolest way was to click your state on the first map view that came up. This brought up an exploded view of your state showing the different store locations. In some cases there would be a cluster of stores in certain regions – too close to show in the current view. These were marked with different colored icons showing the number of stores in those particular locations. Clicking one of those icons gave a further exploded view of the store cluster in that area. Clicking one of the store markers would give more details and directions.

You could also type in your zip code or physical address of course, and that brought up a list of stores – starting with the one closest to your location first.

This application was responsive, so it worked great on mobile devices also. The micro site where this script was running has been pulled into their main site, so the Dealer Locator is no longer in use.

Share Your Comments