SEE LIVE DEMO

Let's say you want to set up a shoe recommender that asks the buyer their gender, country and average shoe size. Something like this:

This is a fairly complex recommender. 

• We want the input options to only show up after previous input has been provided
• We want to add custom images for the selector options
• We want to recommend the size either based on buyer's average shoe size OR the longest part of their foot

We will create a custom recommender to achieve this.

1. Prepare Custom Variables 

Before we start, you need to have data with mapping of gender, country, shoe size to the recommended size. This data is needed to set up the recommender. For this demo, the data will be in a JSON format like this: https://pastebin.com/wgA02cg2

It would map the Country -> Gender -> Shoe size -> recommended size.

Add the variable in "Custom variables" sections

2. Gender Select input (#1)

1. Add a Select input. Set up the label and change display type to "Radio"

2. Next click "use images in selector" to add image. Make sure the "Fixed value" optinon is unchecked so you can set the option value to "male" and "female"

3. Country Select input (#2)

This step is similar to previous step. However, to make this only show up after previous step is finished, add #1 to the "conditional to display". This means this step only displays when value of #1 (first step) is provided (internally, it checks the "truthfulness" of #1 value)

4. Custom text & Divider (#3, #4)

This step is pretty straightforward, You can add divider or text in between the steps. And set up the conditional to display to make it show up only after previous steps are finished.

5. Average Shoe size selector (#5)

1. add a new select input, set the label and conditional to display

2. Because we want the select options to change based on the gender and country, we need to generate it dynamically with code. click on [Advanced] use code to generate options. We will generate the code based on the gender and country input and the custom variables we set up.

Copy and paste the following code:

if (!VALUES[0] || !VALUES[1]) {
  return [];
}
var shoeSizes = SIZES[VALUES[1]][VALUES[0]]["shoe"]["input"];

var list = shoeSizes.map(function(x, index) {
  return {l: x, v: index};
});
list.unshift({l: '', v:'none'});
return list;

6. Longest foot length selector (#6)

1. set up the label. 

2. Again, we want to use code to generate the options. The code is slightly different here because we want to display "inches" and "cm" in the dropdown text.

Copy and paste the following code:

if (!VALUES[0] || !VALUES[1]) {
  return [];
}
var footSizes = SIZES[VALUES[1]][VALUES[0]]["foot"]["input"];

var list = footSizes.map(function(x, index) {
  return {l: x + " ("+SIZES[VALUES[1]]["unit"] + ")", v: index};
});
list.unshift({l: '', v:'none'});
return list;

7. Final result (#7)

Finally, add a formula result. Again, we want to generate the result based on some JS code. Click on [Advanced] use code to generate result

Copy and paste the following code:

if (!VALUES[0] || !VALUES[1]) {
  return null;
}

if (!VALUES[4] && !VALUES[5]) {
  return null;
}

var sizes = SIZES[VALUES[1]][VALUES[0]]
if (VALUES[4] !== 'none') {
  return {'has_size': sizes['shoe']['rec'][VALUES[4]]};
} else if (VALUES[5] !== 'none') {
  return {'has_size': sizes['foot']['rec'][VALUES[5]]}; 
}
return null;

That's it