You are here

How to Bump Up Your Donation Thermometer in NationBuilder

Submitted by Will on April 6, 2012 - 7:42pm

updated 7-19-2012

So you know how to make a donation page in NationBuilder? It’s pretty cool. It’s got a donation goal and a thermometer. But let’s say you want to start your donation drive with some money already donated. Or if you want your progress bar to take into account offline donations given outside NationBuilder.

How do you adjust your donation page so it’s not starting at zero donations? Well, that’s when you have to get down to adjusting your template using “liquid.” Don’t worry it’s not too complicated.

Okay the first thing we’re going to do is going to look a little convoluted, but that’s because of the way NationBuilder works and the way the liquid templating language works. In the template, both the donation amount number and the donation goal are formatted to look like currency (with a dollar sign and commas) so we’re going to want to remove those. The way to do that is with the “remove” filter and “capture” tag, and adding some code to our template right under <div id="content">.

Here’s how it looks:

  1. {% capture bstep1 %}{{ | remove: ',' }} {% endcapture %}          
  2. {% capture donation_amount %}{{ bstep1 | remove: '$' }} {% endcapture %}

The first part removes the commas and the second removes the dollar sign. Now, let’s do the same to the goal amount:

  1. {% capture step1 %}{{ page.donation.amount_goal_format | remove: ',' }} {% endcapture %}
  2. {% capture amount_goal %}{{ step1 | remove: '$' }} {% endcapture %}

Next, we’re going to put in the bump number (the number we want to start at, let’s just make it $1000.00) and make it a percentage of the total using a couple of math filters("plus," "minus,""times," and "divided_by") and the “assign” and “capture” tags. Unfortunately, we're going to have to dig up some grade school math for this:

  1. {% assign bump = 1000 %}
  2. {% capture bumppercent %}{{ bump | times:100 }} {% endcapture %}
  3. {% capture bumppercentnum %}{{ bumppercent | divided_by:amount_goal}} {% endcapture %}

Notice that, when we made it a percentage, we multiplied it by 100. This is because Liquid only deals in integers. So, rather than deal with decimals, we’re going to just multiply everything by 100.

Next we’re going to apply that percentage to the thermometer so it shows how much we bumped it up by. Here’s the code for that:

  1. {% capture twhundred %}{{ thermo_width | times:100}}{% endcapture %}
  2. {% capture dgpercenthundred %}{{ page.donation.percent_of_amount_goal | times:100 }}{% endcapture %}
  3. {% capture donationgoalpercent %}{{ dgpercenthundred | plus:bumppercentnum }}{% endcapture %}
  4. {% capture realtwhundred %}{{ donationgoalpercent | times:twhundred }}{% endcapture %}
  5. {% capture realthermo_width %}{{ realtwhundred | divided_by:10000 }}{% endcapture %}

Important Note: These 5 lines should appear under the first instance of "thermo_width" or it won't work. I put mine under the "thermometer_progress_text" div.

Okay, so that may be a little difficult to follow. Basically, again using the “capture” tag and some math filters I added our percentage to the percentage that NationBuilder gets and applied that to “thermo_width” to create my own variable called “realthermo_width.” Again, I had to multiply everything by 100 to make it work, and because both my percentage and the number I want to reduce is multiplied by 100, I had to divide by 10000 to make it normal again.

Now, if we look at our page it doesn’t really look like we’ve done anything. That’s because all we’ve done is create some variables. We haven’t put them in the right places yet. The important variables that we want to attention to from above are “donation_amount,” “bump,” and “realthermo_width.” That’s the donation amount minus the commas and dollar sign, the amount you’re bumping up the donation amount by, and the width of the thermometer with your bump percentage applied.

So the first thing we’re going to want to do is to get rid of that pesky “Just Started.” So in our template let’s go to where it says:

  1. {% if page.donations_count < 1 %}
  2.                  JUST STARTED
  3.                {% else %}
  4.                  {{ page.donations_amount_format }} raised
  5.                {% endif %}

Now we should comment the whole thing out by adding the tags {% comment %}{% endcomment %} around it.

And underneath the commented out piece the code we'll add:

  1. ${{ donation_amount | plus:bump}} raised

That should change “Just Started” to our bumped up amount.

Next we’re going to go to the place where it says:

  1. <div class="thermometer_progress" style="width: {{ page.donation.percent_of_amount_goal | times:thermo_width }}px;"></div>

And replace {{ page.donation.percent_of_amount_goal | times:thermo_width }} with {{ realthermo_width }} so it should look like this:

  1. <div class="thermometer_progress" style="width: {{ realthermo_width }}px;"></div>

And that’s it! Now when you look at your page it should show how much you’ve bumped up your donations up by complete with an adjusted thermometer.