Custom checkout form field to add Promo product to cart

Hey guys,

A client has a need to offer a free T-Shirt under a specific condition. They want this offer to appear during the checkout process. I'm using the "Add custom form fields to your checkout" field to add the following. I've removed the validation hash for clarity:
<div class="fc-form-group" style="display:none !important;" id="tshirt_size--container">
<div class="col-sm-8 col-sm-offset-3" data-fc-error-for="Shirt_Size" data-fc-error-class="fc-alert-container--error">
<div class="fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active">
<label class="fc-input-group-container__title fc-input-group-container__title--forced fc-form-label" style="color:#4d4d4d;">
Congrats! Your order qualifies for a free T-Shirt
</label>
<div class="fc-form-group">
<p>What size T-Shirt would you like?</p>
<select name="Shirt_Size" id="Shirt_Size" value="{{ Shirt_Size }}" data-fc-error-class class="fc-form-control">
<option value="">Select a Size</option>
<option value="Small{c:T-SHIRT-WEB-S}">Small</option>
<option value="Medium{c:T-SHIRT-WEB-M}">Medium</option>
<option value="Large{c:T-SHIRT-WEB-L}">Large</option>
<option value="X-Large{c:T-SHIRT-WEB-XL}">X-Large</option>
<option value="XX-Large{c:T-SHIRT-WEB-XXL}">XX-Large</option>
</select>
</div>
</div>
<div class="fc-alert fc-alert--danger hidden" data-fc-error-for="Shirt_Size" data-fc-error-class="show,hidden">Please select a T-Shirt Size.</div>
</div>
</div>
This field only appears when the following conditions are met:
if ( ! has_promo_product_shirt && FC.json.total_item_price > 25 ) {
jQuery("#tshirt_size--container").show();
$("#Shirt_Size").attr('data-fc-required', true);
FC.json.config.template_config.custom_checkout_field_requirements['Shirt_Size'] = "required";
} else {
jQuery("#tshirt_size--container").hide();
$("#Shirt_Size").removeAttr('data-fc-required');
}
The field needs to be required when visible.

When the dropdown changes, we fire this:
jQuery("#fc").one( 'change', '#Shirt_Size', function() {

add_url = '/cart?name=ProSupps+T-Shirt&code=T-SHIRT&price=0&quantity_max=1&category=promos';

add_url += "&Size=" + $("#Shirt_Size").val();

FC.client.request("https://" + FC.settings.storedomain + add_url).done(function(dataJSON) {
FC.cart.render();
jQuery("#tshirt_size--container").hide();
$("#Shirt_Size").removeAttr('data-fc-required');
});

});
Which works great, except that when a customer logs in after this action, the T-Shirt is added to the cart a second time as a new line item even though quantity_max is set to 1. I have no idea why or how. Am I missing an event hook?

Adding this product to your cart should trigger the offer: http://www.prosupps.com/products/mr-hyde/. If you need a user account to test with, let me know and I'll whisper one over.

Thanks!
-Jacob

p.s. if this is a duplicate, my apologies. I thought I submitted this once, but couldn't find the original anywhere.
Comments
  • fc_adamfc_adam FoxyCart Team
    @jacobdubail,

    For some reason your original post was marked as spam - which is why it originally didn't post. I've verified your account so it won't do that again - sorry about that.

    The reason you're seeing the duplication there is because your javascript events are defined within the cart include template. This means that whenever the cart (or checkout) gets rerendered, those javascript events are added again. When the customer logs in, that rerenders the checkout - so the change event is added a second time. That's leading to the add to cart happening twice when you change the select.

    If you move that custom javascript into the custom footer for your store's configuration - that should move it outside of the re-rendered areas and ensure it only gets added the once on the checkout.

    As for why it's being added twice to the cart and not erroring that it's past the max quantity, I'm not exactly sure - but I believe it's related to the products being added at the same time, the other isn't there to be picked up as matching.
  • Thanks Adam! That was the issue. Inheriting a codebase is always fun ;)
  • Hey @fc_adam, here's a very related issue that I'm running in to on a different site doing almost exactly the same thing: http://take.ms/3Y1wC

    Thank you!
  • fc_adamfc_adam FoxyCart Team
    @jacobdubail,

    I've been trying to replicate what you're seeing there - but each time I add it it's always correctly rendering the cart after the product is added.

    If you put a console log in the done function - is it correctly called in the times when you can get it to not add?
  • Of course now it works every time with the console.log message in there. I wonder if it was a session issue since this site has 2 stores, US/CA. Either way, I got it to work 10 times in a row. Calling that good enough.
    Thanks @fc_adam
Sign In or Register to comment.