Jump to content

Adding JS to specific pages


cam503
 Share

Recommended Posts

Hey folks,

I've never used ProcessWire before. I took a quick look at the API documentation, but wasn't able to find anything that met my needs.

I would like to add a JavaScript snippet to specific pages. We're implementing a heatmapping tool, and each page that it will be implemented on will have a unique JS code that can only appear on that page.

My first thought was to look into the template file for the actual page, but I'm not quite sure which method to use to say "Only add this Javascript code to this page."

Any help would be greatly appreciated. I've attached a screenshot of one of the template pages in question. I didn't write it, but perhaps it could be helpful.

post-1914-0-49808200-1383946792_thumb.pn

Link to comment
Share on other sites

Hi cam503.

There are several ways this could be done, and there probably won't be a right or wrong answer. I probably won't be able to give you the best answer, because I don't know how your site is structured, but I'll try to point you in the right direction :)

In your example above, it looks like the $helpers->renderPage() function handles the final output of the page based on the data you set above. You could extend that to say:

$page->javascript = '<script>var something = 1;</script>';

You could then access that in the same way you do for the "layout" property.

Another way might be to add a new field to your page template(s) where the javascript could be entered in the control panel, and you could easily access this from the $page variable within the template.

Another way could involve javascript files named after the page's "name" field value, and you could then use this as a basis for loading a script via <script src="..."> after a quick file_exists() check.

Link to comment
Share on other sites

Thanks Craig.

I just checked the API, and it appears renderPage() is not a native function. Any idea where custom functions are stored?

Edit: Nevermind. Just found it under "Modules." Man, this is a lot different than Wordpress. Lol...

Edited by cam503
Link to comment
Share on other sites

I'd simply add a textarea field in your templates, and check if there's any content, e.g. 

if(strlen($page->extraJS) > 3)) { 
    echo $page->extraJS;
} 

And in that field, either enter the JS code. Or, if the JS files are already in your site/templates/scripts/ folder, just specify the .js file-name.

if(strlen($page->extraJS) > 3)) { 
    echo '<script src="' . $config->urls->templates . 'scripts/' . $page->extraJS . '"></script>';
} 
  • Like 1
Link to comment
Share on other sites

I like Dragan's approach if you don't mind mixing JS into the CMS side of things. Whether that's a good practice or not really depends on who's going to be using the admin.

If you want to keep this on the development side rather than the content side, one approach I've used is to keep JS files named with the ID of the page. When a JS file existed that matched the ID of the page, it would be included in the <head> section. Example:

<?php
$file = "scripts/$page->id.js";
if(is_file($config->paths->templates . $file)) {
  echo "<script src='{$config->urls->templates}$file'></script>";
} 

More often, I use this approach with the template file, i.e. have a file named basic-page.js that gets included on any pages using the basic-page template. 

  • Like 5
Link to comment
Share on other sites

I usually identify the page using the template name or page title something like this:

if ($page->template == 'home'){
 echo "<script src='path/to/js'></script>";
}
//or

if ($page->title == 'home'){
 echo "<script src='path/to/js'></script>";
}

cheers.

Link to comment
Share on other sites

  • 2 weeks later...

Hello,

I'm working on my first project with PW. Working with PW is amazing so far. As I am coming over from the Joomla world I am used to adding scripts to individual pages with a Joomla built in method.

Searching for the PW way of doing this, I came along that post where I found this snippet of code: 

$config->scripts->add($config->urls->templates . "scripts/lightbox.js");

Great, I thought. But using just that snippet wouldn't include the script. I had to add a second snippet

foreach($config->scripts as $url) echo "<script type='text/javascript' src='$url'></script>";

(which I also found in that other post) to actually load the script wherever I wanted in my template file.

Lets assume you are working with the default PW Profile on a fresh install and want to load the lightbox.js only on the homepage and the template file for your homepage is home.php.

Then you would include the first snippet in your home.php.

The second snippet goes either in your head.inc into the head section or in your foot.inc at the bottom (whereever you prefer to load your js).

This is a quite generic way to include scripts. If you wanted to have another script loaded only, lets say, on a contact page with template file contact.php the you just need to add a snippet, e.g.

$config->scripts->add($config->urls->templates . "scripts/contact.js"); 

to contact.php.

The second snippet

foreach($config->scripts as $url) echo "<script type='text/javascript' src='$url'></script>"; 

already sits in your head.inc or foot.inc where you put it before and it will take care of including also contact.js because of the foreach loop.

I guess that most of you already know this. But for a newbie like me I had to write this down to properly digest it and maybe it is helpful to someone else.

Cheers

gerhard

  • Like 5
Link to comment
Share on other sites

Greetings,

Hey, I thought your avatar looked familiar!  Of course... gerhard!  Welcome to another former Joomla guy.  Even better, a former Seblod guy!  There are a few of us here.

Some links that might be of interest to you:

http://processwire.com/talk/topic/4844-joomla-vs-pw/

http://processwire.com/talk/topic/3917-importing-users-and-content-from-joomla/

http://www.noupe.com/cms/processwire-cms-with-a-difference-77309.html

http://processwire.com/talk/topic/2129-justifying-diy-coding-vs-installing-modules/?p=20438

I understand what it's all about to transition from Joomla to ProcessWire.  If you need help, just post and we'll jump in.

Welcome again,

Matthew

  • Like 2
Link to comment
Share on other sites

Hi Matthew,

great to see you here and thanks for the warm welcome. Yes, my avatar is almost the same as in Seblod forum, only different color.

The links you've posted are interesting and I totally understand some of the frustration with J! and Seblod.

Working with PW is just so much smoother although the conversion will take me a while.

So I might indeed throw some questions at the forum until I know my ways around this great piece of software better.

So see you around.

Cheers

gerhard

  • Like 1
Link to comment
Share on other sites

Welcome gebeer,

There're some ProcessWire addicts over here, watch out, so you've been warned now!

if(count($page->images)) {
    foreach($page->images as $img) {
        if($img->width > 600) {
            $config->styles->append('/path/to/popup.css');
            $config->scripts->append('/path/to/popup.js');        
            break;
        }
    }
}
  • Like 4
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

×
×
  • Create New...