Displaying entries based on selected category

Question

I am sure this is possible but not sure how to do this..

My site contains three 'Product' channels: HAIR, NAILS, BEAUTY.

There is also three category groups, HAIR, NAILS, BEAUTY. (Each group relates to the relevant channel noted above.)
Within each group, there is a list of related categories (brands).

There are multiple entries (products) within the site, each product having a brand (category). (There can obviously be more than one product with the same brand).

I have three page templates:

Product Range Hair - being: site.com/product-range/hair
Product Range Nails - being: site.com/product-range/nails
Product Range Beauty - being: site.com/product-range/beauty

Each one of those pages displays ALL of the products (entries) from the related channel. Now down the side of each page, it displays the entire list of brands (categories) that relate to that channel.

What I want is to make each one of these brands a link, which when clicked will change the products displayed to only show those of that brand. (Layout remains the same.)

It would be great if the URL could also change, eg.
site.com/product-range/hair/brand1
site.com/product-range/hair/brand5

(however that is not really necessary, would just be nice.)

Code that displays all HAIR products (one after another)

{exp:channel:entries channel="hprod"}
<img src="{h_img}" />
<h3>{title}</h3>
{categories}<h4>{category_url_title}</h4>{/categories}
{h_desc}
{/exp:channel:entries}

My current code that displays all the related HAIR brands
(I am using the GWCODE add-on that displays the number of products in each brand.)

{exp:gwcode_categories channel="hprod" entry_count="yes" style="linear"}
<p><a href="hair/{cat_url_title}" title="{cat_name}">{cat_name}</a> ({entry_count})</p>
{/exp:gwcode_categories}

The href shown is how i would like it to work, but once again that does not matter. All I want is for the link to change the product entries displayed on the page, to change and only display those of the selected brand.

ANY HELP IS APPRECIATED!

Answer 1

you can use this plugin http://gotolow.com/addons/low-seg2cat , so your code will be:

{exp:channel:entries channel="hprod" category="{last_segment_category_id}"}
<img src="{h_img}" />
<h3>{title}</h3>
{categories}<h4>{category_url_title}</h4>{/categories}
{h_desc}
{/exp:channel:entries}

Regard's.

Answer 2

Shouldn't need an addon here. Try this approach:

{exp:channel:entries channel="hprod"}
  <img src="{h_img}" />
  <h3>{title}</h3>
   {categories}
     <h4><a href="{path='product-range/hair'}">{category_name}</h4>
   {/categories}
  {h_desc}
{/exp:channel:entries}

I've a tutorial on working with EE categories on Train-ee: http://www.train-ee.com/courseware/free-tutorials/comments/working-with-categories/ - but basically the path linking variable is smart, and knows to create category links when used inside a category loop.

The only reason I would use the Seg2Cat addon is if you don't want EE's native /category/ segment in the URL.