less than a minute read • Updated 9 minutes ago
Add a gift wrapping checkbox to the checkout
How to add a gift wrapping checkbox or other add on item to the checkout.
Paste the chunk of code below into the Settings -> checkout -> custom checkout fields.
{% 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>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 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>
<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 Foxy, 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>