Error Statamic.$conditions.showField

[stephenmeehanuk]

Hi

I'm trying to get a form field to show when the URL has a parameter

After posting on Discord Help, I've got this far, but I'm seeing an error in DevTools and it's not working.

I've created the conditional in the CP

In resources/js/cp.js I have this custom condition

Statamic.booting(() => {
    Statamic.$conditions.add("hasPid", ({ target }) => {
        let url = new URL(window.location);
        return url.searchParams.has("pid");
    });
});

• Vite is running
• resources/js/cp.js is referenced in both AppServiceProvider.php and vite.config.js
• the condition is wrapped in Statamic.booting

But I'm seeing this error

alpine.js:6 Alpine Expression Error: Cannot read properties of undefined (reading 'state')
Expression: "Statamic.$conditions.showField({"if":{"nature_of_enquiry":"custom hasPid"}}, $data)

Is there anything obviously wrong with my setup?

[jasonvarga]

Are you seeing that error in the control panel or on the front-end?

[stephenmeehanuk]

On the front end.

[jasonvarga]

Ah, two things:

1. You need to make sure that on the frontend you're loading your custom JS file that is doing the Statamic.$conditions.add() so the frontend knows about your custom condition.
2. Even if you do that, it looks like we need to add something to core. It doesn't seem that custom conditions work on the frontend. 😄 This is a bug.

[stephenmeehanuk]

Ok.

resources/js/cp.js is referenced in both AppServiceProvider.php and vite.config.js

I'm using latest version of Statamic.

Thanks for taking a look. Hope it's fixed in a future update.

[jasonvarga]

A workaround for now could be to avoid the custom condition entirely. Since you're using Alpine, you should be able to write the custom logic in there. Something like this: (Disclaimer: I haven't tested it)

<div x-data="{
  customLogicPasses(handle, value) {
    if (handle === 'nature_of_enquiry') {
        let url = new URL(window.location);
        return url.searchParams.has('pid');
    }
    if (handle == 'another_field_with_custom_logic') {
        return thatlogic;
    }
    return true;
  }
}">
  {{ fields }}
    <template x-if="showField && customLogicPasses(handle, value)">
      ...
    </template>
  {{ /fields }}
</div>