====== Adding a Gift Wrapping Checkbox on the Checkout ======

Paste the chunk of code below into the templates -> configuration -> checkout -> Add custom form fields to your checkout -> custom checkout fields.

<code html>
{% if gift_wrapping is not defined %}
    {% set gift_wrapping = false %}
    {% for item in items %}
        {% if item.code == "giftwrapping" %}
            {% set gift_wrapping = true %}
        {% endif %}
    {% endfor %}
{% endif %}
<div class="fc-form-group">
    <div class="fc-checkout__additional-field--tos fc-checkout__additional-field--gift-wrapping" data-fc-error-for="gift_wrapping" data-fc-error-class="fc-alert-container--error">
        <div class="fc-input-group-container fc-input-group-container--checkbox">
            <label class="fc-input-group-container__title fc-form-label fc-form-label--gift_wrapping">
                <input type="checkbox"
                    id="gift_wrapping"
                    name="gift_wrapping"
                    value="Yes, please wrap my order"
                    class="fc-form-control fc-form-control--gift_wrapping"
                    {% if gift_wrapping %}checked{% endif %}
                     />
                Please gift wrap my order for $10.
            </label>
        </div>
    </div>
</div>
</code>

Also on the configuration section of the administration, paste the following code into the "footer" textarea of the "Add custom header and footer code to your templates" option.

You'll just need to modify the "MODIFY THE PRODUCT LINK BELOW" section to set the gift wrapping "product" as desired. If your store is using [[..:.:hmac_validation|link/form signing]], you'll just need to create that link and sign it (using the tool in the "sample code" section of the admin, if you don't have another way) and paste it in there as needed. Make sure it's set to the appropriate category so it has the proper shipping and taxes applied to it.

<code javascript>
<style type="text/css">
	[data-item-code="giftwrapping"] .fc-cart__item__quantity {
		display:none;
	}
</style>
<script type="text/javascript">
$('body').on('change', '#gift_wrapping', function(){
	// The FC.client.request() gets new JSON which clears out the shipping.
	// TODO: This will be fixed by FoxyCart, but for now we have a shim.
	var shipping_results = FC.json.shipping_address.shipping_results,
		shipping_service_description = FC.json.shipping_address.shipping_service_description,
		shipping_service_id = FC.json.shipping_address.shipping_service_id;

	var giftwrapping_id;
	for (i=0; i < FC.json.items.length; i++) {
		if (FC.json.items[i].code == 'giftwrapping') {
			giftwrapping_id = FC.json.items[i].id;
		}
	}

	if ($(this).is(':checked')) {
		FC.json.gift_wrapping = true;
		if (!giftwrapping_id) {
			// MODIFY THE PRODUCT LINK BELOW
			FC.client.request('https://'+FC.settings.storedomain+'/cart?name=Gift+Wrapping&price=10&code=giftwrapping&quantity_max=1').done(function(dataJSON) {
				FC.json.gift_wrapping = true;
				FC.json.shipping_address.shipping_results = shipping_results;
				FC.json.shipping_address.shipping_service_description = shipping_service_description;
				FC.json.shipping_address.shipping_service_id = shipping_service_id;
				FC.checkout.render();
				FC.checkout.getShippingOptions({address: FC.json.shipping_address});
			});
		}
	} else {
		FC.json.gift_wrapping = false;
		if (giftwrapping_id) {
			FC.client.request('https://'+FC.settings.storedomain+'/cart?cart=update&quantity=0&id='+giftwrapping_id).done(function(){
				FC.json.gift_wrapping = false;
				FC.json.shipping_address.shipping_results = shipping_results;
				FC.json.shipping_address.shipping_service_description = shipping_service_description;
				FC.json.shipping_address.shipping_service_id = shipping_service_id;
				FC.checkout.render();
				FC.checkout.getShippingOptions({address: FC.json.shipping_address});
			});
		}
	}
});
</script>
</code>