Gravatar for mike.jarosch@andersencorp.com

Question by mjarosch, Oct 12, 2016 6:19 PM

Facet dependsOn property

Is the facet dependsOn property exposed in the latest Coveo for Sitecore, or is this something we would need to add custom JS for?

Second, it appears that it triggers off of a parent facet. Can it trigger off of a specific value being selected in a parent facet or would we need custom JS for that as well?

1 Reply
Gravatar for flguillemette@coveo.com

Answer by François Lachance-Guillemette, Oct 13, 2016 8:10 AM

Hi @mjarosch :)

You can always use the properties that are not fronted by Coveo for Sitecore by adding the data-YOUR-ATTRIBUTE="...". For instance, dependsOn can be set on the facet using data-depends-on="..." directly on the facet.

The Javascript Framework has a new, really good tutorial that covers this aspect and much more if you want more details. It is available here.

To achieve this in Coveo for Sitecore, we recommend duplicating the Facet component into your own and add the property on your duplicated component.

For your second question, the documentation specifies that the facet is shown only when the parent facet has a value selected. It does not seem to trigger for a specific value, so I guess you will need custom code for this.

Hope this helps :)

FLG

Gravatar for mike.jarosch@andersencorp.com

Comment by mjarosch, Oct 13, 2016 9:51 AM

Thanks for the response. I have added the DependsOn property to a custom Facet, but it doesn't appear to be working. What am I doing wrong? What is a good way to debug this?

Our generated HTML looks like this:

<div>

    <script type="text/javascript">
        Coveo.$(function () {
            var facetOptions = {"_2DB687AC-5B2E-44B1-9C38-8B2FD708E408" : {"enableSettingsFacetState" : false,"preservePosition" : true,"facetSearchDelay" : 0,"facetSearchIgnoreAccents" : false,"valueCaption" : {}}};
            CoveoForSitecore.componentsOptions = Coveo.$.extend({}, CoveoForSitecore.componentsOptions, facetOptions);
        });
    </script>

    <div id='_2DB687AC-5B2E-44B1-9C38-8B2FD708E408'
         class="CoveoFacet"
         data-title='Product Series'
         data-field='@ftechnicalz95xdocumentz95xproductz95xseriesz95xc78285'
         data-number-of-values='5'
         data-id='_2DB687AC-5B2E-44B1-9C38-8B2FD708E408'
         data-enable-collapse='True'
         data-enable-more-less='True'
         data-enable-settings='True'
         data-lookup-field=''
         data-sort-criteria='occurrences'
         data-is-multi-value-field='False'
         data-show-icon='True'
         data-header-icon='no-icon'
         data-computed-field=''
         data-computed-field-operation=''
         data-computed-field-format=''
         data-computed-field-caption=''
         data-include-in-breadcrumb='True'
         data-number-of-values-in-breadcrumb='5'
         data-include-in-omnibox='False'
         data-enable-facet-search='True'
         data-number-of-values-in-facet-search='15'
         data-enable-toggling-operator='False'
         data-use-and='False'
         data-page-size='10'
         data-injection-depth='1000'
         data-available-sorts=''
         data-depends-on=''></div>
</div>

<div>

    <script type="text/javascript">
        Coveo.$(function () {
            var facetOptions = {"_9BE9DB05-F3B1-4CD1-AA94-4F8F31EC457F" : {"enableSettingsFacetState" : false,"preservePosition" : true,"facetSearchDelay" : 0,"facetSearchIgnoreAccents" : false,"valueCaption" : {}}};
            CoveoForSitecore.componentsOptions = Coveo.$.extend({}, CoveoForSitecore.componentsOptions, facetOptions);
        });
    </script>

    <div id='_9BE9DB05-F3B1-4CD1-AA94-4F8F31EC457F'
         class="CoveoFacet"
         data-title='Language'
         data-field='@ftechnicalz95xdocumentz95xlanguagesz95xc78285'
         data-number-of-values='5'
         data-id='_9BE9DB05-F3B1-4CD1-AA94-4F8F31EC457F'
         data-enable-collapse='True'
         data-enable-more-less='True'
         data-enable-settings='True'
         data-lookup-field=''
         data-sort-criteria='occurrences'
         data-is-multi-value-field='False'
         data-show-icon='True'
         data-header-icon='no-icon'
         data-computed-field=''
         data-computed-field-operation=''
         data-computed-field-format=''
         data-computed-field-caption=''
         data-include-in-breadcrumb='True'
         data-number-of-values-in-breadcrumb='5'
         data-include-in-omnibox='False'
         data-enable-facet-search='True'
         data-number-of-values-in-facet-search='15'
         data-enable-toggling-operator='False'
         data-use-and='False'
         data-page-size='10'
         data-injection-depth='1000'
         data-available-sorts=''
         data-depends-on='@ftechnicalz95xdocumentz95xproductz95xseriesz95xc78285'></div>
</div>
Gravatar for jflheureux@coveo.com

Comment by Jean-François L'Heureux, Oct 13, 2016 10:01 AM

Since your facet has ID and data-id attributes, can you try with data-depends-on='_2DB687AC-5B2E-44B1-9C38-8B2FD708E408' instead?

Gravatar for mike.jarosch@andersencorp.com

Comment by mjarosch, Oct 13, 2016 11:17 AM

I was just figuring that out. So, to integrate with Sitecore, I need to do something similar to the Tabs excluded items. The user needs to define a facet item in the hierarchy and add a field on the dependant facet to pick that item as its parent and then output it's id in the HTML.

Gravatar for jflheureux@coveo.com

Comment by Jean-François L'Heureux, Oct 13, 2016 12:49 PM

You're right. That's how I would do it.

Ask a question