Customizing SearchSpring Facet Options

customizing-searchspring-facet-options.md

Search Spring Facet Customizations

About

SearchSpring's default AJAX display functionality does not give us direct access to the HTML that is used to render the facets, so we have to use their JavaScript API's function hooks to select the desired facet and modify it with JavaScript/jQuery.

Basic Changes

The Default SearchSpring facet HTML is typically a nested set of unordered lists like this:

<li class="facet_container list" id="searchspring-[FIELD CODE]_container">
	<a class="facet_title open" title="[FIELD_NAME]">[FIELD_NAME]</a>
	<ul class="element_container">
		<li>
			<a class="option_link">[OPTION #1] <span class="searchspring-facet_count">([COUNT])</span> </a>
		</li>
		<li>
			<a class="option_link">[OPTION #2] <span class="searchspring-facet_count">([COUNT])</span> </a>
		</li>
		<li>
			<a class="option_link">[OPTION #3] <span class="searchspring-facet_count">([COUNT])</span> </a>
		</li>
	</ul>
</li>

To make updates to how the facet options display, you would need to use JavaScript to modify the DOM/HTML structure, and we can tie into the SearchSpring.Catalog.init option: afterFacetsChange

SearchSpring.Catalog.init({
	afterFacetsChange: function() {
		SearchSpring.jQuery('#searchspring-[FACET_CODE_GOES_HERE]_container .element_container a.option_link').each(function() {
			// [MODIFY THE OPTION'S HTML, CLASSES, STYLES, ETC. HERE]
		});
	}
});

Just change the [FACET_CODE_GOES_HERE] section and add your custom code to the [MODIFY THE OPTION'S HTML, CLASSES, STYLES, ETC. HERE] section:

Basic Example:

With some sample Facet content like this

<li class="facet_container list" id="searchspring-vehicle_container">
	<a class="facet_title open" title="Vehicle">Vehicle</a>
	<ul class="element_container">
		<li>
			<a class="option_link">Plane <span class="searchspring-facet_count">(4)</span> </a>
		</li>
		<li>
			<a class="option_link">Train <span class="searchspring-facet_count">(5)</span> </a>
		</li>
		<li>
			<a class="option_link">Automobile <span class="searchspring-facet_count">(6)</span> </a>
		</li>
	</ul>
</li>

We could setup SearchSpring's JavaScript api with options like this to add icons:

SearchSpring.Catalog.init({
	afterFacetsChange: function() {
		SearchSpring.jQuery('#searchspring-vehicle_container .element_container a.option_link').each(function() {
			var $option_link = SearchSpring.jQuery(this);

			$option_link.remove('.searchspring-facet_count');

			var icon_code = $option_link.text().trim().toLoweCase();

			$option_link.html('<i class="fa fa-' + icon_code + '"></i>');
		});
	}
});

And the resulting HTML would be:

<li class="facet_container list" id="searchspring-vehicle_container">
	<a class="facet_title open" title="Vehicle">Vehicle</a>
	<ul class="element_container">
		<li>
			<a class="option_link"><i class="fa fa-plane"></i></a>
		</li>
		<li>
			<a class="option_link"><i class="fa fa-train"></i></a>
		</li>
		<li>
			<a class="option_link"><i class="fa fa-automobile"></i></a>
		</li>
	</ul>
</li>

Assuming the page also was loading in Font Awesome's Icons, we would now see icons in-place of the text based facets.

Real World Example:

View the Search Results on BTO Sports.com and look at the "Filter by Category" & "Filter By Rating" sections.

The following JavaScript is used to prepare some HTML structure and & CSS styles.

SearchSpring.Catalog.init({
	afterFacetsChange: function() {
		/* ---- Update/Add Icons & Boxes for "Filter By Category Facet" ---- */
		SearchSpring.jQuery("#searchspring-facet_hierarchy_container .option_link").each(function() {
			if (!SearchSpring.jQuery(this).parent().hasClass("filtered_sub")) {
				var x = SearchSpring.jQuery(this).clone();
				x.find("span").remove();
				var i = SearchSpring.jQuery.trim(x.text()).replace(/[\|| ]/g, '').toLowerCase();
				if (SearchSpring.jQuery.inArray(i, ['atv', 'casualwear', 'dirtbike', 'mtbbmx', 'snow', 'street', 'brand', 'adventure']) !== -1) {
					SearchSpring.jQuery(this).prepend('<span class="icon icon-' + i + '"></span>');
					SearchSpring.jQuery(this).parent().addClass("v4");
				}
			}
		});

		/* ---- Update Facet Reviews Images ---- */
		SearchSpring.jQuery('#searchspring-reviews_rating_container .element_container a.option_link').each(function() {
			var $this = SearchSpring.jQuery(this),
				t = SearchSpring.jQuery(this).text()[0];
			$this.css('background-position', '0px -' + (t * 36) + 'px');
			$this.html('& Up');
		});
		SearchSpring.jQuery('#searchspring-reviews_rating_container .element_container a.remove').remove();
	}
});

Awesome! Why do you use SearchSpring.jQuery?
It only worked for me when I did it like this:
afterFacetsChange: function(){
$('.facet_container').click(function(){$(this).find('.element_container').toggle();})
}
});