Gravatar for artem@brainjocks.com

Question by artem, Nov 12, 2015 11:05 AM

Standalone facet without a search box

Sitecore 8 Update 4, Coveo the latest build (September 2015) for Sitecore 8.

Is it possible to have a standalone Facet view without any search box? Example of what I want to have: http://www.acuitybrands.com/products/lighting/outdoor/garage-and-canopy Left column is the facet. Which is configurable on the server side and rendered as html. Can we do the same with build-in Sitecore Coveo components?

I tried to added Sitecore Facet View within Page Editor (modifed Placeholder settings before), but it rendered as just a <div /> block.

1 Reply
Gravatar for slangevin@coveo.com

Answer by Simon, Nov 12, 2015 11:21 PM

Hi,

The facet is populated by the search component, and will interact with it. One thing I would propose is to integrate both the Coveo Search and Coveo Facet component an then use CSS to hide the Search box. This way you will have a "facet-only" result page. Also, having the search component will give you access to other search features such as filtering/boosting, analytics tracking and other custom parameters that you might want to create.

Cheers,
Simon

Gravatar for jflheureux@coveo.com

Comment by Jean-François L'Heureux, Nov 16, 2015 2:02 PM

I would rather duplicate the "Coveo Search" component to a "Facet Only Coveo Search" component and remove the unwanted search page elements instead of using CSS to hide them.

This way, in your FacetOnlyCoveoSearch.aspx, you could only have the facets placeholder remaining without all the other elements. Something like this:

<%@ Control Language="c#" AutoEventWireup="true" Inherits="Coveo.UI.CoveoSearch" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<%@ Import Namespace="Coveo.UI" %>
<%@ Register TagPrefix="coveoui" Namespace="Coveo.UI.Controls" Assembly="Coveo.UI" %>

<!-- When customizing this component, ensure to use "Coveo.$" instead of the regular jQuery "$" to
     avoid any conflicts with Sitecore's Page Editor/Experience Editor.  -->

<coveoui:ErrorSummary runat="server" />
<coveoui:WhenConfigured runat="server">
    <script type="text/javascript" src="/Coveo/js/cultures/<%= Model.CultureName %>.js"></script>
    <script type="text/javascript">
        Coveo.$(function() {
            CoveoForSitecore.componentsOptions = <%= Model.GetJavaScriptInitializationOptions() %>;
        });
    </script>

    <!-- This hidden input is required to bypass a problem with the Enter key causing a form submission
         if the form has exactly one text field, or only when there is a submit button present. -->
    <input type="text" class="fix-submit" />

    <div class="search-container">
        <div id="search" class="CoveoSearchInterface" data-enable-history="<%= Model.EnableHistory %>"
                                                      data-results-per-page="<%= Model.ResultsPerPage %>"
                                                      data-excerpt-length="<%= Model.ExcerptLength %>"
                                                      data-hide-until-first-query="<%= Model.HideUntilFirstQuery %>"
                                                      data-auto-trigger-query="<%= Model.AutoTriggerQuery %>">

            <% if (Model.AnalyticsEnabled) { %>
                <div class="CoveoAnalytics"
                    data-user="<%= Model.GetAnalyticsUser() %>"
                    data-endpoint="<%= Model.GetAnalyticsEndpoint() %>"
                    data-token="<%= Model.GetAnalyticsToken() %>"
                    data-search-hub="<%= Model.GetAnalyticsCurrentSiteName() %>"
                    data-send-to-cloud="<%= Model.CoveoAnalyticsEnabled %>">
                </div>
            <% } %>

            <% if (Model.DisplayFacets) { %>
                  <sc:placeholder key="coveo-facets" runat="server"></sc:placeholder>
                  &nbsp;
            <% } %>
        </div>
    </div>
    <script type="text/javascript">
        Coveo.$(function() {
            Coveo.$('#search').coveoForSitecore('init', CoveoForSitecore.componentsOptions);
        });
    </script>
</coveoui:WhenConfigured>

<% if (!Model.IsConfigured && SitecoreContext.IsEditingInPageEditor()) { %>
    <script type="text/javascript">
        Coveo.$(function() {
            Coveo.PageEditorDeferRefresh.triggerUpdate();
        });
    </script>
<% } %>

With that sublayout in place, you will still have to create a custom facet component or custom JavaScript code to have the behavior of redirecting to the search page on a facet value click.

Ask a question