Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SalsaScript, Javascript and CSS to add optional fields to a donation page. As a default, optional fields are added as a fieldset below any other fields.
<!-- BEGIN Add optional groups to a donation page. -->
<?
// @see https://salsasupport.zendesk.com/entries/69725374 for details.
// Configure the groups for this solution.
var groupsKeys = "93070,93071,93072,93926";
// End of configurable parts.
var groups = DB.getObjects('groups', {
conditions: [new Condition('groups_KEY', 'IN', groupsKeys)],
includes: 'groups_KEY,Group_Name,Description'.split(',')
}).map(function(g) {
delete g.key;
delete g.object;
return g;
});
?>
<style type="text/css">
/* CSS rules to format the newly inserted optional groups.
Also may affect other parts of the donation page. */
.salsa legend {
font-size: 13pt !important;
}
#optional-groups {
color: darkblue !important;
font-family: Verdana,Tahoma,Helvetica,sans;
font-size: 1.2em !important;
font-weight: normal !important;
}
li.salsa-optional-group {
list-style-type: none;
}
ul.salsa-optional-groups {
padding-left: 0px !important;
}
.group-title { font-weight: bold; }
.group-description { font-style: italic; }
</style>
<!-- This script uses the data from Salsascript and the template to create a
fieldset of optional groups. The fieldset is placed into the donation page
after the personal information. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/hogan.js/3.0.2/hogan.min.js"></script>
<script type="text/javascript">
$(function() {
if ($('#need-optional-groups').length != 0) {
var groups = <?= (groups || []).toJSON() ?>;
if (groups != null & groups.length > 0) {
var optionalGroups = Hogan
.compile($('#groups-template').html())
.render({ groups: groups });
$('#personal_information').after(optionalGroups);
}
}
})
function optionalClick(elem) {
elem.value = (elem != null && elem.checked) ? elem.getAttribute('alt-value') : 0;
}
</script>
<div style="display: none;" id="groups-template">
<fieldset id="optional-groups">
<legend>I'm particularly interested in...</legend>
<ul class="salsa-optional-groups">
{{#groups}}
<li class="salsa-optional-group">
<input name="link" value="groups" type="hidden">
<input id="add_to_groups_KEY{{groups_KEY}}_checkbox" value="0" alt-value="{{groups_KEY}}" name="linkKey" type="checkbox" onclick="optionalClick(this); ">
<label for="add_to_groups_KEY{{groups_KEY}}_checkbox">
<span class="group-title">{{Group_Name}}</span>
{{#Description}}
<span class="group-separator">-</span>
<span class="group-description">{{Description}}</span>
{{/Description}}
</label>
</li>
{{/groups}}
</ul>
</fieldset>
</div>
<!-- END Add optional groups to a donation page. -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.