Multi step selector

[juliusvanderbrandt]

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

[dennyhartanto]

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?

[juliusvanderbrandt]

EuroCoc | European certificate of conformity (Coc) , 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.

[dennyhartanto]

@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();
});

[juliusvanderbrandt]

how would you implement this into webflow ?

[dennyhartanto]

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();
});

[juliusvanderbrandt]

@dennyhartanto

• e 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.
• Add the code to the Page Settings section.

I did

@dennyhartanto

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

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

[dennyhartanto]

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

[juliusvanderbrandt]

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

[dennyhartanto]

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>

[juliusvanderbrandt]

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

thanks so much for you help. its extremly helpful.

[dennyhartanto]

I see you tried to modify the code, try to use the code I wrote.

@dennyhartanto

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

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

[juliusvanderbrandt]

done that , but still does not work

[dennyhartanto]

Can you share the published link?

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>

2. You need to set the vehicle-list to display:none

[juliusvanderbrandt]

@dennyhartanto

it works now , thank you so much !

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

[dennyhartanto]

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

[juliusvanderbrandt]

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

[dennyhartanto]

Hey @juliusvanderbrandt can you clarify? after which selection?

[juliusvanderbrandt]

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

[dennyhartanto]

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.