As you can see, I am playing with a Coveo object, so I use the Coveo jQuery plugin to call my click method, but I could also use the 'get' method of the Coveo Search Interface: https://developers.coveo.com/display/JsSearchV1/Step+2+-+Interacting+with+the+search+interface+or+components+instance#Step2-Interactingwiththesearchinterfaceorcomponentsinstance-Getacomponentinstancedevelopers.coveo.com/display/JsSearchV1/Step+2+-+Interacting+with+the+search+interface+or+components+instance#Step2-Interactingwiththesearchinterfaceorcomponentsinstance-Getacomponentinstance
As you can see, I am playing with a Coveo object, so I use the Coveo jQuery plugin to call my click method, but I could also use the 'get' method of the Coveo Search Interface: https://developers.coveo.com/display/JsSearchV1/Step+2+-+Interacting+with+the+search+interface+or+components+instance#Step2-Interactingwiththesearchinterfaceorcomponentsinstance-Getacomponentinstance
As you can see, I am playing with a Coveo object, so I use the Coveo jQuery plugin to call my click method, but I could also use the 'get' method of the Coveo Search Interface: developers.coveo.com/display/JsSearchV1/Step+2+-+Interacting+with+the+search+interface+or+components+instance#Step2-Interactingwiththesearchinterfaceorcomponentsinstance-Getacomponentinstance
Coveo.$(function() {
//I bind to my parent in my constructor, I also assign the underscore template
var CustomFacet = (function(_super) {
function CustomFacet(element, options, bindings) {
this.type = 'CustomFacet';
Coveo.Component.bindComponentToElement(element, this);
this.element = element;
this.options = options;
this.bindings = bindings;
this.templateToLoad = Coveo.$(".custom-facet-values-template").html();
var _this = this;
//I populate my facet with a GroupByRequest
Coveo.$(this.bindings.searchInterface.element)
.on(Coveo.QueryEvents.buildingQuery, function(e, args){
args.queryBuilder.groupByRequests.push({"field" : "@syssource", "maximumNumberOfValues":6,"sortCriteria":"occurrences","injectionDepth":1000})
})
//Then I load the results to my underscore template
.on(Coveo.QueryEvents.querySuccess, function(e, args){
var facetTitle = "Sources"
var facetValues = [];
_.each(args.results.groupByResults, function(groupByResult){
if(groupByResult.field == "syssource"){
facetValues.push(groupByResult.values);
}
})
var customFacetValues = Coveo.UnderscoreTemplate.fromString(_this.templateToLoad).template;
var templateData = {
facetTitle: facetTitle,
facetValues: facetValues
};
Coveo.$(".CoveoCustomFacet").html(customFacetValues(templateData));
})
}
//Then my list of custom methods.
// First a click event which will select the source field
CustomFacet.prototype.customFacetClick = function() {
Coveo.$(this.bindings.searchInterface.element)
.on(Coveo.QueryEvents.buildingQuery, function(e, args){
args.queryBuilder.advancedExpression.add('@syssource=="John West Blog"');
})
this.bindings.usageAnalytics.logSearchEvent({
//Code to log the name of the event and the metadata
});
//Then also code to update the state and the URL
//Then I execute my query
this.bindings.queryController.executeQuery();
}
//Add more method, such as facet clear, facet deselect...
// Then I register my component
CustomFacet.ID = 'CustomFacet';
Coveo.CoveoJQuery.registerAutoCreateComponent(CustomFacet);
}(Coveo.Component));
Coveo.$(function() {
//I bind to my parent in my constructor, I also assign the underscore template
var CustomFacet = (function(_super) {
function CustomFacet(element, options, bindings) {
this.type = 'CustomFacet';
Coveo.Component.bindComponentToElement(element, this);
this.element = element;
this.options = options;
this.bindings = bindings;
this.templateToLoad = Coveo.$(".custom-facet-values-template").html();
var _this = this;
//I populate my facet with a GroupByRequest
Coveo.$(this.bindings.searchInterface.element)
.on(Coveo.QueryEvents.buildingQuery, function(e, args){
args.queryBuilder.groupByRequests.push({"field" : "@syssource", "maximumNumberOfValues":6,"sortCriteria":"occurrences","injectionDepth":1000})
})
//Then I load the results to my underscore template
.on(Coveo.QueryEvents.querySuccess, function(e, args){
var facetTitle = "Sources"
var facetValues = [];
_.each(args.results.groupByResults, function(groupByResult){
if(groupByResult.field == "syssource"){
facetValues.push(groupByResult.values);
}
})
var customFacetValues = Coveo.UnderscoreTemplate.fromString(_this.templateToLoad).template;
var templateData = {
facetTitle: facetTitle,
facetValues: facetValues
};
Coveo.$(".CoveoCustomFacet").html(customFacetValues(templateData));
})
}
//Then my list of custom methods.
// First a click event which will select the source field
CustomFacet.prototype.customFacetClick = function() {
Coveo.$(this.bindings.searchInterface.element)
.on(Coveo.QueryEvents.buildingQuery, function(e, args){
args.queryBuilder.advancedExpression.add('@syssource=="John West Blog"');
})
this.bindings.usageAnalytics.logSearchEvent({
//Code to log the name of the event and the metadata
});
//Then also code to update the state and the URL
//Then I execute my query
this.bindings.queryController.executeQuery();
}
//Add more method, such as facet clear, facet deselect...
// Then I register my component
CustomFacet.ID = 'CustomFacet';
Coveo.CoveoJQuery.registerAutoCreateComponent(CustomFacet);
}(Coveo.Component));
<div class="CoveoCustomFacet">
<script class="custom-facet-values-template" type="text/underscore">
<div class="customFacetTitle">{{= facetTitle}}</div>
{{ _.each(facetValues[0], function(value){ }}
<div class="customFacetValue">{{= value.Value}} {{=value.NumberOfResults}}</div>
{{ }); }}
<div class=""></div>
</script>
</div>
<div class="CoveoCustomFacet">
<script class="custom-facet-values-template" type="text/underscore">
<div class="customFacetTitle">{{= facetTitle}}</div>
{{ _.each(facetValues[0], function(value){ }}
<div class="customFacetValue">{{= value.Value}} {{=value.NumberOfResults}}</div>
{{ }); }}
<div class=""></div>
</script>
</div>
Coveo.$('.CoveoCustomFacet').click(function(ev){
Coveo.$(ev.currentTarget).coveo('customFacetClick');
});
Coveo.$('.CoveoCustomFacet').click(function(ev){
Coveo.$(ev.currentTarget).coveo('customFacetClick');
});
Coveo.$(function() {
//I bind to my parent in my constructor, I also assign the underscore template
var CustomFacet = (function(_super) {
function CustomFacet(element, options, bindings) {
this.type = 'CustomFacet';
Coveo.Component.bindComponentToElement(element, this);
this.element = element;
this.options = options;
this.bindings = bindings;
this.templateToLoad = Coveo.$(".custom-facet-values-template").html();
var _this = this;
//I populate my facet with a GroupByRequest
Coveo.$(this.bindings.searchInterface.element)
.on(Coveo.QueryEvents.buildingQuery, function(e, args){
args.queryBuilder.groupByRequests.push({"field" : "@syssource", "maximumNumberOfValues":6,"sortCriteria":"occurrences","injectionDepth":1000})
})
//Then I load the results to my underscore template
.on(Coveo.QueryEvents.querySuccess, function(e, args){
var facetTitle = "Sources"
var facetValues = [];
_.each(args.results.groupByResults, function(groupByResult){
if(groupByResult.field == "syssource"){
facetValues.push(groupByResult.values);
}
})
var customFacetValues = Coveo.UnderscoreTemplate.fromString(_this.templateToLoad).template;
var templateData = {
facetTitle: facetTitle,
facetValues: facetValues
};
Coveo.$(".CoveoCustomFacet").html(customFacetValues(templateData));
})
}
//Then my list of custom methods.
// First a click event which will select the source field
CustomFacet.prototype.customFacetClick = function() {
Coveo.$(this.bindings.searchInterface.element)
.on(Coveo.QueryEvents.buildingQuery, function(e, args){
args.queryBuilder.advancedExpression.add('@syssource=="John West Blog"');
})
this.bindings.usageAnalytics.logSearchEvent({
//Code to log the name of the event and the metadata
});
//Then also code to update the state and the URL
//Then I execute my query
this.bindings.queryController.executeQuery();
}
//Add more method, such as facet clear, facet deselect...
// Then I register my component
CustomFacet.ID = 'CustomFacet';
Coveo.CoveoJQuery.registerAutoCreateComponent(CustomFacet);
}(Coveo.Component));
<div class="CoveoCustomFacet">
<script class="custom-facet-values-template" type="text/underscore">
<div class="customFacetTitle">{{= facetTitle}}</div>
{{ _.each(facetValues[0], function(value){ }}
<div class="customFacetValue">{{= value.Value}} {{=value.NumberOfResults}}</div>
{{ }); }}
<div class=""></div>
</script>
</div>
Coveo.$('.CoveoCustomFacet').click(function(ev){
Coveo.$(ev.currentTarget).coveo('customFacetClick');
});
Coveo.$(function() {
//I bind to my parent in my constructor, I also assign the underscore template
var CustomFacet = (function(_super) {
function CustomFacet(element, options, bindings) {
this.type = 'CustomFacet';
Coveo.Component.bindComponentToElement(element, this);
this.element = element;
this.options = options;
this.bindings = bindings;
this.templateToLoad = Coveo.$(".custom-facet-values-template").html();
var _this = this;
//I populate my facet with a GroupByRequest
Coveo.$(this.bindings.searchInterface.element)
.on(Coveo.QueryEvents.buildingQuery, function(e, args){
args.queryBuilder.groupByRequests.push({"field" : "@syssource", "maximumNumberOfValues":6,"sortCriteria":"occurrences","injectionDepth":1000})
})
//Then I load the results to my underscore template
.on(Coveo.QueryEvents.querySuccess, function(e, args){
var facetTitle = "Sources"
var facetValues = [];
_.each(args.results.groupByResults, function(groupByResult){
if(groupByResult.field == "syssource"){
facetValues.push(groupByResult.values);
}
})
var customFacetValues = Coveo.UnderscoreTemplate.fromString(_this.templateToLoad).template;
var templateData = {
facetTitle: facetTitle,
facetValues: facetValues
};
Coveo.$(".CoveoCustomFacet").html(customFacetValues(templateData));
})
}
//Then my list of custom methods.
// First a click event which will select the source field
CustomFacet.prototype.customFacetClick = function() {
Coveo.$(this.bindings.searchInterface.element)
.on(Coveo.QueryEvents.buildingQuery, function(e, args){
args.queryBuilder.advancedExpression.add('@syssource=="John West Blog"');
})
this.bindings.usageAnalytics.logSearchEvent({
//Code to log the name of the event and the metadata
});
//Then also code to update the state and the URL
//Then I execute my query
this.bindings.queryController.executeQuery();
}
//Add more method, such as facet clear, facet deselect...
// Then I register my component
CustomFacet.ID = 'CustomFacet';
Coveo.CoveoJQuery.registerAutoCreateComponent(CustomFacet);
}(Coveo.Component));
<div class="CoveoCustomFacet">
<script class="custom-facet-values-template" type="text/underscore">
<div class="customFacetTitle">{{= facetTitle}}</div>
{{ _.each(facetValues[0], function(value){ }}
<div class="customFacetValue">{{= value.Value}} {{=value.NumberOfResults}}</div>
{{ }); }}
<div class=""></div>
</script>
</div>
Coveo.$('.CoveoCustomFacet').click(function(ev){
Coveo.$(ev.currentTarget).coveo('customFacetClick');
});
A bit late for this party, but here is what I would suggest.
First of all, you need to create your custom component which will inherit from the Coveo search component.
Then you will add the methods needed for that component.
Then you will bind a click event to it.
So my component look like this:
Coveo.$(function() {
//I bind to my parent in my constructor, I also assign the underscore template
var CustomFacet = (function(_super) {
function CustomFacet(element, options, bindings) {
this.type = 'CustomFacet';
Coveo.Component.bindComponentToElement(element, this);
this.element = element;
this.options = options;
this.bindings = bindings;
this.templateToLoad = Coveo.$(".custom-facet-values-template").html();
var _this = this;
//I populate my facet with a GroupByRequest
Coveo.$(this.bindings.searchInterface.element)
.on(Coveo.QueryEvents.buildingQuery, function(e, args){
args.queryBuilder.groupByRequests.push({"field" : "@syssource", "maximumNumberOfValues":6,"sortCriteria":"occurrences","injectionDepth":1000})
})
//Then I load the results to my underscore template
.on(Coveo.QueryEvents.querySuccess, function(e, args){
var facetTitle = "Sources"
var facetValues = [];
_.each(args.results.groupByResults, function(groupByResult){
if(groupByResult.field == "syssource"){
facetValues.push(groupByResult.values);
}
})
var customFacetValues = Coveo.UnderscoreTemplate.fromString(_this.templateToLoad).template;
var templateData = {
facetTitle: facetTitle,
facetValues: facetValues
};
Coveo.$(".CoveoCustomFacet").html(customFacetValues(templateData));
})
}
//Then my list of custom methods.
// First a click event which will select the source field
CustomFacet.prototype.customFacetClick = function() {
Coveo.$(this.bindings.searchInterface.element)
.on(Coveo.QueryEvents.buildingQuery, function(e, args){
args.queryBuilder.advancedExpression.add('@syssource=="John West Blog"');
})
this.bindings.usageAnalytics.logSearchEvent({
//Code to log the name of the event and the metadata
});
//Then also code to update the state and the URL
//Then I execute my query
this.bindings.queryController.executeQuery();
}
//Add more method, such as facet clear, facet deselect...
// Then I register my component
CustomFacet.ID = 'CustomFacet';
Coveo.CoveoJQuery.registerAutoCreateComponent(CustomFacet);
}(Coveo.Component));
Now my underscore template (very simple for now):
<div class="CoveoCustomFacet">
<script class="custom-facet-values-template" type="text/underscore">
<div class="customFacetTitle">{{= facetTitle}}</div>
{{ _.each(facetValues[0], function(value){ }}
<div class="customFacetValue">{{= value.Value}} {{=value.NumberOfResults}}</div>
{{ }); }}
<div class=""></div>
</script>
</div>
And finally my click event:
Coveo.$('.CoveoCustomFacet').click(function(ev){
Coveo.$(ev.currentTarget).coveo('customFacetClick');
});
As you can see, I am playing with a Coveo object, so I use the Coveo jQuery plugin to call my click method, but I could also use the 'get' method of the Coveo Search Interface: https://developers.coveo.com/display/JsSearchV1/Step+2+-+Interacting+with+the+search+interface+or+components+instance#Step2-Interactingwiththesearchinterfaceorcomponentsinstance-Getacomponentinstance
Sorry I didn't finish all the methods but this might be for another post.
default