Custom Calculations and Displays for the Nationbuilder Progress Bar

Sometimes the Masbia Soup Kitchen Network helps facilitate chesed project leading up to Bar/Bat Mitzvah's for interested individuals. In this particular case, Fisher Angrist wanted to organize a food drive with packages of kits containing the ingredients for Challah in order to donate them to needy families with the help of Masbia. Longleaf Digital was able to assist by creating a custom display for Fisher's landing page - showing not only the typical progress bar, but a special one that displays the amount of "Challah kits" raised so far.

What you'll see in the examples below is a combination of HTML/Liquid (as part of the Nationbuilder page template) and Javascript. The first example is the Liquid page template. We use a combination of variables gathered from Nationbuilder page objects and pre-determined constants (ie. the amount each Challah Kit costs). The result is just the calculations that are remaining, most of which can be handled by Liquid filters directly. The only complication (which requires a little JS) is that we needed to properly format our number as a currency after some calculations had been done. Some tools (ie. Shopify) may have a pre-built Liquid filter to accomplish this with ( {{ amount  | money_with_currency }} ). Here we just used a simple script and plugged the result back into the page.



If your organization wants to implement a similar tool or has plans for other custom additions to your action pages feel free to contact blake@longleaf.io for more information about custom development for digital outreach tools.