Adding an item with a check box in the checkout

I have used the gift wrapping snippet (https://docs.foxycart.com/v/2.0/snippets/gift_wrapping_checkbox_on_checkout) and adapted it to be for a postal gift pack. Basically we sell experience gifts and the customer needs to be able to choose to add a postal gift pack at some point during the checkout process - however they should only be able to add one per order. The code works perfectly if the customer initially selects the checkbox however if the customer is indecisive and selects and deselects the box more than once in some browsers then it adds a second (and third and possibly fourth) gift pack to the cart. From the code it should remove the gift pack if the customer deselects the check box, but this doesn't always seem to happen after the first time. The maximum quantity for the gift pack is set to one, but when the check box is reselected it adds another gift pack line to the order. I appreciate that customers can just remove the gift packs from the mini cart in the checkout, but unfortunately most of them don't realise this and we have to keep refunding for duplicate gift packs.

This is the code we are using in the checkout at the moment, which is adapted from the gift wrapping snippet, if anyone can see or knows any way of stopping the duplicate gift packs I would be really appreciative :) If there is alternative option for adding the gift pack in the checkout or cart we are open to any suggestions as to the best way of achieving this!


[data-item-code="giftpack"] .fc-cart__item__quantity {
display:none;
}

{% if postal_gift_pack is not defined %}
{% set postal_gift_pack = false %}
{% for item in items %}
{% if item.code == "giftpack" %}
{% set postal_gift_pack = true %}
{% endif %}
{% endfor %}
{% endif %}





Postal gift packs are delivered via First Class Post. Most gift packs will arrive the next day however please allow up to three working days for delivery.









$('body').on('change', '#postal_gift_pack', 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 giftpack_id;
for (i=0; i < FC.json.items.length; i++) {
if (FC.json.items[i].code == 'giftpack') {
giftpack_id = FC.json.items[i].id;
}
}

if ($(this).is(':checked')) {
FC.json.postal_gift_pack = true;
if (!giftpack_id) {
// MODIFY THE PRODUCT LINK BELOW
FC.client.request('https://'+FC.settings.storedomain+'/cart?name=Postal+Gift+Pack&price=2.50&category=other&code=giftpack&quantity_max=1').done(function(dataJSON) {
FC.json.postal_gift_pack = 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.postal_gift_pack = false;
if (giftpack_id) {
FC.client.request('https://'+FC.settings.storedomain+'/cart?cart=update&quantity=0&id='+giftpack_id).done(function(){
FC.json.postal_gift_pack = 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});
});
}
}
});


Comments
  • fc_adamfc_adam FoxyCart Team
    @Lisa,

    Sorry to hear you're having trouble with the custom gift option on the checkout. Could I confirm the store you're applying that custom code to? I'd like to take a look at your set up to see if I can spot what might be causing it to allow duplicates products like you're describing.
  • LisaLisa Member
    @fc_adam ,

    Thank you very much! I will whisper you the store.
  • fc_adamfc_adam FoxyCart Team
    @Lisa,

    Thanks for whispering your store details. I haven't been able to replicate it being added multiple times myself - but I can definitely see that users of your store have been able to based on your stores previous transactions.

    There is one change I can see you can make though - and that is to move the script block from the "custom checkout fields" configuration option to the "Add custom header and footer code to your templates" option, specifically it's "footer" textarea.

    With the javascript within the custom checkout fields option as it is - whenever that section is re-rendered, it's causing that javascript event to be attached again. This means that after one re-render, the change event will run twice. Each time it re-renders, it'll be added again. If a customer adds, removes and re-adds the option, at a minimum it would be run 3 times on that re-add, but that's not counting potential other re-renders that have happened due to other interactions on the checkout.

    If you get the script block moved instead to the "footer" textarea - still leaving all of the HTML in the custom checkout fields textarea - that should ensure it only runs once, irrespective of client-side rerendering.

    Hopefully that change will get it behaving as it should, and also preventing the duplicate products you're seeing in transactions.
  • LisaLisa Member
    @fc_adam

    Thank you so much! You have literally just made my day as this morning everyone was managing to add duplicates and I couldn't quite find a fix. The only browser we have been able to duplicate it in here is chrome. I have just made the amendments and had a quick check and it all seems to working perfectly. Thank you again :)
  • fc_adamfc_adam FoxyCart Team
    @Lisa,

    Awesome! Glad I could help!
Sign In or Register to comment.