Displaying Products By Category

Question

On the Store index page it will show all products and then there is a simple category menu so you can filter down by the 5 categories.

What is the best way to do this?

I was initially just going to use Javascript and filter by the class/category name of each div/product while still on the index page, however using the actual category URL should provide SEO benefits so would prefer to go this route.

However I'm unsure how to get it working. The below code works in the sense that it lists the categories and beneath it lists all the products, however when you click to go to a '/store/index/category' URL, the page still shows all the products. I'm unsure where to go from here. Obviosuly I need to wrap the exp:store tags in the exp:channel:categories tags but when I do it starts listing out multiple products like crazy. Documentation on the Exp:resso Store site isn't that thorough.

{exp:channel:categories channel="store"}
   <a href="{path='store/index/{category_url_title}'}">{category_name}</a><br>
{/exp:channel:categories}

{exp:store:search orderby="title" sort="asc"}
 {exp:store:product entry_id="{entry_id}"}

   <div class="product-item {categories}{category_url_title}{/categories}">
     <a href="{url_title_path='store/product'}">
      {store_images limit="1"}
       <img src="{product_image}" alt="{title}">
      {/store_images}
      <h2>{title}</h2>
      {if on_sale}
       <s class="pre-sale-price">{regular_price}</s>
       <span class="price">{price}</span>
      {if:else}
       <span class="price">{price}</span>
      {/if}
    </a>
   </div>

 {/exp:store:product}    
{/exp:store:search}

Answer 1

Edit: Hopefully this matches what you describe more closely...

Low Seg2Cat will help you out. http://gotolow.com/addons/low-seg2cat/docs

Ditch the {exp:store:search} tag.

{if "{last_segment_category_id}" == ""}
    {!--   List categories   --}
    {exp:channel:categories channel="store"}
       <a href="/store/{category_url_title}">{category_name}</a><br>
    {/exp:channel:categories}
{/if}

{!--   List either all products or specified category   --}
{exp:channel:entries 
                channel="store" 
                dynamic="no"
                limit="30"
                paginate="both" 
                disable="member_data"
                category="{last_segment_category_id}"}

{!--   Only show the category title on the first loop through (so it's at the top) - and only if a category is specified in the URL   --}
{if "{count}" == 1 && "{last_segment_category_id}" != ""}
  {categories limit="1"}<a href="/store/{category_url_title}">{category_name}</a><br>{/categories}
{/if}

  {exp:store:product entry_id="{entry_id}"}
   <div class="product-item {categories limit="1"}{category_url_title}{/categories}">
     <a href="/store/product/{url_title}">
      {store_images limit="1"}
       <img src="{product_image}" alt="{title}">
      {/store_images}
      <h2>{title}</h2>
      {if on_sale}
       <s class="pre-sale-price">{regular_price}</s>
       <span class="price">{price}</span>
      {if:else}
       <span class="price">{price}</span>
      {/if}
    </a>
   </div>
 {/exp:store:product}

{/exp:channel:entries}

Alternatively use this as the category parameter:

category="{segment_category_ids_piped}"

Remove the {if "{last_segment_category_id}" == ""} conditional around the categories listing if you want this to appear on every screen.

If you want pagination, make sure you look at the settings for low seg2cat as there's an option that will ensure that the pagination segment is ignored.

Also, assuming your template group is "store" and you're using the index template, you can just use this as your URL:

<a href="/store/{category_url_title}">

Instead of:

<a href="{path='store/index/{category_url_title}'}">{category_name}</a>

Which is a lot cleaner and simpler :)

Please note I've also changed your product URL to: <a href="/store/product/{url_title}">