Gravatar for

Question by aokour, Aug 25, 2015 6:03 AM

Customizing Sort component and Pagination options


In our Coveo for Sitecore implementation (Forms) we have added the sort component to our search page, but we need the sort component to be a "dropdown" , something like this:

I would assume i will need to built the drop down, and trigger the search when user select different sort option, If so, do you have a example on how to do this?

Also, In Coveo for sitecore, we can change the number of results per Page from component parameters in Sitecore, Is it possible to change that from the search page front end, eg, User can select how many results per page by choosing that from a dropdown on the page itself.


1 Reply
Gravatar for

Answer by Martin Laporte, Aug 25, 2015 8:01 AM

Indeed, the solution looks like this. Among others there are a few samples here but I've seen none that was exactly for that use case. Still, it's pretty easy:

First, you build your dropdown in plain HTML and then use jQuery to listen for changes in it's selection. When the selection changes, you trigger a new query ($(...).coveo('executeQuery')).

Then, you arrange to listen for the buildingQuery event, and there you can set the sort criteria on the QueryBuilder depending on the value in your dropdown.

The only downside is that changes in sort order won't record an history step for back & forward, but fear not! If you use the state to store the current sort criteria (updating it when the dropdown changes, and listening for state changes to restore the proper value in the dropdown), you should be able to easily get coherent back/forward behavior.

Gravatar for

Comment by aokour, Aug 26, 2015 1:44 PM

Actually i tried the following code, it get me the right page size, however the start index is always wrong, Example:

Default page size: 10

User select "50" from the drop down, and hit search, the first page will show 50 results starting from 1-50, when i hit on page 2, i get 50 results, STARTING from 11-60 !

Gravatar for

Comment by aokour, Aug 26, 2015 1:44 PM

Here is my code

Coveo.$('#search').on('buildingQuery', function (e, data) {
    if (data && data.queryBuilder) {
        if($('#ddPageSize').val()!=null && $('#ddPageSize').val()!='')
            data.queryBuilder.numberOfResults = $('#ddPageSize').val();
            data.queryBuilder.fisrtResult = ($('.CoveoPager').coveo().currentPage - 1) * ( $('#ddPageSize').val());
Gravatar for

Comment by Martin Laporte, Aug 27, 2015 7:52 AM

This is probably due to the typo in fisrtResult

Gravatar for

Comment by aokour, Aug 28, 2015 7:57 AM

Yes that was the issue! Thanks

Ask a question