Western CPE has hundreds of courses available for purchase. The course catalog is a single-page application for browsing them.
As the central component of the website, it is one view linking to hundreds of courses, so it had to perform in terms of usability, flexibility and SEO.
The catalog was built as a JavaScript-centric application using API services and Handlebars templates. It included filters that updated through adjacent API requests to limit options based on results, and a comprehensive search. Grid, list and calendar views provided customization based on user preference and catalog placement. Page state was prioritized to support browser history and permalinks. A "hijax" approach let search engine spiders reach the complete course list and their corresponding course links, so the AJAX nature of the catalog did not compromise indexing.
The same catalog view was reused for targeted filtering elsewhere on the site — instructor pages, for example, listed that instructor's courses through it. It was the route by which the majority of customers found and bought their CPE.
As the central component of the website, it is one view linking to hundreds of courses, so it had to perform in terms of usability, flexibility and SEO.
The catalog was built as a JavaScript-centric application using API services and Handlebars templates. It included filters that updated through adjacent API requests to limit options based on results, and a comprehensive search. Grid, list and calendar views provided customization based on user preference and catalog placement. Page state was prioritized to support browser history and permalinks. A "hijax" approach let search engine spiders reach the complete course list and their corresponding course links, so the AJAX nature of the catalog did not compromise indexing.
The same catalog view was reused for targeted filtering elsewhere on the site — instructor pages, for example, listed that instructor's courses through it. It was the route by which the majority of customers found and bought their CPE.