Coveo for Sitecore :: Creating a custom toggle facet

 In a recent project I was working on, we needed to create a custom Coveo for Sitecore facet which looks like a toggle, if you know Coveo for Sitecore Hive OOTB components you probably know that OOTB we don't have such a component, so, we would need to create a custom implementation for such component, if you got excited, keep reading! 

The output result we're targeting is to have a toggle Coveo facet that looks similar to the below component, we also want to work with a custom values (not required a 0/1 true/false) so lets how I accomplished that. 

Below is a sample HTML of how you can style a checkbox input to look like a toggle component, with simple html and styling you can accomplish the look needed: 

	<label class="switch">
	<input id="chkToggleFacet" type="checkbox">
	<span class="slider round" id="spanToggleFacet"></span>
	</label>
	<label class="label-text">SOME TEXT FOR YOUR NEW TOGGLE</label>
	<span class="info-icon" title="This is an info icon.">ℹ️</span>
	<div id="JSFilterExpression" class="CoveoForSitecoreFilterExpression"></div>
	<style>
	.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	}
	.switch input {
	opacity: 0;
	width: 0;
	height: 0;
	}
	.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
	border-radius: 34px;
	}
	.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
	}
	input:checked + .slider {
	background-color: #2196F3;
	}
	input:checked + .slider:before {
	transform: translateX(26px);
	}
	.label-text {
	margin-right: 10px;
	}
	.info-icon {
	font-size: 18px;
	margin-left: 10px;
	cursor: pointer;
	vertical-align: middle;
	}
	</style>

view raw gistfile1.html hosted with ❤ by GitHub

Now all what you need to do is to use Coveo for Sitecore JS framework, utilizing Coveo events, such as after initialization event, building query query event, & clear breadcrumb Breadcrum events to achieve the desired state, you can notice below that I'm passing a Yes value to my predefined faceted field. 

	<script>
	var searchInterface = document.getElementById('coveo0cfcd088');
	var clickEvent = false;
	document.addEventListener("DOMContentLoaded", function () {
	Coveo.$(searchInterface).on('state:change', function (e, args) {
	// Check if the facet value has been cleared
	const state = args.attributes;
	// For example, to check if a specific facet is cleared
	const acceptNewPatientFacet = state['f:ToggleFieldFacet'];
	if (!acceptNewPatientFacet || acceptNewPatientFacet.length === 0) {
	$('#chkToggleFacet').prop('checked', false);
	}
	});
	Coveo.$(searchInterface).on(Coveo.InitializationEvents.afterInitialization, function () {
	document.getElementById('chkFacet').onclick = function (e) {
	clickEvent = true;
	Coveo.$(searchInterface).coveo('executeQuery');
	}
	})
	Coveo.$(searchInterface).on(Coveo.QueryEvents.buildingQuery, function (e, args) {
	console.log("build query triggered");
	var checkedStatus = Coveo.$('#chkToggleFacet').is(':checked');
	const facet = Coveo.get(document.querySelector('.CoveoDynamicFacet[data-id="ToggleFacet"]'));
	if (facet.values.activeValues.length == 1 && facet.values.activeValues[0].value == 'No') {
	// Make sure toggle checkbix is disabled.
	$('#chkToggleFacet').prop('checked', false);
	}
	else {
	if (!clickEvent && facet.values.activeValues.length > 0 && (facet.values.activeValues[0].value == 'Yes' || facet.values.activeValues[1].value == 'Yes')) {
	facet.selectValue('Yes');
	$('#chkToggleFacet').prop('checked', true);
	}
	else {
	if (checkedStatus) {
	facet.selectValue('Yes');
	}
	else {
	facet.reset();
	}
	}
	}
	clickEvent = false;
	})
	Coveo.$$(searchInterface).on(Coveo.BreadcrumbEvents.clearBreadcrumb, function (e, args) {
	var checkedStatus = Coveo.$('#chkToggleFacet').is(':checked');
	if (checkedStatus) {
	$('#spanToggleFacet').click();
	}
	});
	})
	</script>

view raw gistfile1.js hosted with ❤ by GitHub

Hopefully the above help you in your challenge or give you an idea how you can build your own custom Coveo component.