I believe that it will make my explanations more clear if I just show you how it looks in the front end. Here is a screen shot of my Prestashop front-end. In other words, the result of the project.
You can see it in action at FadeurParts.be (username/password: prestashop/prestashop).
- Is just the plain Prestashop displayTop position. It contains two elements: the native Prestashop modules Main Menu and Search Bar (modules/ps_mainmenu and ps_searchbar). We may decide to remove the search bar as it doesn’t work as a customer would expect (ok, it works as a developer expects…).
- Is the displayNavFullWidth position to which I’ve hooked my module « Tractor search top bar » (pd_tsearchbar, all my modules begins with my initials, « pd_ »). This bar has four distinct areas:
- 2a. Displays the current filter: either no filter (whole catalog), a tractor model (« John Deere 6320 ») or « Standard/Din products » (all the products not specific to any tractor).
- 2b. Three links: « Whole Catalog » removes the current filter and display the whole catalog. « Standard/DIN products » filters the catalog to show only the standard products. « Browse Tractors » links to a page where all the tractor makes, series and models are listed.
- 2c. An alternative to the Browse tractors link. The user directly types in a model. This search box is derived from the Prestashop Search bar and is Ajax enabled. When the user hits return or selects a tractor model in the list, the catalog is filtered to show only compatible products.
- 2d. A search box where the customer can directly enter an OEM reference for a product. It’s not Ajax enabled. When he hits return, a list of products matching the reference is displayed.
- The native Prestashop breadcrumbs, although I’ve altered it a bit. More explanations in Controller Override.
- Is the displayLeft position to which I’ve hooked my module « Category Tree Links filtered by Tractor » (pd_tcnav). I made a copy of the ps_treeview module and made extensive changes to it. I will discuss the details of this module later.
- As far as I know, this is not a Prestashop position. I’ve just altered category.tpl to reduce the height of this area as we never display category description (although we should, for SEO) or image (themes/classic_pd_fadeur/templates/listing/category.tpl). More on this later in « Creating a child theme ».
- I’ve just replicated the page navigation on top of the products grid (by default, it’s only displayed on the bottom).
- Is the plain Prestashop display product catalog area. No changes there.