Can't add visibility condition on theme field

[LMeert]

Good morning !

As said in title, I'm trying to conditionnally display fields in the theme settings, the same way we'd set up a conditionnal field on modules via the interface.

I've had a look at the code generated by setting up a condition on a module and tried to reproduce on the theme fields.json file, but the interface is giving me an error I can't find my way around.

Basically I want to give users a way to choose whether they will be using a google font or a custom font from the theme settings (as currently, the themes don't natively support picking a custom font from the theme settings, this is part of a workaround).

I've created a picker, which works fine, to let the user pick from custom fonts and google fonts.

I've got two font fields, primary and secondary, and I simply want to make them visible in the settings if the font_type selected is "google".
The "visibility" code for both fields seems to have the right structure, but it won't accept any value for the "controlling_field".

I've tried to add the relative field path (font_type) or the full path (theme.global_fonts.font_type) but I can't publish, it's giving me an error : 

Error:null: no controlling_field with id 'theme.global_fonts.font_type' exists

or

Error:null: no controlling_field with id 'font_type' exists

 

I've tried adding them with or without quotes also => not working...

 

Any help would be much appreciated !

 

Thanks,
Ludwig

[Oezcan · Accepted solution]

Hello @LMeert, @tiennguyenvan and @Jaycee_Lewis,

I had the same problem once and it really took me a while to understand that it's about a new key. So you have to write a new key, like "id" in this case. And then add a value to this, e.g. 1 and connect it to the others eg: "controlling_field": 1.

The whole thing would look like this, for example.

[
  {
    "name": "field_group",
    "label": "field_group",
    "required": false,
    "locked": false,
    "type": "group",
    "children": [
      { "id": 1,
        "name": "choice_field",
        "label": "Choice field",
        "required": false,
        "locked": false,
        "display": "select",
        "inline_help_text": "",
        "help_text": "",
        "type": "choice",
        "placeholder": "",
        "default": null,
        "choices": [
          ["value 1", "Label 1"],
          ["value 2", "Label 2"]
        ]
      },
      {
        "name": "font_field",
        "label": "font_field",
        "required": false,
        "locked": false,
        "inline_help_text": "",
        "help_text": "",
        "load_external_fonts": true,
        "type": "font",
        "default": {
          "size": 12,
          "font": "Merriweather",
          "font_set": "GOOGLE",
          "size_unit": "px",
          "color": "#000",
          "styles": {}
        },
        "visibility": {
          "controlling_field": 1,
          "operator": "equal",
          "controlling_value_regex": "value 1"
        }
      },
      {
        "name": "color_field",
        "label": "Color field",
        "required": false,
        "locked": false,
        "inline_help_text": "",
        "help_text": "",
        "type": "color",
        "default": {
          "color": "#ffffff",
          "opacity": 100
        },
        "visibility": {
          "controlling_field": 1,
          "operator": "equal",
          "controlling_value_regex": "value 2"
        }
      }
    ]
  }
]

Maybe there is another solution, but this is how it worked for me.

I hope I could help you.

Best regards,

Özcan

[Jaycee_Lewis]

Thank you, @Oezcan 🙌

[LMeert]

Hi @Oezcan,

Thanks for taking the time to answer, I'll try that this morning and will mark this a solution if it works !

I still think this should be present in the themes documentation and I hope they're going to fill the gap soon, this can be very important for building a user friendly theme settings interface and avoid confusion.

Cheers,

Ludwig

[tiennguyenvan]

I am also trying to have this feature. Following your post.

[Jaycee_Lewis]

Hey, @LMeert! Thanks for the interesting question 💡 — @Stephanie-OG @Sjardo @Oezcan, do you have any insight into what else @LMeert can try here?

Thank you very much! — Jaycee