Filters 2.0

Filters

Filters are used to apply filtered search results, either via a standard form GET, or asynchronously via a javascript event callback.

Filters get pre-populated based on the selection on page load, they also get pre-populated to the object that is sent to the server as ajax request.

Standard multi-select filters

Multi-select filters use hidden checkboxes to select filters to apply.

The link wrapping the checkbox has several data attributes and an href that must be applied:

// href          // This should be the filter slug path that will be used by bot user agents.
// data-filter-anchor // This is used by the js to target anchors".

The containing <ul> also requires a data-category set to the category slug value and a data-filter-category-container attribute.

Collapsible

The new Filters use the Collapsible feature which is a part of the PL in the content modules section and puts all the filter inside the collapsible headings

Multi-select filters and Single-select filters

Both the multi-select and single select filters are handled similarly as in they both have the same attributes applied.

Below is the partial template used for these filter inputs inside a loop:

<% if custom_template === false %>
<a href="/<%= filter_slug %>" data-filter-anchor>

  <input type="<%= type %>"
         class="hide" id="filter-input-<%= filter_id %>" name="<%= category_slug %>"
         value="<%= filter_slug %>"
         <%=custom_input_attr%>
         <%=filter_slug === 'none' ? 'checked' : ''%>
  />
  <label class="<%= type %>-label <%= type %>-label-left" for="filter-<%= filter_id %>">
    <span class="fake-<%= type %> icon icon-<%= type %>"></span>
    <%= filter_name %>
  </label>
</a>
<% end %>

Below is an example of local variables passed on to the above partial:

<%= partial('_partials/_filters_2/filters_input',
            :locals => {  :category_slug => f[:slug],
                          :filter_slug => t[:slug],
                          :filter_id => t[:id],
                          :filter_name => t[:name],
                          :is_radio => f[:is_radio],
                          :type => f[:is_radio] ? "radio" : "checkbox",
                          :custom_template => false,
                          :custom_input_attr => ''
                          })
%>

Note: The custom_input_attr is used for custom cases, for instance if you pass a value of data-no-selection to it, the input will not be considered as a selection even if it is selected. This is useful in case of "None" selections. This input will be discounted from all the input counts as well.

Color Selection Filters (Custom Filter type)

Color selection filters are custom type and use a flag in the ruby object custom_type: "color" which is used by the loop to determine which code to output.

Below is a partial example for a color selection input

<% if custom_template === 'color' %>
<a href="/<%= filter_slug %>" data-filter-anchor>
  <input type="checkbox" class="hide" id="<%= filter_id %>" value="<%= filter_slug %>" name="<%= category_slug %>" checked>
  <label class="checkbox" for="<%= filter_id %>"></label>
</a>
<% end %>

Below is an example of locals passed to the partial:

<%= partial('_partials/_filters_2/filters_input',
            :locals => {  :category_slug => f[:slug],
                          :filter_slug => t[:slug],
                          :filter_id => t[:id],
                          :filter_name => t[:name],
                          :is_radio => f[:is_radio],
                          :type => f[:is_radio] ? "radio" : "checkbox",
                          :random_number => random_number,
                          :custom_template => 'color',
                          :custom_input_attr => ''
            })
%>

The filters are responsive and work on the <768 and >768 breakpoints for mobile and desktop respectively.

Below is an example using a Ruby object of categories, filters and custom filter type and conditionally rendering single and multi selects, the radio filters will have a none option in addition to the other radio options in the filter:

