Default Refine filter

Open Q&A
#1

Hi,

I am using instantsearch.js
I want to create all parent category dropdown next to searchbox (Default: all) . If user select any of category and search then

  • User will get results from only that category
  • Selected category will be refine as a default and get display in current refinement list

defaultrefinefilter
defaultrefinefilter1334×296 19 KB

as an example, I have selected Graphics and search for Flower. I want Categories filter to refine it by Graphics and display on current refinement list.

My Data example
{
“product_title”: “flower”,
“all_categories”: [
“graphics”,
“illustration”,
“elements”
],
“objectID”: “963787”
}

Can you please help here? something I saw here https://www.spencerandwilliams.com/ but not sure how it achieved.

Thanks,
Krishna

#2

Hello,

You can achieve this by enabling facets on your index. This will enable automatic grouping and return you a list of available values for your field all_categories
See documentation
Spencer and Williams use this behavior.

On top of that I would recommend using InstantSearchJS that will automatically understand and display your refinements and search results accordingly
Doc: https://www.algolia.com/doc/api-reference/widgets/refinement-list/js/
Demo: https://instantsearchjs.netlify.app/stories/?path=/story/refinements-refinementlist--default

#3

Hi @samuel.bodin

Thank you for your reply.

I have already added attributsForFaceting and using on search results as filter.

would you be able to pass me the code of Spencer and Williams?

I am trying this way. This does work but not sure how to pass changed value and I am unable to clear the filters after search results with this code.

const search = instantsearch({

  indexName: 'katariatech_products',
  //routing: true, //dynamic url
  searchClient,
  searchFunction: function(helper) {	  		
    
	    helper.state.filters = 'all_categories:graphics';  

		helper.state.disjunctiveFacetsRefinements = {
		      all_categories: ['graphics'],
		};

	      helper.search();
  },
  	
	  
});
#4

Hi @designcuts, I’m not sure what you mean by ‘pass the changed value’. As Samual mentioned, using instantsearch will do most, if not all, of this for you. You can see this implemented in a codesandbox for different flavors of javascript.

If you’d rather use the helper, could you provide a codesandbox that demonstrates the issue?

#5

Hi @cindy.cullen,

Sorry about not enough explanation.

I managed to make it work with initialUiState as below:
const search = instantsearch({

  indexName: 'products',	
  searchClient,
  initialUiState: {
	    products: {
	      refinementList: {
	        all_categories: ['graphics'],
	      },
	    },
	  },

	  
});

This way refinementList is pre-selected with Graphics category. But what I couldn’t achieve is how to get my onchange dropdown value within initialUiState.

This is my dropdown js

jQuery(".dropdown-item").on(‘click’, function(){
var selText = jQuery(this).text();

           var facetRefin  = "[]";

	if(selText != 'all') {
		facetRefin = "['"+selText+"']";
	}

return facetRefin;
});

How do I get changed value of drodown into initialUiState?

Thanks,
Krishna

#6

Hi @designcuts,

I want to propose to you an approach that conceptually matches your goal but may have easier implementation. Described below:

  • use your “dropdown” to select a category (select "graphics" from dropdown)
  • on-click, redirect to a search page where the search instance is pre-filtered with a query param (like filters: "all_categories: graphics")
  • now all search results will be within that category
  • on-select of a new category > redirect to new search page > pre-filter

If you review this Solutions Guide here, it is not your exact use case, but it has the same general requirements. We recommend the approach:

we recommend redirecting to an InstantSearch page with a pre-filled query and adding a default filter for the chosen category.

I believe this redirect approach is simpler. Does this make sense for you?

#7

This topic is exactly what I was looking for. Explicit and very useful, thanks!