Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gist containing the HTML, Javascript and CSS to provide an additional amount field on a storefront page.
<!-- Style changes to make the totals look better.
See https://salsasupport.zendesk.com/entries/66755514. -->
<style type="text/css">
/* Make the subtotals and totals right-justified.
Put this into the Pre-Submit Footer, too. */
#sub,
#subvoluntary,
#shipping,
#amountDisplay
{
padding-right: 15px;
text-align: right;
}
</style>
<!-- Script that does the work. Add this to the template that the storefront is using.
Add this script just above either the </head> or </body> tag, depending
on where there's room and what the client likes.
See https://salsasupport.zendesk.com/entries/66755514 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// This script is restricted to storefront checkout pages.
if (RegExp('checkOut.jsp\\?storefront_KEY=').test(window.location.href)) {
// Constants.
var NORTH_AMERICA = 0.00;
var VOLUNTARY_SUBTOTAL_PROMPT = "Your additional contribution";
// Return the voluntary amount or a zero.
//
// @return [Number] voluntary amount, if defined, or a zero
//
var getVoluntaryAmount = function() {
var e = $('#voluntary');
if (e.length > 0) {
var t = parseFloat(e.val());
if (isNaN(t)) {
console.log("Not a valid floating point number '" + e.val() + "'.");
return 0.0;
} else {
if (t > 0.0) {
return t;
}
}
}
var e = $('#subvoluntary');
if (e.length > 0) {
var t = parseFloat(e.val());
if (isNaN(t)) {
console.log("Not a valid floating point number '" + e.val() + "'.");
return 0.0;
} else {
return t;
}
}
}
// Workaround for problem where changing the country in a storefront
// does not cause the current states to appear.
//
// @param [String] country the selected country
// @param [String] fieldName the field name for the states to update
//
var updateStates = function(country, fieldName) {
country = (country === null || country.length == 0) ? 'US' : country;
var url = "/o/6694/p/salsa/common/international/public/country/eng/countryData.sjs";
url = url + "?country=" + country + "&jsoncallback=?";
$.getJSON(url, function(data) {
var stateField = $('*[name="' + fieldName + '"]');
stateField.find('option').remove();
stateField.append("<option value>Select a state or province</option>");
for (var key in data.states) {
var state = data.states[key];
// Numeric codes mean that the state name should be used, and not the state code.
var stateCode = /\d+/.test(state.code) ? state.name : state.code;
stateField.append("<option value=" + state.name + ">" + stateCode + "</option>");
}
});
}
// Update the total by getting the page shipping charge and
// formatting the subtotal, shipping and total fields.
var updateTotal = function() {
var sub = parseFloat($('*[name=sub]').val());
var shipping = parseFloat($('[name=shipping]').val());
var voluntary = getVoluntaryAmount();
shipping = shipping !== null ? shipping : 0;
$('*[name=shipping]').val(shipping.toFixed(2));
$('[name=subvoluntary]').val(voluntary.toFixed(2));
var amountDisplay = sub + shipping + voluntary;
$('*[name=amountDisplay]').val(amountDisplay.toFixed(2));
// Needs to be Just A Number, so don't even think about making
// this one fancy-looking.
$('*[name=amount]').val(amountDisplay.toFixed(2));
}
// Set listeners to change the page shipping charge and the states
// when either the billing or the shipping country changes.
$.each(['Country', 'country'], function(index, countryField) {
field = $('*[name="' + countryField + '"]');
field.change(function() {
if (countryField === 'Country' && $('#mailing').is(':hidden')) {
$('*[name=country]').val('');
}
updateTotal();
var stateField = countryField === 'Country' ? 'State' : 'region';
updateStates($(this).val(), stateField);
});
});
// Add the voluntary subtotal field. Note that the prompt is a
// constant, and the client can customize it at will.
if ($('#subvoluntary').length == 0) {
$('td:contains("Shipping/Handling")').filter(':last').parent().before(''
+ '<tr>' + '<td colspan="3" align="right">'
+ VOLUNTARY_SUBTOTAL_PROMPT + '</td>' + '<td align="right">'
+ '$<input name="subvoluntary" id="subvoluntary" value="" size="7" align="right">'
+ '</td>' + '<td> </td>' + '<td> </td>' + '</tr>');
}
// Set a listener to update the total when the voluntary subtotal
// amount changes.
$('#subvoluntary').blur(function() {
$(this).val($(this).val().replace('$', '').replace(',', '').trim());
updateTotal();
});
// Set a listener to update the total when the voluntary amount changes.
$('#voluntary').blur(function() {
$(this).val($(this).val().replace('$', '').replace(',', '').trim());
updateTotal();
});
}
});
</script>
<!-- You should also clean up the invoice on the checkout page. See
https://salsasupport.zendesk.com/entries/55618650, an put the script
into the Footer. -->
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.