search

algolia / vue-instantsearch

👀 Algolia components for building search UIs with Vue.js
https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/vue
MIT License
854 stars 157 forks source link

Question: Refinement List Sort Settings #781

Closed jackwkinsey closed 1 year ago

jackwkinsey commented 4 years ago

Question

We're seeing odd behaviour when sorting a refinement list by count in an ascending direction. We have hundreds of brands for products and for some of these brands we only have one product. When I sort the brands refinement list in ascending order. I expect to see the brands with only one product show in the list (using default limit of 10). This does happen when the page first loads, but then it flashes to the ten brands with the highest counts (though this list is still sorted in ascending order; e.g. 800, 900, 1300, etc).

Here is a gif showing the behaviour we're seeing:

sorting-weirdness

The first part is from the page initially loading, but then the list changes to brands with much higher counts (seems to be the top 10 highest counts) but sorted in ascending order. It seems to be once all of the items on the page are loaded in.

I did notice in the documentation on the ais-refinement-list widget the following statement:

The widget only displays the most relevant facets for the current search context. The sort option only affects the facets that are returned by the engine, not which facets are returned.

Is there some setting that is causing the refinement list to only show the top 10 brands based on count? Or is there some way to control what the most relevant facets are, if that is what is happening here?

yannickcr commented 4 years ago

Are you using Server-Side Rendering ? From what I see on your gif it seems that the list of brands with only one product is rendered by the server then replaced by the brands with the highest counts when vue-instantsearch takes over on the client.

Could you inspect your code and confirm us that it is the case?

If that's right, then there is a chance that vue-instantsearch is not initialized with the correct state on the client. You can find an example of SSR with vue-instantsearch here: https://github.com/algolia/vue-instantsearch/tree/master/examples/ssr

jackwkinsey commented 4 years ago

@yannickcr Yes we are using server-side rendering via UVue.

Thanks for the link! I'll look over that and compare with our codebase.

Haroenv commented 1 year ago

Hi! This issue has been opened without reply for a while. I'll close it now, but feel free to reply to our initial questions, and we'll gladly reopen if the original issue isn't solved yet.

Have a nice day!