Visible_if doesn't seem exactly compatible with dynamic data sources

[Matthew_Crigger]

Hey All!

So while the changelog has no formal entry for visible_if, the feature has documentation and works on production stores. You can find the documentation here: Settings

I have played around with a few different configurations, but once I entered the realm of inputs utilizing dynamic data sources, the system seemed to fall apart. The docs do not specifically say dynamic data sources are not supported.

My example schema:

{% schema %}
{
  "name": "Visible If Demo",
  "settings": [
    {
      "type": "header",
      "content": "Visible If Example: Text Input"
    },
    {
      "type": "text",
      "id": "visible_if_example_1",
      "label": "Text Input"
    },
    {
      "type": "header",
      "content": "Give Me A Color!",
      "info": "The value of visible_if_example_1 is empty!",
      "visible_if": "{{ section.settings.visible_if_example_1 == blank or section.settings.visible_if_example_1 == 'rgba(0,0,0,0)' }}"
    },
    {
      "type": "header",
      "content": "Thank You For The Color!",
      "info": "The value of visible_if_example_1 is not empty!",
      "visible_if": "{{ section.settings.visible_if_example_1 != blank and section.settings.visible_if_example_1 != 'rgba(0,0,0,0)' }}"
    },
    {
      "type": "header",
      "content": "It's Blue!",
      "info": "The value of visible_if_example_1 is Blue",
      "visible_if": "{{ section.settings.visible_if_example_1 == 'Blue' }}"
    },
    {
      "type": "header",
      "content": "It's Blue Enough!",
      "info": "The value of visible_if_example_1 is not exactly Blue, but close enough.",
      "visible_if": "{{ section.settings.visible_if_example_1 != 'Blue' and section.settings.visible_if_example_1 contains 'Blue' }}"
    },
    {
      "type": "header",
      "content": "Visible If Example: Product Input"
    },
    {
      "type": "product",
      "id": "visible_if_example_2",
      "label": "Product Input"
    },
    {
      "type": "header",
      "content": "Give Me A Product!",
      "info": "The value of visible_if_example_2 is empty!",
      "visible_if": "{{ section.settings.visible_if_example_2 == blank }}"
    },
    {
      "type": "header",
      "content": "Thank You For The Product!",
      "info": "The value of visible_if_example_2 is not empty!",
      "visible_if": "{{ section.settings.visible_if_example_2 != blank }}"
    },
    {
      "type": "header",
      "content": "It's A Specific Product!",
      "info": "The value of visible_if_example_2 is a specific product!",
      "visible_if": "{{ section.settings.visible_if_example_2== 'cool-shirt' }}"
    },
    {
      "type": "header",
      "content": "It's Not The Specific Product!",
      "info": "The value of visible_if_example_2 is not the specific product!",
      "visible_if": "{{ section.settings.visible_if_example_2  != blank and section.settings.visible_if_example_2 != 'cool-shirt' }}"
    }
  ],
  "presets": [
    {
      "name": "Visible If Demo"
    }
  ]
}
{% endschema %}

Attached are some screenshots of my progress with the Text input demo.

First let’s observe the empty state:

Now, let me enter in any value:

Moving on, let’s do Blue:

Adding some flair, I want Bluey:

Finally, I have a single_line_text_field metafield with a value of Blue to be used later:

When I set my text input to use a dynamic data source of the above metafield, visible_if for detecting at least ANY value seems to run fine. However, my metafield value is Blue so I also expect the special messaging I had for Blue:

In addition to the above, I noticed collection and product special input types are not in the supported list, however those do work as well if you use a manually set value and perform simple checks. Like the above, once you utilize a dynamic data source, things fall apart.

It seems to be some kind of accident that dynamic data sources are not working correctly with this feature. I intend to use visible_if mostly for hiding and showing inputs based on actual values. However, I also wanted to leverage this feature for “warning” messages such as given settings having potentially conflicting values, or warning about a lack of value and what that means. I try to leverage dynamic data sources often, and I can the potential for mishap here.

Edited To Add:

It would be nice if we could access some deeper data. if I have a color input I can check for a specific hex or if the value isn’t blank. It would be nice to be able to access color channel information like .red .blue .green etc and create messaging from that data such as warning about color contract and ADA needs.

[misha]

Hey @Matthew_Crigger! Small clarification in terms of what’s available today:

• Conditional settings don’t get access to runtime context, so you cannot write a condition to match against the resolved value of a data source
• Conditional settings do work when a setting has a datasource inside of it, but the conditions you can write are “does the setting have a value or not”, not “does the setting datasource resolve to a value or not”.

[Matthew_Crigger]

I totally hear you on that Misha, but it would be nice if the documentation made note of that. However, if have a text input I can currently create a visible_if condition based on the value of said text input like my working examples above. I would not expect using a dynamic data source to “break” or not resolve my visible_if conditions when my text input value is derived from a data source. I can certainly understand larger resources like product collection page etc not having the resolved values, or much support at all because those types are not even in the official compatibility list.

[misha]

Thanks for the feedback @Matthew_Crigger - I’ll share it with the team. At least for now, I’ll make sure we update the documentation to be more explicit.

[Sakshi_Gupta]

What is the plan for theme app extensions, we tried it with one of our app embed - it was able to take the visible if parameter but it seems to be always returning false. Also it was not working with sidebar settings like heading and paragraph @misha
Is the support for theme app extensions conditional settings still underway??
@Matthew_Crigger Have you given it a try?