Jump to content
bytesource

Access $page and $pages Variables from inside a Javascript File?

Recommended Posts

Hi, 

I have over 200 lines of javascript code at the bottom of every page that does not get compressed and therefore adds to the page load. 

I'd therefore like to add this code to all the other javascript code that is located at

/site/templates/styles/js/

and output as a single minified file via AIOM at 

/site/assets/aiom/

The problem is that the javascript code at the bottom of every page includes calls to the Processwire API such as:

<?php 
  // URLs for $.ajax()
  $subscribe = $pages->get("template=some-template, include=hidden")->url;
  $productLinks = $pages->get("template=another-template, include=hidden")->url;
?>
<script>

// [...]

$.ajax({

      url: "<?php echo $productLinks ?>",
      type: "POST",
      data: {
        category: category,
        id: <?= $page->id ?>
      }

// [...]

$(.some-class).html("<p><?= _("This text needs to be translated") ?></p>"); 

</script>

As far as I know, the above API calls can only be made from within a template, so I am afraid there is no straightforward way to bundle this code with my other javascript code. 

 
Still, I highly appreciate any ideas of how one might go around this problem. Maybe is is possible to make the API calls in the template, and then somehow pass the return values to the javascript file. 
 
Cheers, 
 
Stefan
  • Like 1

Share this post


Link to post
Share on other sites

What I do is use $config->js to populate the config array that I then output in the head for dynamic variables that want to share in a script.

$config->js("myconfig", array("myajaxurl" => $pages->get(1991)->url);

You can do this in templates or modules doesn't matter as long as it's before rendering page.

Then this little to output as json. This is the same as PW uses in the admin to share config vars with js.

<script type="text/javascript">
    <?php
    // output javascript config json string to html
    // for use in javascripts from this point on
    $jsConfig = $config->js();
    $jsConfig['debug']  = $config->debug;
    $jsConfig['urls']   = array(
        'current_url' => $page->url,
        'root' => $config->urls->root,
        );
    ?>
    var config = <?php echo json_encode($jsConfig); ?>;
</script>

Then use in your script as

var rootUrl = config.urls.root;

for example

  • Like 14

Share this post


Link to post
Share on other sites

This truly is an elegant solution! To bad I won't be able to implement it until after the weekend, but I am really looking forward to it. Thanks a lot for your help!

Share this post


Link to post
Share on other sites

@Soma

I just wanted to let you know that thanks to your suggestions I was able to move all my javascript code from the page bottom to an external script file. 

Thanks again for your help!

Cheers, 

Stefan

Share this post


Link to post
Share on other sites

Only thing I want to mention is that you do expose some date from the PW backend to the public that you might not want to expose, eg ProcessWire.config.urls.admin:

1ZWLUTK.png

It's not critical, but it's also not necessary, so you might be better off using your own implementation of that principle: https://processwire.com/talk/topic/14077-config-js-only-working-when-logged-in/?do=findComment&comment=126552

I think that is easier than unsetting/masking the admin url property in the js object (because that would have to be done on the server side).

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...