Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Complete example using separate filters. This example outputs each filter group in a separate tag pair rather than using the {list_groups}, {number_groups} etc. This is useful for customising the order, position and formatting of different filters.
<div class="reefine" id="reefine">
{exp:reefine filter:search:fields="title|product_type|colour"
filter:search:type="search" filter:price:fields="price"
filter:price:type="number_range"
filter:fields="product_type|size|colour|store_availability"
channel="clothes" parse="inward"
url="/{segment_1}/{segment_2}/{product_type}/{size}/{colour}/{store_availability}/{price}/{search}/#reefine"
seperate_filters="yes" }
<div class="reefine_search">
{search} {filters}
<form method="post">
<label for="{group_name}">Search</label> <input type="text"
id="{group_name}" name="{group_name}" placeholder="search"
value="{filter_title}" /> <input type="submit" name="submit"
value="Go" />
</form>
{/filters} {/search}
</div>
<div class="reefine_sidebar">
{if total_active_filters > 0}
<div class="reefine_active_filters">
<h3>Selected Criteria</h3>
<ul>
{active_groups} {if active_filters>0} {if type=='text'} {filters}
<!--{url}{filter_quantity}{filter_min_value}{filter_max_value}{filter_min}{filter_max}-->
{if filter_active}
<li class="active"><a href="{url}">{filter_title}
({filter_quantity})</a></li> {/if} {/filters} {if:else}
<li class="active"><a class="remove-filter" href="{clear_url}">
{filters} <!--{url}{filter_quantity}{filter_min_value}{filter_max_value}{filter_min}{filter_max}-->
{if filter_active}{if active_index>0},
{/if}{filter_title}{/if}{/filters}
</a></li> {/if} {/if} {/active_groups}
</ul>
<p class="total_entries">{total_entries} products available</p>
</div>
{/if}
<div class="reefine_filters">
{product_type}
<h3>Products</h3>
<ul>
{filters} {if filter_quantity > 0}
<li class="{if filter_active}active{if:else}inactive{/if}"><a
href="{url}">{filter_title} ({filter_quantity})</a></li> {/if}
{/filters}
</ul>
{/product_type} {size}
<h3>Size</h3>
<ul>
{filters} {if filter_quantity > 0}
<li class="{if filter_active}active{if:else}inactive{/if}"><a
href="{url}">{filter_title} ({filter_quantity})</a></li> {/if}
{/filters}
</ul>
{/size} {colour}
<h3>Colour</h3>
<ul>
{filters} {if filter_quantity > 0}
<li
class="{if filter_active}active{if:else}inactive{/if} colour_{filter_title}">
<a href="{url}">{filter_title} ({filter_quantity})</a>
</li> {/if} {/filters}
</ul>
{/colour} {price}
<form method="post">
<h3>Price between</h3>
{if active_filters > 0} <a href="{clear_url}">Clear</a><br /> {/if}
{filters} &pound; <input type="text" name="{group_name}_min"
placeholder="{filter_min}" value="{filter_min_value}"
style="width: 50px;" /> - &pound; <input type="text"
name="{group_name}_max" placeholder="{filter_max}"
value="{filter_max_value}" style="width: 50px;" /> {/filters} <input
type="submit" name="submit" value="Go" />
</form>
{/price} {store_availability}
<h3>Store</h3>
<ul>
{filters} {if filter_quantity > 0}
<li class="{if filter_active}active{if:else}inactive{/if}"><a
href="{url}">{filter_title} ({filter_quantity})</a></li> {/if}
{/filters}
</ul>
{/store_availability}
</div>
</div>
<div class="reefine_entries">
{entries} {if entry_ids=='-1'}
<p>No matching products found.</p>
{/if} {exp:channel:entries entry_id="{entry_ids}"
disable="categories|category_fields|member_data" dynamic="no"
orderby="title" sort="asc" status="not closed" limit="8"
paginate="yes"}
<div class="reefine_product size_{size}">
<div class="reefine_product_image">
<img src="{product_image}" alt="{title}" />
</div>
<div class="reefine_product_caption">
<a href="#"
onclick="alert('You clicked ' + this.textContent);return false;">{title}</a>
<div class="reefine_product_price">&pound;{price}</div>
</div>
<div class="reefine_product_links">
<a href="#">Buy Now</a> | <a href="#">Read More</a>
</div>
</div>
{paginate}
<div class="paging">Page {current_page} of {total_pages} pages
{pagination_links}</div>
{/paginate} {/exp:channel:entries} {/entries}
</div>
{/exp:reefine}
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.