Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Order optional groups using a comma-delimited list. Caution! Installing this script and not providing the list of group names will disable all optional groups in the page.
<?
// SalsaScript to retrieve the groups for an organization. The
// `groups` object can be used in your page using a SalsaScript insert variable.
function groupsReducer(a, g) {
a[g.Group_Name] = {
groups_KEY: g.groups_KEY,
Description: g.Description,
Group_Name: g.Group_Name
};
return a;
}
var groups = DB.getObjects('groups').reduce(groupsReducer, {} );
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hogan.js/3.0.2/hogan.min.js" type="text/javascript"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var groupsDiv = document.querySelector('ul.salsa-optional-groups');
if (groupsDiv != null) {
var groups = <?= groups.toJSON() ?>;
var groupsData = document.querySelector('#order-groups-names')
.innerHTML
.split(',')
.map(function(name) { console.log(name); return name; })
.map(function(name) { return name.trim(); })
.filter(function(name) { return groups.hasOwnProperty(name); })
.map(function(name) { return groups[name]; });
console.log('groupsData ' + JSON.stringify(groupsData));
var template = Hogan.compile(document.querySelector('#order-groups-template').innerHTML);
var html = template.render({data: groupsData });
console.log ('HTML is ' + html);
Array.from(groupsDiv.querySelectorAll('li'))
.forEach(function(e) { e.parentNode.removeChild(e); })
groupsDiv.innerHTML = html;
}
});
</script>
<div id="order-groups-template" style="display: none;">
{{#data}}
<li class="salsa-optional-group">
<input name="link" value="groups" type="hidden">
<input id="add_to_groups_KEY{{groups_KEY}}_checkbox" value="{{groups_KEY}}" name="linkKey" type="checkbox">
<label for="add_to_groups_KEY{{groups_KEY}}_checkbox">
<span class="order-groups-name">{{Group_Name}}</span>
<span class="order-groups-desc">{{Description}}</span>
</label>
</li>
{{/data}}
</div>
<div id="order-groups-names" style="display: none;">
Everything, Vendors, Owners,Monthly Mule-O-Gram,Weekly Mule-O-Gram
</div>
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.