Lemonstand ajax search filter example

shop;search_filter_form.html

<section class="search-filter pull-left clearfix">

  <!-- FIND CATEGORY -->
  {% if selected_categories is not defined %}
    {% set my_cat = category ? method('Extensions320ny_Shop_Category', 'create').find_by_id(category.id) : ''%}
    {% set selected_categories = category ? [category.id] : [] %}
  {% endif %}

  <form id="search-filter" method="get" action="/search">
	<input type="hidden" name="query" value="{{ query ? query: '' }}">
  <select id="sorting-option" name="sorting">
    {% set sorting_options = {
    'relevance': 'Relevance',
    'name': 'Name',
    'name desc': 'Name desc',
    'price': 'Price',
    'price desc': 'Price desc',
    'created_at': 'Oldest first',
    'created_at desc': 'Newest first',
    'product_rating': 'Rating approved',
    'product_rating desc': 'Rating approved desc',
    'product_rating_all': 'Rating all',
    'product_rating_all desc': 'Rating all desc' } %}
    {% set current_sorting = sorting %}
    {% for sorting_col, sorting_name in sorting_options %}
    <option {{ option_state(current_sorting, sorting_col) }}
    value="{{ sorting_col }}">{{ sorting_name }}</option>
    {% endfor %}
</select>
  <!-- CATEGORIES -->
  	{% set categories = method('Shop_Category', 'create').list_root_children('front_end_sort_order') %}  
  	{% if categories.count %} 
  		{{ category ? "" : "<h4>Departments</h4>"}}
  	  <select id="category-select" style="display:none;" {{category ?  '':"multiple" }} name="categories[]">
    		{% for cat in categories %}
      		<option
      			{{ cat.id in selected_categories ? 'selected="selected"' : null }}
        			value="{{ cat.id }}">{{ cat.name }}</option>
    		{% endfor %}
    	</select>
    	{% if category is not defined %}
	    	{% for category in categories %}
	    	  	<span data-select="category-select" data-value="{{category.id}}" data-type="category"
			  	{{ category.id in selected_categories ? 'class="category-filter filter-option search-filter-selection"' : 'class="category-filter filter-option"' }} 
			  	>{{category.name}}</span>
	 		 {% endfor %}
      <br><br>
      {% endif %}
  	{% endif %}


  <!-- BRAND -->
    {% set manufacturers = category ? category.list_manufacturers() : method('Shop_Manufacturer', 'create').order('name').find_all() %}
  {{ manufacturers | length > 0 ? "<h4>Brand</h4>" : "" }} 	  


   {% set selected_manufacturers = selected_manufacturers ? selected_manufacturers : [] %}
  <select id="brand-select" class="search-filter-select" name="manufacturers[]" multiple style="display:none">
    {% for manufacturer in manufacturers %}
      <option class="brand-option"
        {{ manufacturer.id in selected_manufacturers ? 'selected="selected"' : null }}
        value="{{ manufacturer.id }}">{{ manufacturer.name }}</option>
    {% endfor %}
  </select>
  {% for manufacturer in manufacturers %}
  	<span data-select="brand-select" data-value="{{manufacturer.id}}" data-type="brand"
  	{{ manufacturer.id in selected_manufacturers ? 'class="brand-filter filter-option search-filter-selection"' : 'class="brand-filter filter-option"' }} 
  	>{{manufacturer.name}}</span>
  {% endfor %}
  <br><br>


  <!-- SIZE -->
    {% set option_values = category ? my_cat.list_unique_product_option_values('Size') : method('Shop_CustomAttribute','list_unique_values','Size') %}
  {{ option_values | length > 0 ? "<h4>Size</h4>" : "" }} 

  {% set selected_size = selected_options['Size'] ? selected_options['Size'] : [] %}

  <input type="hidden" name="option_names[]" value="Size"/>
  <select style="display:none" id="size-select" class="search-filter-select" name="option_values[]">
  	<option value=""><strong>Choose Size</strong></option>
    {% for value in option_values %}
      <option
        {{ option_state(value, attribute(selected_options, 'Size')) }}
        value="{{ value }}">{{ value }}</option>
    {% endfor %}
  </select>
  	{% for value in option_values %}
  		<span id="{{value}}" data-value="{{value}}" data-select="size-select" {{ selected_size == value ? 'class="filter-option size-option search-filter-selection"' : 'class="filter-option size-option"' }}>{{value}}</span>
  	{% endfor %}
  <br><br>

  <!-- PRICE -->
  <h4>Price</h4> 
  <span {{ max_price == 20 ? 'class="price-option filter-option search-filter-selection"' : 'class="price-option filter-option"' }} data-min="0" data-max="20" name="price">$0 to $20</span>
  <span {{ max_price == 40 ? 'class="price-option filter-option search-filter-selection"' : 'class="price-option filter-option"' }} data-min="20" data-max="40" name="price">$20 to $40</span>
  <span {{ max_price == 100 ? 'class="price-option filter-option search-filter-selection"' : 'class="price-option filter-option"' }} data-min="40" data-max="100" name="price">$40 to $100</span>
  <span {{ max_price == 200 ? 'class="price-option filter-option search-filter-selection"' : 'class="price-option filter-option"' }} data-min="101" data-max="200" name="price">$101 to $200</span>

  <input type="hidden" id="price-min" value="{{ min_price }}" name="min_price"/>
  <input type="hidden" id="price-max" value="{{ max_price }}" name="max_price"/>

  <br><br>

  <!-- COLOR -->
  <section class="search-filter-color">
  {% set option_values =  category ? my_cat.list_unique_product_option_values("Color") : method('Shop_CustomAttribute','list_unique_values','Color') %}
  {{ option_values|length > 0 ? "<h4>Color</h4>" : "" }}

    {% set selected_color = selected_options["Color"] ? selected_options["Color"] : [] %}
    <input type="hidden" name="option_names[]" value="Color"/>
    <select id="color-select" class="search-filter-select" name="option_values[]" style="display:none;">
    <option value=""></option>
    {% for value in option_values %}
        <option
          {{ option_state(value, attribute(selected_options, 'Color')) }}
          value="{{ value }}">{{ value }}</option>
    {% endfor %}
    </select>
    {% for value in option_values %}
   	<span data-select="color-select" data-value={{value}} {{ selected_color == value ? 'class="color-option color-square color-selected"': 'class="color-square color-option"'}} id="{{value[1:8]}}" style="background-color: {{value}};"></span>
    {% endfor %}
  </section><!-- end search-filter-color -->

  <!--<input class="btn" type="submit" value="Search" />-->

  </form>

</section><!-- end search-filter -->