Skip to content

Instantly share code, notes, and snippets.

@salsalabs

salsalabs/donation_summary_for_donation_page.html

Last active September 3, 2019 17:32
Show Gist options
  • Save salsalabs/894e1bf5242f159bf5ebb7cd2f45e3d6 to your computer and use it in GitHub Desktop.
Save salsalabs/894e1bf5242f159bf5ebb7cd2f45e3d6 to your computer and use it in GitHub Desktop.
Download ZIP
SalsaScript to summary the count and total donations made by a single donation page. The results are stored as variables donationCount and donationAmount as Javascript global variables.
Raw
donation_summary_for_donation_page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Mules</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.huge {
font-size: 100px;
}
</style>
<?
// SalsaScript to retrieve a count and a total amount for donations to a single donation page.
// Variable "DONAT#_PAGE_KEY" contains the donate_page_KEY of the donation page. A
// "donate_page_KEY" is the unique identifier for a donation page. It can be found in
// the browser address bar when you are editing a donation page. The donate_page_KEY
// will be the number that appears just after "donate_page_KEY=".
var DONATE_PAGE_KEY=8815;
// These variables contain the count and the amount. They are both defaulted to zero.
// We'll embed these values into some Javascript on the way out.
var donationCount = 0;
var donationAmount = 0.00;
// Defaults. We're reading both online and offline donations for pro-forma reasons.
var count = 500;
var offset = 0;
var conditions = [
new Condition("RESULT", "IN", [0,-1]),
new Condition('donate_page_KEY', '=', DONATE_PAGE_KEY),
];
var includes = ['amount'];
// Do until done. Read up to 500 donations. Update the account and amount.
while (count != 0) {
var limit = offset + "," + count;
var records = DB.getObjects("donation", {
conditions: conditions,
includes: includes,
limit: limit
});
count = records.length;
offset += count;
if (count != 0) {
for (var i = 0; i < count; i++) {
donationCount++;
var amount = parseFloat(records[i].amount);
donationAmount = donationAmount + amount;
}
}
}
// Done. Embed the count and amount in some Javascript. These two statements need
// not appear here. They can appear in the script that you're using. They can also
// be repeated as necessary with no side effects.
?>
<script type="text/javascript">
var donatePage_KEY = <?= DONATE_PAGE_KEY ?>;
var donationCount = <?= donationCount ?>;
var donationAmount = <?= donationAmount.toFixed(2) ?>;
</script>
</head>
<body>
<div class="container">
<div class = "row">
<div class="col-md-8 col-md-offset-2">
<p class="text-center huge">F</p>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<!-- TemplateBeginEditable name="content" -->
<h1>Page content here</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- TemplateEndEditable -->
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<!-- Change the appearance of the first page of an Advocacy 4 action.
See for more information. -->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
if (RegExp('action4/common/public/\\?action_KEY=\\d+').test(window.location.href)) {
var tempAddress = document.querySelector('#tempAddress');
if (tempAddress != null) {
var tempAddressLabel = tempAddress.parentNode.querySelector('label');
if (tempAddressLabel != null) {
tempAddressLabel.innerHTML = document.getElementById('address-label').innerHTML;
}
tempAddress.setAttribute('placeholder', document.getElementById('address-placeholder').innerHTML);
}
var tempZip = document.querySelector('#tempZip2');
var tempZipLabel = tempZip.parentNode.querySelector('label');
if (tempZipLabel != null) {
tempZipLabel.innerHTML = document.getElementById('zip-label').innerHTML;
}
tempZip.setAttribute('placeholder', document.getElementById('zip-placeholder').innerHTML);
}
})
</script>
<style type="text/css">
/* CSS to
1. Line up the input fields.
2. Change the font size to be a bit larger.
3. Make the address field longer.
4. Fancy-up the submit button.
5. Put a thin grey line between the action copy and the input form.
Optional. Change or remove as needed. */
#addressform {
margin-bottom: 20px;
}
#addressform label{
font-size: 1.0em;
min-width: 160px;
display: inline-block;
}
#addressform input {
font-size: 1.0em;
}
#tempAddress {
min-width: 200px;
}
#tempZip2 {
min-width: 100px;
}
#addressform input[type="button"] {
background-color: #449d44;
border-color: #398439;
border-radius: 10px;
color: #fff;
font-size: 1.2em;
margin-left: 175px;
margin-top: 15px;
padding: 7px 15px 7px 15px;
}
#postalCodeForm {
border-top: 1pt solid lightgray;
margin-top: 20px;
padding-top: 20px;
}
</style>
<div style="display: none;">
<!-- Configure prompts here. -->
<div id="address-label">Your street address<span class="required">*</span></div>
<div id="address-placeholder">12345 Honey Hammock Hill</div>
<div id="zip-label">ZIP code (5 digits)<span class="required">*</span></div>
<div id="zip-placeholder">NNNNN</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment