Gravatar for slangevin@coveo.com

Question by Simon, Sep 29, 2016 5:54 PM

Creating a custom facet by implementing a custom component

Using Coveo for Sitecore 4.0.402

I am trying to create a custom facet based on https://developers.coveo.com/display/public/JsSearchV1/Implementing+a+Custom+Component

Here is my constructor:

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;
            }

            CustomFacet.ID = 'CustomFacet';
            Coveo.CoveoJQuery.registerAutoCreateComponent(CustomFacet)

        }(Coveo.Component));

I added a method to imput an advanced query and I embedded everything in the component options of my search page. The end result looks like this:

    <script type="text/javascript">
            Coveo.$(function() {
        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;
            }

            CustomFacet.prototype.customFacetClick = function() {
                this.bindings.queryStateModel.set('aq', '@syssource=="John West Blog"');
                this.bindings.usageAnalytics.logSearchEvent({
                   name : 'facetSelect',
                   type : 'facet'
                });
                this.bindings.queryController.executeQuery();
            }

            CustomFacet.ID = 'CustomFacet';
            Coveo.CoveoJQuery.registerAutoCreateComponent(CustomFacet);

        }(Coveo.Component));



        var searchOptions = <%= Model.GetJavaScriptInitializationOptions() %>;
        CoveoForSitecore.componentsOptions = Coveo.$.extend({}, searchOptions, {"CustomFacet": {}});
       });
</script>

Then my HTML

<div class="CoveoCustomFacet">Facet</div>

And finally, the click event and the initialization of my components:

<script type="text/javascript">
    Coveo.$(function() {
      Coveo.$('.CoveoCustomFacet').click(function(ev){
          Coveo.$(ev.currentTarget).customFacetClick();
       });

       Coveo.$('#<%= Model.Id %>').coveoForSitecore('init', CoveoForSitecore.componentsOptions);
    });
</script>

My CustomFacet function never seem to be instantiated. Am I missing something?

3 Replies
Gravatar for slangevin@coveo.com

Answer by Simon, Oct 13, 2016 3:57 PM

So the main issue in in this function:

Coveo.$('.CoveoCustomFacet').click(function(ev){
          Coveo.$(ev.currentTarget).customFacetClick();
       });

The Coveo extension will be calling the function, not the object itself, so it should be:

      Coveo.$('.CoveoCustomFacet').click(function(ev){
          Coveo.$(ev.currentTarget).coveo('customFacetClick');
       });

This said, it fixed one issue, but now fails on an assertion due to a facet, so I cannot modify the "aq" parameter. I will open a new question to follow up on this.

Gravatar for slangevin@coveo.com

Comment by Simon, Oct 13, 2016 4:09 PM

The new question: https://answers.coveo.com/questions/7597/custom-component-unable-to-set-the-advanced-query

Gravatar for olamothe@coveo.com

Answer by olamothe, Sep 30, 2016 9:23 AM

Did you register your component ?

About the registerAutoCreateComponent
This is how the component is registered inside the jQuery Extension. If unregistered, the framework won't know that it needs to call your constructor when it scans the HTML element in the DOM. 

Also this part :

A Component must register itself to the jQuery Extension that the framework utilizes, using a utility function: Coveo.CoveoJQuery.registerAutoCreateComponent.
Gravatar for slangevin@coveo.com

Comment by Simon, Sep 30, 2016 9:53 AM

At the end of my constructor:


CustomFacet.ID = 'CustomFacet';
Coveo.CoveoJQuery.registerAutoCreateComponent(CustomFacet)

Is it enough or I need to do something else during the init?

Gravatar for ssartell@rightpoint.com

Answer by ssartell, Oct 13, 2016 12:40 PM

Not sure if this is the problem, but it looks like you're expecting a result from your IIFE but never actually returning anything. CustomFacet will be undefined for your options calls. Also, is passing in CustomFacet into the last call correct?

Gravatar for slangevin@coveo.com

Comment by Simon, Oct 13, 2016 3:54 PM

The IIFE is indeed not returning anything, but it is initializing my component directly. My first mistake was indeed to try to re-initializing it later. Your comment made me realize my mistake. As for passing the CustomFacet in the call, this is indeed my second initialization, which is an error. I corrected my initial question to instead select the component and pass options. In my case the options are blank but I will leave it there as a reference. This said. This was not the root issue. I finally found it and will answer my own question. Thanks!

Ask a question