<%

   filters = [
     {
       name: "Train Length",
       id:   "135",
       slug: "train-length-radio-filters",
       is_radio: true,
       terms: [
         { slug: "cathedral", name: "Cathedral", id: "123" },
         { slug: "chapel", name: "Chapel", id: "456" },
         { slug: "court", name: "Court", id: "789" },
         { slug: "semi-cathedral", name: "Semi-Cathedral", id: "7891011" },
         { slug: "sweep", name: "Sweep", id: "789101112" }
       ]
     },
     {
       name: "Wedding Categories",
       id:   "246",
       slug: "wedding-categories-checkbox-filters",
       is_radio: false,
       terms: [
         { slug: "bar-drinks", name: "Bar + Drinks", id: "012"},
         { slug: "beauty", name: "Beauty", id: "345"},
         { slug: "cakes-desserts", name: "Cakes + Desserts", id: "678"},
         { slug: "decorations-accents", name: "Decorations + Accents", id: "6789"},
         { slug: "destination-weddings", name: "Destination Weddings", id: "67810"},
         { slug: "fashion", name: "Fashion", id: "67811"},
         { slug: "flower-arrangements", name: "Flower Arrangements", id: "67812"},
         { slug: "food-catering", name: "Food + Catering", id: "67813"}
       ]
     },           {
       name: "Neckline",
       id:   "2462",
       slug: "neckline-filters-radio",
       is_radio: true,
       terms: [
         { slug: "bateau", name: "Bateau", id: "0122"},
         { slug: "halter", name: "Halter", id: "3452"},
         { slug: "off-the-shoulder", name: "Off-the-Shoulder", id: "6782"},
         { slug: "one-shoulder", name: "One-Shoulder", id: "67821"},
         { slug: "scoop", name: "Scoop", id: "67822"},
         { slug: "square", name: "Square", id: "67823"},
         { slug: "strapless", name: "Strapless", id: "67824"},
         { slug: "sweetheart", name: "Sweetheart", id: "67825"},
         { slug: "v-neck", name: "V-neck", id: "67826"},
         { slug: "illusion", name: "Illusion", id: "67827"}
       ]
     },
     {
       name: "Color Selection filters",
       id:   "357",
       slug: "color-selection-filters",
       is_radio: false,
       custom_type: "color",
       terms: [
         { slug:"filter-color-white", name:"white", id:"swatch-white" },
         { slug:"filter-color-ivory", name:"ivory", id:"swatch-ivory" },
         { slug:"filter-color-gray", name:"gray", id:"swatch-gray" },
         { slug:"filter-color-silver", name:"silver", id:"swatch-silver" },
         { slug:"filter-color-black", name:"black", id:"swatch-black" },
         { slug:"filter-color-brown", name:"brown", id:"swatch-brown" },
         { slug:"filter-color-yellow", name:"yellow", id:"swatch-yellow" },
         { slug:"filter-color-gold", name:"gold", id:"swatch-gold" },
         { slug:"filter-color-orange", name:"orange", id:"swatch-orange" },
         { slug:"filter-color-red", name:"red", id:"swatch-red" },
         { slug:"filter-color-pink", name:"pink", id:"swatch-pink" },
         { slug:"filter-color-purple", name:"purple", id:"swatch-purple" },
         { slug:"filter-color-blue", name:"blue", id:"swatch-blue" },
         { slug:"filter-color-green", name:"green", id:"swatch-green" }
       ]
     }
   ]
   random_number = rand(100..10000)
%>

