Jump to content

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


bytesource
 Share

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
Link to comment
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 15
Link to comment
Share on other sites

  • 4 years later...

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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...