Event based display of custom checkout fields (V 2.0)

chubbard216chubbard216 Member
in Help edited December 2014
I currently have two custom (textarea) checkout fields - one for shipping instructions, the other for a custom order message.

Both are working fine, but I would like to know if/how I can make the visibility of these fields based on an input (change) event - similar to how the 'Save my address & payment info for next time.' input works.
Comments
  • fc_adamfc_adam FoxyCart Team
    @chubbard216,

    Happy to help - is there a particular event that you want those fields displayed for?
  • chubbard216chubbard216 Member
    edited December 2014
    @fc_adam,

    I should have worded this question better.

    I could easily set up the Javascript for this functionality in the configuration section of the admin myself, however what I am not sure how to do is set it up in a way that would mimic the styling of the 'Save my address & payment info for next time.'

    -Checkbox input triggers the display
    -The (':checked') input label is wrapped around the input and styled as a header or sorts to the field below

    Does that make sense?
  • fc_adamfc_adam FoxyCart Team
    @chubbard216,

    So just to clarify - are you wanting assistance with setting up the javascript, or are you wanting some help with how the HTML would look to get it to visually look like the existing stuff?
  • Not sure, maybe both?

    Whatever the best way would be to make my custom (textarea) fields display in response to a input/label selection and have the styling I described above
  • fc_adamfc_adam FoxyCart Team
    edited December 2014
    @chubbard216,

    Ok awesome. So this should give you a good idea of what you'll need:
    <div class="fc-form-group" data-fc-container="custom_widgets">
        <div class="col-sm-8 col-sm-offset-3">
            <div class="fc-input-group-container fc-input-group-container--checkbox {% if custom_widgets %}fc-input-group-container--active{% endif %}">
                <label data-fc-id="custom-widgets-label" class="fc-input-group-container__title fc-form-label">
                    <input
                        type="checkbox"
                        name="custom_widgets"
                        id="custom_widgets"
                        value="1"
                        class="fc-form-control"
                        {% if custom_widgets %}checked{% endif %}
                        />
                    Custom Widgets
                </label>
                {% if custom_widgets %}
                <div class="fc-form-group">
                    <p>Widget 1</p>
                    <input type="text"
                        id="widget1"
                        name="widget1"
                        class="fc-form-control"
                        value="{{ widget1 }}"
                        />
                    <p>Widget 2</p>
                    <input type="text"
                        id="widget2"
                        name="widget2"
                        class="fc-form-control"
                        value="{{ widget2 }}"
                        />
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    <script type="text/javascript">
    jQuery(document).ready(function() {
    	jQuery("#custom_widgets").on("change", function() { 
    		if ($(this).is(':checked')) {
    			FC.json[this.name] = this.value;
    		} else {
    			FC.json[this.name] = undefined;
    		}
    		FC.checkout.renderAdditionalFields(); 
    	});
    });
    </script>
    

    The above code is relying on our Twig templating language to conditionally show the two inputs based on if the checkbox is checked or not. The change handler ensures that the value is set in the JSON, and then triggers the re-render so the fields are then displayed. When the checkbox isn't checked, those two fields won't be present in the markup at all - so you won't get any blank values sent through with the transaction if not filled in and the checkbox isn't checked.
Sign In or Register to comment.