FadeurParts.be Technical (2) – A look at the front-end

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).

  1. 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…).
  2. 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:
    1. 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).
    2. 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.
    3. 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.
    4. 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.
  3. The native Prestashop breadcrumbs, although I’ve altered it a bit. More explanations in Controller Override.
  4. 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.
  5. 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 ».
  6. I’ve just replicated the page navigation on top of the products grid (by default, it’s only displayed on the bottom).
  7. Is the plain Prestashop display product catalog area. No changes there.