Facet position & displayName

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"

test/search/facetPosition.spec.js

@@ -0,0 +1,48 @@
+describe('Facets Position', function () {
+
+  before(function(done){
+    this.searchTest = fixture.load('mock/searchTestResponse.json');
+
+    //setup document to hold search results
+    document.body.innerHTML = __html__['index.html'];
+
+    var searchConfig = jQuery.extend({}, window.config);
+    searchConfig.facetTemp = function(){};
+    //initialize search
+    this.searchobj = new window.Unbxd.setSearch(searchConfig);
+
+    //stub search ajax call with mock response
+    this.stub = sinon.stub(jQuery, 'ajax').yieldsTo('success', this.searchTest);
+    this.spyOnFacetTemp = sinon.spy(this.searchobj.options, 'facetTemp');
+    done();
+  });
+
+  after(function(){
+    this.stub.restore();
+    fixture.cleanup();
+  });
+
+  beforeEach(function(){
+    //reset filters applied
+    this.searchobj.clearFilters(true);
+    this.searchobj.callResults(this.searchobj.paintResultSet);
+  });
+
+  it('Facets should be sorted based on position', function(){
+		var facetElement = jQuery(this.searchobj.options
+        .facetContainerSelector + ' label').first(),
+			sortedFacets,
+			isSorted = true;
+    //apply facet
+    facetElement.click();
+    sortedFacets = this.spyOnFacetTemp.args[0][0].sortedFacets;
+    sortedFacets.forEach(function(facet, index){
+    	if(index < sortedFacets.length && 
+    		facet.position && sortedFacets[index + 1].position &&
+    		facet.position > sortedFacets[index + 1].position) {
+    		isSorted = false;
+    	}
+    });
+    expect(isSorted).to.be.true;
+  });
+ });

unbxdSearch.js

@@ -372,6 +372,14 @@ 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'
@@ -1666,6 +1674,7 @@ var unbxdSearchInit = function(jQuery, Handlebars){
       ,facetKeys = Object.keys(facets)
       ,textfacets = []
       ,rangefacets = []
+      ,sortedFacets = []
       ,singlefacet = {}
       ,self = this
       ,facetVal = ""
@@ -1692,14 +1701,17 @@ var unbxdSearchInit = function(jQuery, Handlebars){
       for(var newI = 0; newI < sortable.length; newI++) {
 
         var x = sortable[newI][0];
+        var displayName = facets[x].displayName ?
+          self.prepareFacetName(facets[x].displayName) : '';
 	// for(var x in facets) {
 	singlefacet = {
-	  name : self.prepareFacetName(x)
+	  name : displayName || self.prepareFacetName(x)
           ,facet_name : x
           ,type : facets[x]['type']
           ,selected : []
           ,unselected : []
           ,unordered : []
+          ,position: facets[x].position
 	};
 
 	if(singlefacet.type !== 'facet_ranges'){
@@ -1732,15 +1744,27 @@ var unbxdSearchInit = function(jQuery, Handlebars){
 	  if((singlefacet.unordered.length) > 0) rangefacets.push(singlefacet);
 
 	}
+        if(singlefacet.unordered && (singlefacet.unordered.length) > 0) {
+          sortedFacets.push(singlefacet);
+        }
       }
 
       if(this.getClass(this.options.facetTemp) == 'Function'){
-	this.options.facetTemp.call(this,{facets: textfacets, rangefacets: rangefacets});
+        this.options.facetTemp.call(this,{
+          facets: textfacets,
+          rangefacets: rangefacets,
+          sortedFacets: sortedFacets
+        });
       }else{
 	if(!this.compiledFacetTemp && this.options.facetTemp.length)
 	  this.compiledFacetTemp = Handlebars.compile(this.options.facetTemp);
 
-	this.options.facetContainerSelector.length && jQuery(this.options.facetContainerSelector).html(this.compiledFacetTemp({facets: textfacets, rangefacets: rangefacets}));
+        this.options.facetContainerSelector.length &&
+          jQuery(this.options.facetContainerSelector).html(this.compiledFacetTemp({
+            facets: textfacets,
+            rangefacets: rangefacets,
+            sortedFacets: sortedFacets
+          }));
       }
 
       this.paintSelectedFacets();