Does custom JS stop firing when values are filled in at checkout?

mattvarumattvaru Member
in Help edited June 5
https://imgur.com/icMfDMU

Hi all,

I had a quick question. I have the above form in my checkout that collects JS and verifies that the user's birthdate is more than 21 years ago. If I try to purchase an item, go to checkout, and then go straight to answer the DOB question - my desired outcome (for now) fires off - a snippet of JS writes to the console with whether the user is old enough to purchase.

However, I found that if I start filling out fields - like Name, Address, etc - the JS stops working altogether. Nothing gets written to the console and there is no verification. Is this expected behavior? Is there a way to get JS to persist on the page regardless of what values are entered into the form fields?

Thanks in advance!
Comments
  • fc_marijafc_marija FoxyCart Team
    Hi @mattvaru -

    Using custom fields on the checkout won't prevent js from working. I think you said you removed it in your email to support, but if you want to try putting it back, we can take a look to see if we can see why it might not be working.
  • mattvarumattvaru Member
    edited June 5
    Hey @fc_marija! Thanks for getting back to me.

    I switched things up a little and am using Flatpickr (thanks for the suggestion, @fc_josh!), and it works on page load, but Flatpickr itself fails after I try typing anything into the form fields.

    All of my code is now in the configuration tab of the Foxy Dashboard. Any help is appreciated! :-)
  • fc_marijafc_marija FoxyCart Team
    Hi @mattvaru -

    Do you mean that the age/date field doesn't retain it's values? If so, you'll need to add a default value attribute with a twig value that points to the name of same field. Here's a generic example of what it should look like:

    <input type="text" name="Referral_Source" value="{{ Referral_Source }}" />

    Note that the name attribute and value attribute values need to match. You can read more about that here: https://wiki.foxycart.com/v/2.0/checkout#adding_custom_checkout_fields
  • fc_adamfc_adam FoxyCart Team
    @mattvaru,

    Thanks for sharing the video and additional details for the issue you're running into in a whisper.

    The issue you're running into here relates to the dynamic re-renders that happen with different events on the checkout page. When the re-render happens, currently that involves the existing DOM elements being removed and new ones added in their place. This results in any javascript functionality that had been bound directly to those replaced elements being lost.

    To persist javascript functionality that needs to be bound directly to elements (like your calendar widget), you'll need to re-initialize the calendar when the custom fields section is re-rendered. You can do that using javascript like this:
    <script>
    // Initialize on pageload
    $(init_calendar);
    // Initialize on re-render
    FC.client.on("render.done", function(params) {
    if (['checkout', 'additional_fields'].indexOf(params.block_id) > -1) {
    init_calendar();
    }
    });

    function init_calendar() {
    // Your custom calendar code here
    }
    </script>
    If you include your code to initialize your calendar, and any other javascript events that are bound to those custom fields, within the init_calendar() function - that should ensure that your customisations persist through any re-renders.

    Let us know if you run into any issues, but hopefully that will get everything working as expected.
  • mattvarumattvaru Member
    Coming in clutch yet again! Works great! If I could ask a follow-up, is there an easy way to disable checkout if a certain condition is met?

    i.e., in this case — I'd like to disable checkout if the user is < 21 years of age. Is this possible? (My logic is already done in regards to when the checkout should disable - I just need to figure out how to disable the checkout itself.)

    Thanks again! Much appreciated.
  • mattvarumattvaru Member
    Whoops, obviously I need to be reading the docs more carefully. Looks like I found what I needed! https://wiki.foxycart.com/v/2.0/checkout
  • fc_adamfc_adam FoxyCart Team
    @mattvaru,

    Awesome - I'm glad that worked for you!
Sign In or Register to comment.