Gravatar for chris.weiss@rbaconsulting.com

Question by chrisweiss, Jul 8, 2016 3:33 PM

Getting a search box and search control on the same page

(I'm using Sitecore 8.1 Update 2 using MVC with the June release of Coveo for Sitecore 4.0) Unfortunately, I don't have the ability to wait for the next release of C4SC.

What I'm trying to do is get a search view (a custom one which is highly filtered) onto a page on my site where each page has a search box in the header. The problem is that even though I can get the search box working with search suggestion, the search view isn't showing up.

After diving through some answers on here, I've gotten closer to a resolution, but not quite there. Here's the js I'm working with.

Search Box view's javascript:

function isOnSearchPage() {
    return Coveo.$('#search').length > 0;
}
function setSearchBoxPlaceholderText() {
    Coveo.$('#@Model.SearchboxId').find("input.CoveoQueryBox").attr("placeholder", '@Model.SearchboxPlaceholderText');
}
Coveo.$(function () {
    var searchbox = Coveo.$('#@Model.SearchboxId');
    if (isOnSearchPage()) {
        if (typeof (CoveoForSitecore) !== 'undefined') {
            CoveoForSitecore.componentsOptions = @(Html.Raw(Model.GetJavaScriptInitializationOptions()));
            searchbox.coveoForSitecore('initSearchbox',
                                         CoveoForSitecore.componentsOptions);
        } else {
            searchbox.coveo('initSearchbox',
                               '@Model.GetSearchPageUrl()');
        }

        searchbox.find(".CoveoSearchbox input").attr("placeholder", '@Model.SearchboxPlaceholderText');
    } else {
        var searchOptionsForSearchBox = {
            externalComponents: [searchbox]
        };
        CoveoForSitecore.componentsOptions = Coveo.$.extend({}, CoveoForSitecore.componentsOptions, searchOptionsForSearchBox);

        Coveo.$('#search').on('afterInitialization', function() {
               setSearchBoxPlaceholderText();
        });
    }
});

Search View's javascript:

Coveo.$(function() {
    CoveoForSitecore.searchOptions = @(Html.Raw(Model.GetJavaScriptInitializationOptions()));
    CoveoForSitecore.componentsOptions = Coveo.$.extend({}, CoveoForSitecore.componentsOptions, CoveoForSitecore.searchOptions);
});

// ... Markup ...

Coveo.$(function() {
    Coveo.$('#search').coveoForSitecore('init', CoveoForSitecore.componentsOptions);
});

Thanks everyone!

Gravatar for jflheureux@coveo.com

Comment by Jean-François L'Heureux, Jul 8, 2016 4:04 PM

Do you have any errors in your browser JavaScript console?

Gravatar for chris.weiss@rbaconsulting.com

Comment by chrisweiss, Jul 8, 2016 4:06 PM

None that are related to this. They're all related to some missing css files for WFFM, but the WFFM functionality works fine.

1 Reply
Gravatar for jflheureux@coveo.com

Answer by Jean-François L'Heureux, Jul 8, 2016 4:07 PM

I think you just need to invert your condition to check if your on a search page:

if (!isOnSearchPage()) {
    // call initSearchBox
    ...
} else {
    // add an external component to the initialization options
    ...
}
Gravatar for chris.weiss@rbaconsulting.com

Comment by chrisweiss, Jul 8, 2016 5:39 PM

Heh, I had that order before, but I inverted it to test something out and forgot to turn it back.

Still not working but it's producing an error: "Cannot read property 'configureOmnibox' of undefined".

    Coveo.$(function() {
            CoveoForSitecore.plugin.configureOmnibox({ // The error occurs here
                headerTitle: '@(Html.Raw(Model.HeaderTitle))',
                queryExpression: '@(Html.Raw(Model.AdditionalExpression))',
                numberOfResults: '@Model.NumberOfResults',
                id: '@Model.Id',
                omniboxDataRowIndex: '@Model.OmniboxDataRowOrderingIndex'
            });
    });

Does that mean it needs to be an external component as well? Or does this snippet of js need to fire off later in the sequence?

Thanks for all the help, by the way.

Gravatar for jflheureux@coveo.com

Comment by Jean-François L'Heureux, Jul 11, 2016 1:39 PM

I understand that you added a "Coveo Omnibox Result List View" component under your search box. Can you first test without it until your search box is correctly displayed and then add it later.

Which resources component are you using?

  • Coveo Search box Resources
  • Coveo Search Resources

You need to use the "Coveo Search Resources" in order to use the "Coveo Omnibox Result List" component in a search box. Also, the resources component needs to be defined before the search box and "Coveo Search" components in the presentation details. The order is important.

Gravatar for chris.weiss@rbaconsulting.com

Comment by chrisweiss, Jul 11, 2016 4:55 PM

The good news is that removing the Omnibo component got both the search box and the search view component working!

The bad news is that the page now redirects back to itself (not to the search page). Also, I still would like to get the Omnibox displayed.

At this point, I have the following renderings on the page:

  1. Coveo Search View Resources
  2. Coveo Search Box View
  3. Coveo Search View
Gravatar for jflheureux@coveo.com

Comment by Jean-François L'Heureux, Jul 13, 2016 5:55 AM

If the search box redirects to itself, it may be because you configured it to do so. In the search box properties, there is a field to choose which search page the box should redirect to.

For your Omnibox Result List, try adding it in the array of external components to load. In your custom omnibox result list view:

Coveo.$(function () {
    if (!isOnSearchPage()) {
        var omnibox = Coveo.$('#@Model.Something...');
        var searchOptionsForOmnibox = {
            externalComponents: [omnibox]
        };
        CoveoForSitecore.componentsOptions = Coveo.$.extend({}, CoveoForSitecore.componentsOptions, searchOptionsForOmnibox);
    }
});
Gravatar for chris.weiss@rbaconsulting.com

Comment by chrisweiss, Jul 13, 2016 1:16 PM

I'll look into the omnibox solution. Thanks!

The Search box's Search Page Item has been set properly. Any page without a search view have the search box redirect correct. Otherwise, it looks like the view is capturing the event or something.

Gravatar for jflheureux@coveo.com

Comment by Jean-François L'Heureux, Jul 13, 2016 1:38 PM

If you look at the code you added to your search box view, you will understand it does exactly what you are describing.

When the search box is in a page where there is already a search view, the code is adding the search box in the external components of the search view for the search box to be used to drive this search view.

This code was created to have a search box always located in the site header, even on the search page. It is not meant to allow the search box to still redirect to a search page when there is a search view.

If you want to have the search box to always redirect to the search page, you would have to change the code of the search box view to only this:

searchbox.coveo('initSearchbox', '@Model.GetSearchPageUrl()');

But in that case, you won't be able to configure the search box with its properties and you won't be able to use an onmibox result list either.

Gravatar for chris.weiss@rbaconsulting.com

Comment by chrisweiss, Jul 13, 2016 2:37 PM

Thank you!

Ask a question