type:
snippet
category:
checkout
name:
Adding a gift-wrapping checkbox to the checkout.
reference:
https://forum.foxycart.com/discussion/3214
tags:
snippets, checkout, advance
date:
2011-05-27

Adding a gift-wrapping checkbox to the checkout

Navigate to your store's FoxyCart administration, and load the “checkout” template page.

Within the template, look for the line containing ^^checkout^^, and paste the following right below it: 

^^custom_begin^^
<fieldset id="fc_custom_fields">
	<legend>Additional Information</legend>
	<div class="fc_inner">
		<ol>
			<li class="fc_row">
				<input type="checkbox" name="gift_wrap" id="gift_wrap" value="yes" class="fc_checkbox" checked="checked" />
				<label for="gift_wrap">Should we gift wrap this? ($6.00)</label><br/>
			</li>
			<li id="gift_wrap_details_container" class="fc_row" style="display:none;">
				<label class="fc_pre" for="gift_wrap_details">Gift Wrap Messsage: </label>
				<input type="text" class="fc_text fc_text_long" value="" id="gift_wrap_details" name="gift_wrap_details"/>
			</li>
		</ol>
	</div>
</fieldset>
^^custom_end^^

Also within the template, add the code below right before the closing </body> tag: 

<script type="text/javascript" charset="utf-8">
function addGiftWrapCost() {
  if (jQuery("#gift_wrap").is(":checked")) {
    FC.checkout.config.orderShipping = FC.checkout.config.orderShipping + 6;
    jQuery("#gift_wrap_details_container").show();
    FC.checkout.config.giftWrappingApplied = true;
  } else {
    if (FC.checkout.config.giftWrappingApplied) {
      FC.checkout.config.orderShipping = Math.max(0,(FC.checkout.config.orderShipping-6));
      jQuery("#gift_wrap_details_container").hide();
      FC.checkout.config.giftWrappingApplied = false;
    }
  }
}
jQuery(document).ready(function(){
  FC.checkout.config.giftWrappingApplied = false;
  FC.checkout.overload("updatePriceDisplay", "addGiftWrapCost", null);
  FC.checkout.updatePriceDisplay();
  jQuery("#gift_wrap").click(function(){
    FC.checkout.updatePriceDisplay();
  });
});
</script>