JavaScript in custom panel field

Kirby 2 Solved ✅
1

Can we add JS snippets to panel field, not to hack the panel, but to add google analytics, mixpanel, etc. from panel then access from templates (?)

2

Have a look here.

3

Thank you. Not what I’m asking for.

4

Of course you can add a normal text field in your site´s settings (site.php blueprint), write code into it and access this field, as any other, from your template. If you don´t parse this as kirbytext, the content should be the same.

Anyway, I think, if would be a much cleaner solution to add code for all templates in a snippet (e.g. header / footer / scripts before end) and set the tracking ID in the config.php (so you can disable analytics on your localhost development environment easily, if you use this) or in your site´s settings, so everyone can edit them.

5

For an example, see this solution: https://getkirby.com/docs/solutions/piwik

6

Thank you.

  • Some scripts (like mixpanel’s) are unique in every case (no generic formula here)
  • I want to let the user customize the snippet as needed
  • I don’t want to hard-code it into the template

I thought a panel field would be great alternative this time.

7

So far panel fields don’t accept javascript in any form

Actually I’m exploring panel fields as an alternative to that.
But you’re right in general, thank you.

8

I had no problem adding this:

<!-- Piwik -->
<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//{$PIWIK_URL}/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', {$IDSITE}]);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Piwik Code -->

or even just the pure script (without the html <script> tags).
I used a standard textarea panel field and got the text to my website even with $field->kirbytext().

1 Like
9

@jbeyerstedt is right, adding script to a field is no problem.

1 Like
11

Nop.

On localhost:

  • It works seamlessly

On test server:

  • When I put JS into the field and hit “save”, it keeps loading and loading, but it never resolves
  • It saves HTML/CSS with no problem (but I don’t need those)
  • It’s the same for textarea and custom field type, so I guess my custom field was not the problem

My panel field:

Console Error:

(This error is only thrown if I put JS into the panel field)

404 (Not Found) panel.min.js?v=2.2.3:5

V.cors.t.crossDomain.send  @ panel.min.js?v=2.2.3:5
K.extend.ajax              @ panel.min.js?v=2.2.3:5
K.(anonymous function)     @ panel.min.js?v=2.2.3:5
(anonymous function)       @ panel.min.js?v=2.2.3:7
K.event.dispatch           @ panel.min.js?v=2.2.3:4
g.handle                   @ panel.min.js?v=2.2.3:4
1 Like
12

That´s interesting. I tested it on my web server (uberspace.de, CentOS) as well, and it was no problem.
My next step to isolate the problem would be, to install a new starter kit and try saving this text in there. Could you try this?

Or do you have solved this problem (because this thread is marked as solved)?

13

No, I marked that as “solved”, because I think it should work. Also tested this on my remote server without problems.

I wonder if the issue is server specific somehow, not allowing to post scripts.

14

Environment test:

  • localhost: It works anyway all the time
  • remote server: it works from content pages, but not from site options page

So yes, textarea accepts JS, but not from site options
Maybe the server is not the problem
Maybe I messed up site options, but don’t know where (?)
I will test with a new installation

@texnixe, @jbeyerstedt, thank you very much.