1

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}
2

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}">

| improve this answer | |
  • Hi thanks for the help, that looks great. Only problem is the URL it now tries to access for the category comes up as http://localhost/store/%7Bcategory_url_title/category/hair-care'%7D and obviously errors with The URI you submitted has disallowed characters.. Any reason why this would now not set the correct URL? If I set it to <a href="/store/{category_url_title}">, as you said then it shows the correct URL but no products on the page. – Dan Christian Jun 11 '13 at 21:47
  • Another problem seems to be that it shows a category, then a product item, then a category etc. I would have expected all categories to be listed with break tags at the top and then all products underneath. Can't see why it wouldn't do that? – Dan Christian Jun 11 '13 at 21:58
  • first URL, that's because you were using category_url_title and the {path=...} code. Admin -> Channel Admin -> Global Channel Prefs, turn "Use Category URL Titles In Links?" to No. Or alternatively use as I mentioned. The reason you're probably not getting products showing is because you haven't set dynamic="no" parameter in the channel:entries tag. It will loop through each product, therefore repeat the category title - I'll amend my code example. – Peter Lewis Jun 12 '13 at 8:43
  • Amazing, works perfectly. Thank you so much! – Dan Christian Jun 15 '13 at 15:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.