<!-- Filters 2.0 -->
<div class="container container-flush">
  <h1 id="filters-doc" style="margin-bottom:50px;">Filters v2.0</h1>
  <div class="col-lg-4 col-md-4 col-sm-12 filters-form-container">
    <form accept-charset="UTF-8" action="/marketplace/vendors" method="get" data-async data-filters-form>

      <div data-filter-actions>
        <p data-cta-filter-count>FILTERS</p>
        <hr />
        <div class="row-col-xs-6 row cta-button-row">
          <div class="col-xs-6">
            <a class="btn btn-primary btn-block" href="#" data-apply disabled>
              <span class="filters-apply-text">Apply</span>
            </a>
          </div>
          <div class="col-xs-6">
            <a class="btn btn-alternate btn-block" href="#" data-clear disabled>
              Clear
            </a>
          </div>
        </div>
      </div>

      <div class="panel-group" id="filters-accordion" data-filters-accordion>
        <% filters.each do |f| %>
          <div class="panel">
            <div class="panel-heading">
              <a data-toggle="collapse" data-parent="#filters-accordion" href="#<%= f[:slug] %>" class="collapsed">
                <h2 class="panel-title">
                  <%= f[:name] %>
                  <span class="content value" data-selected-filters></span>
                </h2>
              </a>
            </div>

            <div id="<%= f[:slug] %>" class="panel-collapse collapse filter-panel">
                <% if f[:custom_type] && f[:custom_type] === "color" %>
                  <ul class="color-selection panel-body" data-category="<%= f[:slug] %>" data-filter-category-container>
                    <% f[:terms].each do |t| %>
                      <li class="color-swatch <%= t[:name] %>" data-display-id="1804">
                        <%= partial('_partials/_filters_2/filters_input',
                                    :locals => {  :category_slug => f[:slug],
                                                  :filter_slug => t[:slug],
                                                  :filter_id => t[:id],
                                                  :filter_name => t[:name],
                                                  :is_radio => f[:is_radio],
                                                  :type => f[:is_radio] ? "radio" : "checkbox",
                                                  :random_number => random_number,
                                                  :custom_template => 'color',
                                                  :custom_input_attr => ''
                                    })
                        %>
                      </li>
                    <% end %>
                  </ul>
                <% else %>
                  <ul class="xs-lg-divider list-unstyled panel-body" data-category="<%= f[:slug] %>" data-filter-category-container>
                    <% if f[:is_radio]%>
                      <li data-display-id="none-radio">
                        <%= partial('_partials/_filters_2/filters_input',
                                    :locals => {  :category_slug => f[:slug],
                                                  :filter_slug => 'none',
                                                  :filter_id => random_number,
                                                  :filter_name => 'Any',
                                                  :is_radio => f[:is_radio],
                                                  :type => f[:is_radio] ? "radio" : "checkbox",
                                                  :random_number => random_number,
                                                  :custom_template => false,
                                                  :custom_input_attr => 'data-no-selection'

                                                  #data-no-selection attribute shouldn't be changed, this is used in the js
                                                  # to determine that the 'none', 'all' or 'any' selection should not count
                                                  # as a selection.
                                    })
                        %>
                      </li>
                    <% end %>
                    <% f[:terms].each do |t| %>
                      <li data-display-id="1804">

                        <%= partial('_partials/_filters_2/filters_input',
                                    :locals => {  :category_slug => f[:slug],
                                                  :filter_slug => t[:slug],
                                                  :filter_id => t[:id],
                                                  :filter_name => t[:name],
                                                  :is_radio => f[:is_radio],
                                                  :type => f[:is_radio] ? "radio" : "checkbox",
                                                  :random_number => random_number,
                                                  :custom_template => false,
                                                  :custom_input_attr => ''
                                                  })
                        %>
                      </li>
                    <% end %>
                  </ul>
                <% end %>
            </div>
          </div>
        <% end %>
      </div>

      <div class="filters-header">
        <a class="content link text-center visible-xs-*" href="#" data-show-filters>
          Filter
          <span class="icon icon-general-caret-down"></span>
        </a>
        <a class="content link text-center visible-xs-*" href="#" data-clear>
          <span class="clear-filters-text">Clear</span>
        </a>
        <a class="content link text-center hidden-md visible-xs-*" href="#" data-hide-filters>
          Hide Filters
          <span class="icon icon-general-caret-up"></span>
        </a>
      </div>

    </form>
  </div>
</div>

Filters input (filters_input) partial below:

<% if custom_template === false %>

<a href="/<%= filter_slug %>" data-filter-anchor>

  <input type="<%= type %>"
         class="hide" id="filter-input-<%= filter_id %>" name="<%= category_slug %>"
         value="<%= filter_slug %>"
         <%=custom_input_attr%>
         <%=filter_slug === 'none' ? 'checked' : ''%>
  />
  <label class="<%= type %>-label <%= type %>-label-left" for="filter-<%= filter_id %>">
    <span class="fake-<%= type %> icon icon-<%= type %>"></span>
    <%= filter_name %>
  </label>
</a>
<% end %>

<% if custom_template === 'color' %>
  <input type="checkbox" class="hide" id="<%= filter_id %>" value="<%= filter_slug %>" name="<%= category_slug %>" data-custom-filter="color" data-filter-anchor>
  <label class="checkbox" for="<%= filter_id %>"></label>
<% end %>

Note: The color filter inputs are not wrapped in an <a> tag and have the data-custom-filter="color" and data-filter-anchor attributes on the input.

The javascript window object now has TKPL.Filters object which makes selectedFilters available via TKPL.Filters.selectedFilters

Filters exposes a "apply-filters" event when "Apply" button is clicked:

//   $("[data-filters-form]").on('apply-filters', function (){
//    console.log('Apply filters event triggered');
//  });

Filters exposes a "clear-filters" event when "Clear" button is clicked:

// $("[data-filters-form]").on('clear-filters', function (){
//    console.log('Clear filters event triggered');
//  });

Filters 2.0

Filters

Standard multi-select filters

Collapsible

Multi-select filters and Single-select filters

Color Selection Filters (Custom Filter type)

Filters v2.0

Train Length Any

Wedding Categories Any

Neckline Any

Color Selection filters (14)