Once AIM was built, we needed a product to display the inventory that had been managed. The AutoConX Vertical (Responsive), or AVR, is a white-label product that allows publishers (newspaper or magazine) list inventory from sellers in their area. It’s a digital classified system that offers a lot of customization and flexibility.
This project was trickier than AIM because AIM was a brand new product. AVR, however, had to be a modern and responsive site that met all the publishers’ expectations from the legacy product. Publishers wouldn’t switch unless they saw real value in the new system. We had to build a product that we would put our own products on.
`js-` and to require those additional modules if the selector exists.
AVR benefits from a couple of special and reusable modules. One is the Carousel. In its simplest form, the Carousel is like a slideshow. It shows a configurable number of items at a time and offers back and next arrows to progress or regress. Optionally, an item counter and a thumbnail sheet can be defined that will update as the carousel changes. We use the Carousel in various homepage widgets (like Just In and our Diamond Ad) and on the details pages for listing photos. Each instance of Carousel is its own unique instance allowing many of them to exist on the same page at the same time without conflict.
Another special module, which is also employed on our homepage, is the Suggester. The Suggester enhances the homepage keyword search box in our Quick Search widget to give search suggestions to the user as they type. The suggestions themselves come from an XHR call to a special endpoint in our API. The endpoint returns an array of suggestions, and the Suggester renders them as HTML. A lot of work was done to nicely handle mouse and keyboard interactions. Users can use arrow and enter keys to select a suggestions, or they can point and click with their mouse or finger. Blurring focus or hitting escape will hide the suggestions.