Make theme extension block conditional

Extensions
1

Hello, I’m new to app development, and I am stuck with this issue. So I created a theme extension and I have a block that I want to make conditional (it will be available in the theme editor app block list only when the merchant enables it from the app UI). According to the documentation, I should add available_if attribute to my schema, so I did this:

{% schema %}
{
  "name": "name",
  "target": "section",
  "available_if": "{{ app.metafields.namespace.test }}",
  "settings": [
    {
      "type": "paragraph",
      "content": "Edit settings in widget settings inside app"
    }
  ]
}
{% endschema %}

In my app UI I set metafileds in the following way:

const UPDATE_METAFIELD_MUTATION = `
    mutation metafieldsSet($metafields: [MetafieldsSetInput!]!) {
      metafieldsSet(metafields: $metafields) {
        metafields {
          key
          value
        }
        userErrors {
          field
          message
        }
      }
    }
  `;

  await admin.graphql(UPDATE_METAFIELD_MUTATION, {
      variables: {
        metafields: [
          {
            namespace: "namespace",
            key: `test`,
            value: "true",
            type: "boolean",
            ownerId: '...',
          },
        ],
      },
    });

This works, I can see metafields created this way in the app UI, but the block is not on the list.
Also, I tried a different approach with creating metafields with CreateMetafieldDefinition with access { storefront } and then setting the value to true, but this does not work either.
Hopefully, this makes sense, any help is appreciated.

2

Everything looks good and this should work.

Can you give the following details:

  • What are you using at ownerId while setting the metafield?
  • Have you tried printing the {{ app.metafields.namespace.test }} in the body of the extension and check if it has the correct value?

Sometimes, we created the metafield for our dev app and was testing in our production app. Both have different ownerId

1 Like
3

Echo everything @prakhar says. This only works for ‘app owned’ metafields, so you’ll need to make the ‘namespace’ → $app:namespace for this to work!

4

It only works for app owned metafield. But it doesn’t necessarily have to be under app reserved namespace.

We use this

"available_if": "{{ app.metafields.foxsell.<metafield_key> }}",

and it works very well.

Echoing is just for development purposes to see if the field is being populated correctly! Not to pushed deployed to live app! Haha.

Was that not clear? My bad! :sweat_smile:

1 Like
5

Yep, that makes sense!

1 Like
6

This should work! I was looking at this functionality myself as well, and i discovered that you cannot use reserved namespaces, for your metafield namespace with the available_if feature, because it wont be parseable by the Liquid Schema Settings. These formats are invalid:

app.metafields.app--12345--your_namespace # harcoding reserved namespace in liquid schema

app.metafields.app$:your_namespace #trying to achieve templating based on "reserverd namespace"

I retrieted to the original simple namespace solution :slight_smile:

Hope this helped!

Best Regards,
Bendegúz

7

Extra info:

This configuration documentation states that this is possible, but with the shown method i was unable to trigger my app embed block visibility.

app.metafields['$app:your_namespace']