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.

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 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.

<style type="text/css">
	[data-item-code="giftwrapping"] .fc-cart__item__quantity {
		display:none;
	}
</style>
{% 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="{{ gift_wrapping }}"
                    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>
 
<script type="text/javascript">
$('body').on('change', '#gift_wrapping', function(){
	console.log('CHANGED!');
	// 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>

Site Tools