Global Output Tags

• Output Tags Overview
• URL Output Tag
• SEO Output Tags
• Scroll Link
• Name Output Tag
• Link Output Tag
• Include JS
• Include CSS
• Header Output Tags
• GET Output Tags
• Faceted Navigation
• Customer Output Tags
• Cart Output Tags
• Business Output Tags
• Breadcrumb
• Asset URL

FLEX Documentation

• Introduction
• Code Overview
• Back Office
• Loops
• Global Output Tags
• Files
• AJAX
• Navigation
• Products
• Categories
• Pages
• Pagination
• Forms
• Checkout
• Search

Faceted Navigation, also called faceted search or faceted browsing, is a way for a user on the storefront to filter products based on filters. This allow for users to add or remove multiple filters within a category to find the product that matches their search criteria. Using a faceted system allows for these filters to span across any product attributes or product variations, categories or pricing ranges. 

Due to the complexity of faceted navigation, FLEX has simplified it by providing the html, links and functionality in one FLEX variable

Example:

{faceted_nav}

Output:

<section class="faceted-nav">
     <div class="faceted_category faceted_group">
          <h6 class="faceted_title">Category</h6>
               <div class="faceted_section">
                    <ul>
                         <li count="1" id="faceted_element_0" class="form_element_even faceted_element faceted_shirts_men">
                              <a class="faceted-link active" href="/products/shirts/">Shirts 
                                   <span class="count">(1)</span></a>
                         </li>
				<li count="0" id="faceted_element_1" class="form_element_odd faceted_element faceted_pants_men">
					<a class="faceted-link active" href="/products/pants-1/">Pants 
					<span class="count">(0)</span></a>
				</li>
			</ul>
		</div>
	</div>
	<div class="faceted_price faceted_group">
	<h6 class="faceted_title">Price</h6>
		<div class="faceted_section">
			<ul>
				<li count="1" id="faceted_element_0" class="form_element_even faceted_element faceted_price price_5">
					<a rel="nofollow" class="faceted-link" href="/products/men/?refine=true&price=20+-+">$20.00+
					 <span class="count">(1)</span></a>
				</li>
			</ul>
		</div>
	</div>
</section>

---

Facet Filter

With a faceted navigation, it is typical for a user to add or remove filters. This could be a column on top of the faceted naviation or maybe a horizontal bar on top of your page. The way FLEX lets you customize this on your website is by looping through a result facet.

{% if has_faceted %}
<h6>Refine Results <small><a href="{faceted_reset_url}">Clear All</a></small></h6>
<ul>
{% loop resultfacet %}<br>
<li>
	<a href="{resultfacet.filter_delete_url}">
		<span>{resultfacet.filter_name}</span>
	</a>
</li>
{% endloop resultfacet %}
</ul>
{% endif %}