Using drupal templates and drupal views to output an embeddable javascript widget

08 May 2009
Posted by Eddie

I was recently trying to figure out how to get certain categories of staff blog posts, run on drupal 6, out of the database and written to a javascript so they could be embedded on our main site, with the headline, content category and post date intact.

I started out going the PHP db_query() function route - which uses SQL and is frankly pretty intimidating to me. For those unfamiliar, it looks something like this:

$tidQuery = db_query('SELECT td.name FROM{term_node}tn, {term_data}td, {term_hierarchy}th WHERE tn.tid = td.tid AND tn.tid = th.tid AND th.parent = 0 AND tn.nid = $Row->nid');

This would then be looped and written to a javascript in some more code that I won't bother posting.

Everytime something needed to be tweaked, the database query would have to be modified, and I'd spend time trying to figure out which database table needed to match.

Um...while structured query language is starting to make more sense to me, and is something I'd like to learn, a faster method of getting the desired result was to leverage Drupal Views and the powerful templating system to output the views query as a javascript.

So again - the ultimate result of this to use drupal views module to produce an embeddable widget for other sites.

Step 1 - In your view, create a page and assign it a path that you'll use specifically for the purpose. I called mine myviewname/custom.js. Then, in the page.tpl.php file, use an if statement to determine if the URL ends with "custom.js". This is done using arguments and should look something like this:


<?php if(arg(1) !== 'custom.js') { ?>
STANDARD PAGE TEMPLATE HERE
<?php } else {
print $content;
} ?>

The last part tells us that the only thing needed for the URL ending in custom.js is the content (which the view will return when we built it)

Step 2 - In my view, I configured it to use fields of exactly what I want, and I created three new tpl.php files to alter the output of the view - stripping away even further the html wrappers and content unnecessary for this purpose and replacing it with a javascript document.write() wrapper.

For example, in the new view-view-fields.tpl.php I added to my theme folder, all I have is :

<?php foreach ($fields as $id => $field): ?>
document.write('<<?php print $field->inline_html;?>><?php print $field->content; ?>inline_html;?>>');
<?php endforeach; ?>

My view looks like this on the backend:

The other template files I created were more specific versions of

view-view.tpl.php

view-view-unformatted.tpl.php

Step 3 - So now we have a view that spits out its output like this:


document.write('
'); document.write('
USCB men's golf team awaits word on nationals
'); document.write('Sharkbites | '); document.write('May 8, 2009'); document.write('
'); document.write('
'); document.write('
Beaufort LB Justin Parker cracks Sporting News Today's list of top recruits
'); document.write('Footblog | '); document.write('May 7, 2009'); document.write('
'); document.write('
'); document.write('
Does your dog look like an Ewok? He could be a winner Saturday
'); document.write('The Pack | '); document.write('May 7, 2009'); document.write('
'); document.write('
'); document.write('
Bluffton continues search for new town manager
'); document.write('Bluffton Blog | '); document.write('May 7, 2009'); document.write('
');

So yeah, there are a few too many document.write() statements in there, but the result is the same.

What we want to do to keep our database hits to a minimum, is prevent views from running the db query everytime our main site is hit, so we'll write this view to another javascript, which will then be included on the main site. I created a drupal page to do that, using this php code to write it to file:


$o = file_get_contents('custom.js');
$FileName = "files/blogfeed.js";
$FileHandle = fopen($FileName, 'w') or die("can't open file");
fwrite($FileHandle, $o);
fclose($FileHandle);

A cron job then hits this new page every 10 minutes, and writes it to file. The result is a low-impact, view-created javascript widget of the latest posts that we can use on any other site.

There is probably a better way to do all of this. But this way just sort of clicked for me as something cool you can do with views and templating to export customized data out of drupal.

Tags: