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

[bytesource]

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

[Soma]

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

[bytesource]

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!

[bytesource]

@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

[bernhard]

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:

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).