A while ago, I had a simple website, with a simple js script for calculating a price based on some user input. The script uses an updater function that, after all required choices have been made (radio buttons), calculates the final price and shows the price. It does this by adding html to a predefined ‘price div’ (price.innerHTML = “…”) and setting it’s height from 0 to ‘auto’. Nothing fancy, but worked quite nice.
Upon changing the website for a Drupal site, I was confronted with implementing the js within Drupal. And even though it wasn’t really hard, it took me a while to figure it out, so I thought I’d share my findings, hoping they would be useful to somebody.
First of all, I created a normal page within Drupal. The downside of the method (to some people) is that I had to enable PHP for the page input. But as I am the only person ever seeing an input form on this particular site, I didn’t care too much. For adding the required js (and some extra css for that page), I used:
drupal_set_html_head(‘<script type=”text/javascript”>
window.onload = function() {
includePrices();
};
');
drupal_add_css(path_to_theme().'/prices.css', 'theme', 'all', TRUE);
$styles = drupal_get_css();
And then I added an html form which calls the updater function on each click. This makes it possible to have the second choice customers have to make depend on the first choice they make.
<div onclick="update();" id="house_type">
<form id="typeform">
Type house:
<input type="radio" value="1" ...
</form>
...
Works like a charm for me...
