(feat): template support for facet positioning

Author: santosh1994

README.md

@@ -45,48 +45,48 @@ Consider a normal search page with basic layout as shown in the figure below and
 		,isClickNScroll: false
 		,clickNScrollSelector : ''
 		,isAutoScroll : true
-		,facetTemp : ['{{#facets}}<div class="facet-block">'
-				,'<h3>{{name}}</h3>'
-				,'<div class="facet-values">'
-					,'<ul>'
-						,'{{#selected}}'
-						,'<li unbxdParam_facetName="{{../facet_name}}" unbxdParam_facetValue="{{value}}">'
-							,'<label for="{{../facet_name}}_{{value}}">'
-								,'<input type="checkbox" checked class="filter-checkbox" unbxdParam_facetName="{{../facet_name}}" unbxdParam_facetValue="{{value}}" id="{{../facet_name}}_{{value}}"> {{prepareFacetValue value}} ({{count}})'
-							,'</label>'
-						,'</li>'
-						,'{{/selected}}'
-						,'{{#unselected}}'
-						,'<li unbxdParam_facetName="{{../facet_name}}" unbxdParam_facetValue="{{value}}">'
-							,'<label for="{{../facet_name}}_{{value}}">'
-								,'<input type="checkbox" class="filter-checkbox" unbxdParam_facetName="{{../facet_name}}" unbxdParam_facetValue="{{value}}" id="{{../facet_name}}_{{value}}"> {{prepareFacetValue value}} ({{count}})'
-							,'</label>'
-						,'</li>'
-						,'{{/unselected}}'
-					,'</ul>'
+		,facetTemp : [
+			'{{#sortedFacets}}'
+				,'<div class="facet-block">'
+					,'<h3>{{name}}</h3>'
+					,'<div class="facet-values">'
+						,'<ul>'
+							,'{{#isRangeFacet type}}'
+								,'{{#selected}}'
+								,'<li unbxdParam_facetName="{{../facet_name}}" unbxdParam_facetValue="{{value}}">'
+										,'<label for="{{../facet_name}}_{{value}}">'
+												,'<input type="checkbox" checked class="filter-checkbox" unbxdParam_facetName="{{../facet_name}}" unbxdParam_facetValue="{{value}}" id="{{../facet_name}}_{{value}}"> {{prepareFacetValue begin}} - {{prepareFacetValue end}} ({{count}})'
+										,'</label>'
+								,'</li>'
+								,'{{/selected}}'
+								,'{{#unselected}}'
+								,'<li unbxdParam_facetName="{{../facet_name}}" unbxdParam_facetValue="{{value}}">'
+										,'<label for="{{../facet_name}}_{{value}}">'
+												,'<input type="checkbox" class="filter-checkbox" unbxdParam_facetName="{{../facet_name}}" unbxdParam_facetValue="{{value}}" id="{{../facet_name}}_{{value}}"> {{prepareFacetValue begin}} - {{prepareFacetValue end}} ({{count}})'
+										,'</label>'
+								,'</li>'
+								,'{{/unselected}}'
+							,'{{else}}'
+								,'{{#selected}}'
+								,'<li unbxdParam_facetName="{{../facet_name}}" unbxdParam_facetValue="{{value}}">'
+										,'<label for="{{../facet_name}}_{{value}}">'
+												,'<input type="checkbox" checked class="filter-checkbox" unbxdParam_facetName="{{../facet_name}}" unbxdParam_facetValue="{{value}}" id="{{../facet_name}}_{{value}}"> {{prepareFacetValue value}} ({{count}})'
+										,'</label>'
+								,'</li>'
+								,'{{/selected}}'
+								,'{{#unselected}}'
+								,'<li unbxdParam_facetName="{{../facet_name}}" unbxdParam_facetValue="{{value}}">'
+										,'<label for="{{../facet_name}}_{{value}}">'
+												,'<input type="checkbox" class="filter-checkbox" unbxdParam_facetName="{{../facet_name}}" unbxdParam_facetValue="{{value}}" id="{{../facet_name}}_{{value}}"> {{prepareFacetValue value}} ({{count}})'
+										,'</label>'
+								,'</li>'
+								,'{{/unselected}}'
+							,'{{/isRangeFacet}}'
+						,'</ul>'
+					,'</div>'
 				,'</div>'
-			,'</div>{{/facets}}'
-			,'{{#rangefacets}}<div class="facet-block"'
-			,'<h3>{{name}}</h3>'
-				,'<div class="facet-values">'
-					,'<ul>'
-						,'{{#selected}}'
-						,'<li unbxdParam_facetName="{{../facet_name}}" unbxdParam_facetValue="{{value}}">'
-							,'<label for="{{../facet_name}}_{{value}}">'
-								,'<input type="checkbox" checked class="filter-checkbox" unbxdParam_facetName="{{../facet_name}}" unbxdParam_facetValue="{{value}}" id="{{../facet_name}}_{{value}}"> {{prepareFacetValue begin}} - {{prepareFacetValue end}} ({{count}})'
-							,'</label>'
-						,'</li>'
-						,'{{/selected}}'
-						,'{{#unselected}}'
-						,'<li unbxdParam_facetName="{{../facet_name}}" unbxdParam_facetValue="{{value}}">'
-							,'<label for="{{../facet_name}}_{{value}}">'
-								,'<input type="checkbox" class="filter-checkbox" unbxdParam_facetName="{{../facet_name}}" unbxdParam_facetValue="{{value}}" id="{{../facet_name}}_{{value}}"> {{prepareFacetValue begin}} - {{prepareFacetValue end}} ({{count}})'
-							,'</label>'
-						,'</li>'
-						,'{{/unselected}}'
-					,'</ul>'
-				,'</div>'
-			,'</div>{{/rangefacets}}'].join('')
+			,'{{/sortedFacets}}'
+		].join('')
 		,facetContainerSelector : "#facets_container"
 		,facetCheckBoxSelector : "input[type='checkbox']"
 		,facetElementSelector : "label"

unbxdSearch.js

@@ -348,6 +348,13 @@ var unbxdSearchInit = function(jQuery, Handlebars){
     return txt.trim().length > 0 ? txt : "   ";
   });
 
+  Handlebars.registerHelper("isRangeFacet", function(type, options){
+    if(type === "facet_ranges")
+      return options.fn(this);
+    else
+      return options.inverse(this);
+  });
+
   Unbxd.setSearch.prototype.defaultOptions = {
     inputSelector : '#search_query'
     ,searchButtonSelector : '#search_button'