Apply default value to widgets

[sdrenth]

What's described here is basically what I try to achieve:
https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js/#apply-default-value-to-widgets

I want to have a default, preselected value of a menu widget (instantsearch.widgets.menu). I have two types of results, products and pages. By default I want to only list results of type products. Only when the visitor selects the Pages type I want to list the pages.

I do this by setting: disjunctiveFacetsRefinements.facet = ['Products'];

Then only products are listed on initial page load (as expected), however I run into two issues:

1. The filter option is not shown as preselected (only after clicking the filter option):
   
2. When I click the Pages option, no results are shown and the filter options disappear

[Haroenv]

You can set initialUiState on the InstantSearch instance: https://codesandbox.io/s/thirsty-curie-vibvi?file=/src/app.js, is that what you're looking for? Or is it defined from the URL (in which case a router works best)

[sdrenth]

@Haroenv Basically yes, I can make it a radio and just style it differently. However, using your codesandbox I cannot switch to a different brand.

[Haroenv]

I'm completely lost, can you give an example website that behaves how you want please? I don't understand which options aren't yet given in this thread

[sdrenth]

@Haroenv I can't give you an example website that behaves like how I like it to, because I wouldn't know a website which would have behaviour like this. It comes down to this (on pageload):

<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>

So what I like to achieve is exactly like this sandbox here if it would be working properly:
https://codesandbox.io/s/thirsty-curie-vibvi?file=/src/app.js

So, just like your example, we have a predefined value on pageload ("Samsung") and the visitor should be able to switch between brands (currently not working in your sandbox) but should not be able to undo the filter.

Screen.Recording.2021-06-08.at.17.20.25.mov

Above is exactly what I'd like to achieve, I tried doing something like this with out-of-the-box solutions such as the menu refinement, but that doesn't seem to work.

[Haroenv]

so is this what you want? https://codesandbox.io/s/thirsty-curie-vibvi?file=/src/app.js (edited)

[sdrenth]

@Haroenv Yes thanks, that will do as well! I'll just style it so it looks like a regular menu ;)