Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Complete example using flexible filter groups This example uses the {number_range_groups} {list_groups} {search_groups} variable pairs and selects the correct html based on the group type. You can add extra fields to this example and they should show up automatically.
{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" channel="clothes"
parse="inward"
url="/{segment_1}/{segment_2}/{product_type}/{size}/{colour}/{price}/{search}/#reefine"
}
<div class="reefine" id="reefine">
<div role="search">
<div class="reefine_search">
{search_groups} {filters}
<form method="post" class="{filter_active_class}">
<input type="hidden" name="XID" value="{XID_HASH}" /> <label
for="{group_name}">{label}</label> <input type="text"
id="{group_name}" name="{group_name}" placeholder="search"
value="{filter_title}" title="Search ({filter_quantity})" /> <input
type="submit" name="submit" value="Go" />
</form>
<!-- {url}{filter_active_boolean} -->
{/filters} {/search_groups}
</div>
<div class="reefine_sidebar">
<div class="reefine_active_filters">
<h3>Selected Criteria</h3>
<ul>
{active_groups}
<li><strong><a class="remove-filter"
href="{clear_url}">{label}:</a></strong></li> {filters}
<li class="{filter_active_class}"
aria-selected="{filter_active_boolean}"><a href="{url}">{filter_title}
({filter_quantity})</a></li>
<!-- {filter_min_value}{filter_max_value} -->
{/filters} {/active_groups}
</ul>
<p class="total_entries">{total_entries} items found</p>
</div>
<div class="reefine_filters">
{number_range_groups}
<h3 class="group_{group_name}">{label}</h3>
<form method="post" class="number_range">
<input type="hidden" name="XID" value="{XID_HASH}" /> {filters} <input
type="text" name="{group_name}_min" id="{group_name}_min"
placeholder="{filter_min}" value="{filter_min_value}"
aria-label="Minimum value" /> &mdash; <input type="text"
name="{group_name}_max" id="{group_name}_max"
placeholder="{filter_max}" value="{filter_max_value}"
aria-label="Maximum value" /> {/filters} <input type="submit"
name="submit" value="Go" />
</form>
{/number_range_groups} {list_groups}
<h3 class="group_{group_name}">{label}</h3>
<ul>
{filters}
<li class="{filter_active_class}"
aria-selected="{filter_active_boolean}"><a href="{url}">{filter_title}
({filter_quantity})</a></li> {/filters}
</ul>
{/list_groups}
</div>
</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>
</div>
{/exp:reefine}
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.