Custom checkout field with JS not working

vinniedauervinniedauer Member
in Help edited November 15
Hi, I added a custom "How did you hear about us?" field to the checkout page. I added it on the template configuration page. I also added a bit of JS in the footer field and an additional field, so that if the customer selects "Radio", it displays a "Which Radio Station?" field with a list of station options based on their state. The fields and JS work sometimes, but it seems like if it's a repeat customer, or the address fields are focused then unfocused, the JS will no longer trigger. In other words, it doesn't take much for the checkout page to start ignoring my JS. Any help would be tremendously appreciated. My custom form fields and JS are below:

Form fields:
<label id="how-you-heard-label">How did you hear about this special offer?</label>
<select data-fc-required data-fc-id="how_did_you_hear" name="How_Did_You_Hear" id="how-you-heard" class="mb-5 fc-form-control">
<option value="default">Please Select One</option>
<option value="Radio">Radio</option>
<option value="Podcast">Podcast</option>
<option value="Website">Website</option>
<option value="Email">Email</option>
<option value="Social_Media">Social Media</option>
<option value="Other">Other</option>
</select>
<label id="which_station_label">Please Select a Radio Station</label>
<select id="which_station" name="Which_Radio_Station" class="mb-5 fc-form-control">
<option value="other-station">Other Station</option>
</select>
Footer JS:
<script>

console.log('station script loaded.');
var stationArray =
{"Athens CSN 102.5 FM": "AL",
"Huntsville CSN 90.5 FM": "AL",
---ETC.---
};
var $howYouHeard = $('#how-you-heard');
var $stationSelectLabel= $('#which_station_label');
var $stationSelect = $('#which_station');

$stationSelect.hide();
$stationSelectLabel.hide();

$howYouHeard.on('change', function() {
var $selected = $(this).find('option:selected').val();
console.log('Selected Value: ', $selected);
if ($selected == 'Radio') {
$stationSelect.show();
$stationSelectLabel.show();
var $stationList = Array();
var $state = $('input[name="billing_region"]').val();

if ($state == false) {
$state = $('input[name="shipping_region"]').val();
}
console.log('state: ', $state);
if ($state) {
// Find the zip in the values of the station array
// Get the corresponding Keys and map to a new array
for(var key in stationArray) {
if (stationArray[key].toString() === $state) {
$stationList.push(key);
} else {
console.log('not a match. Here\'s the value: ', stationArray[key]);
}
}
console.dir($stationList);
// Generate select options from that key array
} else {
for(var key in stationArray) {
$stationList.push(key);
}
}

for (i = 0; i < $stationList.length; i++) {
var $option = '<option value="' + $stationList[i] + '">' + $stationList[i] + '</option>';
$stationSelect.prepend($option);
}
} else {
$stationSelect.hide();
$stationSelectLabel.hide();
}

});
</script>
Comments
  • fc_adamfc_adam FoxyCart Team
    edited November 15
    @vinniedauer,

    Thanks for posting - sorry for any confusion/frustration while working on your customisations here.

    Currently our templates include some client-side re-rendering which can blow away any customisations you've applied, or events bound directly to events, when the render occurs.

    There are a couple ways you can go about including custom set ups, both by embedding display logic in the template code, binding events to the body instead of directly to elements, and working with our event system.

    From what you've pasted above - the following should get you up and running:

    Paste this into the custom checkout fields configuration option:
    <div class="fc-form-group">
    <div class="col-md-8 col-md-offset-3" data-fc-error-for="How_Did_You_Hear" 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">
    Special Offer
    </label>
    <div class="fc-form-group">
    {% set sources = ["Radio", "Podcast", "Website", "Email", "Social Media", "Other"] %}
    <label id="how-you-heard-label" for="How_Did_You_Hear" class="fc-form-label">How did you hear about this special offer?</label>
    <select data-fc-required data-fc-id="how_did_you_hear" name="How_Did_You_Hear" id="How_Did_You_Hear" class="mb-5 fc-form-control">
    <option value="">Please Select One</option>
    {% for source in sources %}
    <option value="{{ source }}" {% if How_Did_You_Hear == source %}selected{% endif %}>{{ source }}</option>
    {% endfor %}
    </select>
    </div>
    {% if How_Did_You_Hear == "Radio" %}

    {% set stationArray = {
    "Athens CSN 102.5 FM": "AL",
    "Huntsville CSN 90.5 FM": "AL",
    "St Paul 105.5 FM": "MN"
    } %}
    {% set state = billing_address.region %}
    {% if not state %}
    {% set state = shipping_address.region %}
    {% endif %}

    {% set stations = [] %}
    {% if state %}
    {% for station, origin in stationArray %}
    {% if origin == state %}
    {% set stations = stations|merge([station]) %}
    {% endif %}
    {% endfor %}
    {% else %}
    {% for station, origin in stationArray %}
    {% set stations = stations|merge([station]) %}
    {% endfor %}
    {% endif %}
    {% set stations = stations|merge(["Other Station"]) %}

    <div class="fc-form-group">
    <label id="which_station_label" class="fc-form-label">Please Select a Radio Station</label>
    <select id="which_station" name="Which_Radio_Station" class="mb-5 fc-form-control">
    {% for station in stations %}
    <option value="{{ station }}" {% if Which_Radio_Station == station %}selected{% endif %}>{{ station }}</option>
    {% endfor %}
    </select>
    </div>

    {% if Which_Radio_Station == "Other Station" %}
    <div class="fc-form-group">
    <label id="other_station_label" class="fc-form-label">Please Specify</label>
    <input class="fc-form-control" type="text" name="Other_Radio_Station" value="{{ Other_Radio_Station }}">
    </div>
    {% endif %}
    {% endif %}
    </div>
    </div>
    </div>
    Paste this into the "footer" textarea of the "Add custom header and footer code to your templates" option, also on the configuration:
    {% if context == "checkout" %}
    <script>
    FC.client.on("customer-address-change.done", FC.checkout.renderAdditionalFields)
    $("body").on("change", "#How_Did_You_Hear, #which_station", function() { setTimeout(FC.checkout.renderAdditionalFields, 200); });
    </script>
    {% endif %}
    With that added to your store, when you hit the checkout, you should see the fields in your page, and dynamically updated as you change address details and make changes in the additional fields too.
  • Adam, you're my hero. Thanks a ton - it worked perfectly!
  • fc_adamfc_adam FoxyCart Team
    @vinniedauer,

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