Multi step selector

So I got a client who wanted something similar to https://www.eurococ.eu/ menu , the goal is to have a menu that depends on you choices to ( in the end ) come to the product that you want.

I was wondering, if this is even possible in webflow and if so, how to do it?

thank you in advance,

Julius

Hey @juliusvanderbrandt, would like to help you check but since I don’t understand the language, can you point me to the start point of the menu?

https://www.eurococ.eu/en , it’s about the main menu. my client wants an exact menu like this. so in the first step if you select an car , there will be car brandt. if you chose motor in the first step , then there will be motor brands in the second menu.

@juliusvanderbrandt got it, sorry didn’t notice the language selector.

You’ll need a little bit custom code for this to check what the visitor chose on the first step. Then, display the corresponding dropdown.

Something like this may work:

$('.vehicle-selector').change(function(){
   var vehicle = $(this).val()
  $('#' + vehicle).show();
});

how would you implement this into webflow ?

I will use the eurococ as example.

  1. Create a Form group.
  2. Create 1st Step selector with Car (Value: car), Light Vehicle (Value: light-vehicle), Motorcycle (Value: motorcycle). Give it an ID of vehicle-selector
  3. Create 3 2nd Step selectors. Give each an ID of car, light-vehicle, motorcycle. Make sure the value of the 1st Step selector is the same as the 2nd Step selectors’ ID. So car = car.
  4. Add the code to the Page Settings section.

('#vehicle-selector').change(function(){ var vehicle = (this).val()
$(’#’ + vehicle).show();
});

I did

thanks for the amazing help, however it still looks like it doesn’t work for some reason…

Can you share a published link along with the read-only link. Thanks!

https://preview.webflow.com/preview/website-rob?utm_medium=preview_link&utm_source=dashboard&utm_content=website-rob&preview=cbf3cb56557ed0228516545982f3374c&mode=preview

Hey @juliusvanderbrandt, you need to wrap the code in tags. I have also made edits to make it work properly.

Also, please add vehicle-list Class for each of the 2nd step selectors.

I have tested the code, should work well.

<script>
$('#vehicle-selector').change(function(){
   var vehicle = $(this).val();

  $('.vehicle-list').each(function(){
  if($(this).attr('id') == vehicle){
    	  $(this).show();
    } else {
        $(this).hide();
    }
  })
});
</script>

it’s really weird , mine s still not working.

thanks so much for you help. its extremly helpful.

I see you tried to modify the code, try to use the code I wrote.
Screen Shot 2020-05-06 at 02.29.57

You missed this step. The 2nd Step Selectors (Select for car, motorcycle, light-vehicle) add a vehicle-list class

done that , but still does not work

Can you share the published link?
Screen Shot 2020-05-06 at 02.51.05

  1. You have edited the code and that wouldn’t work.
  if($(this).attr('id') == vehicle){
    	  $(this).show('car');
    } else {
        $(this).hide('light-vehicle''motorcycle');
    }

Please use the code below.

<script>
$('#vehicle-selector').change(function(){
   var vehicle = $(this).val();

  $('.vehicle-list').each(function(){
  if($(this).attr('id') == vehicle){
    	  $(this).show();
    } else {
        $(this).hide();
    }
  })
});
</script>
  1. You need to set the vehicle-list to display:none

Screen Shot 2020-05-06 at 02.52.35

it works now , thank you so much !

the link is https://website-rob.webflow.io/

1 Like

Nice! Glad it works now. You can mark my post as solution so that others can find it easily :slight_smile:

Hi , My client wants to have an certain product come up after the selection , how can I do this ?

Hey @juliusvanderbrandt can you clarify? after which selection?

So you helped me with the filter list thing , but is it possible if the client choose for example Car --> mercedes that an mercedes product pop’s up ? and if the client choose motorcycle --> ducatie that an ducatie show’s up.

So according to there choices an product show’s up

That’s abit complicated, but not impossible.

  1. Create a CMS collection with all the products combine.
  2. Add a collection list with the CMS under the selectors.
  3. Add a HTML embed <div class={use the CMS variable **slug** here}></div>
  4. Then you can use custom code to match the Selector to the CMS item.
$('#car, #motorcycle, #light-vehicle').change(function(){
   var selected = $(this).val();
   $('.collection-item').hide( "fast", function(){
      $('.' + selected).closest('.collection-item').show();
   })
});

I’m just guessing the code here so will not work directly. Just setup Step 1, 2 & 3 first, when that’s ready let me know.