Adding custom fields to the RSVP form code example

THIS ARTICLE IS FOR STACHETHEMES EVENT CALENDAR VERSION 3.x !

Here's example on how to insert custom fields to the RSVP form. 

The code should be inserted in your theme or child-theme functions.php file.

/**
 * This code adds two custom fields (text input and select element) on the front-end modal window
 */
add_action('wp_footer', function() {
    ?>
    <script type="text/javascript">
        (function ($) {
            $(document).on('stecOnRsvpAfterFields', function (e, data) {
                var customHtml = [
                    '<input type="text" name="attendee_country" placeholder="Country" />',
                    '<select name="attendee_tag"><option value="1">Tag</option></select>'
                ];
                data.temp.customFields = customHtml;
            });
        })(window.jQuery);
    </script>
    <?php
});
/**
 * This code intercepts the custom fields when the form is submitted
 * \Stachethemes\Stec\Admin_Helper::post is same as $_POST[...] but returns default value (false) if !isset
 */
add_filter('stec_rsvp_to_event_before_add', function(\Stachethemes\Stec\Event_Meta_Attendee $attendee) {
    
    $country = \Stachethemes\Stec\Admin_Helper::post('attendee_country', false);
    $tag     = \Stachethemes\Stec\Admin_Helper::post('attendee_tag', false);
    if ($country && $tag) {
        $attendee->set_custom_data('country', $country);
        $attendee->set_custom_data('tag', $tag);
    }
    return $attendee;
});
/**
 * This code will display the customs fields in the admin area 
 * When clicking on attendee edit button
 */
add_action('admin_footer', function() {
    ?>
    <script type="text/javascript">
        (function ($) {
            $(document).on('stecOnAdminAddAttendee', function (e, data) {
                var attendeeIndex = data.$attendee.index('.stachethemes-admin-attendance-list-attendee');
                $.each(data.attendee.custom, function (key) {
                    var customHTML = [];
                    var inputKeyName = 'attendee[' + attendeeIndex + '][custom][' + key + ']';
                    customHTML.push('<p class="stachethemes-admin-info">' + key + '</p>');
                    customHTML.push('<input class="stachethemes-admin-input" type="text" name="' + inputKeyName + '" value="' + this + '" />');
                    $(customHTML.join('')).insertBefore(data.$attendee.find('.edit a[data-action="update-attendee"]'));
                });
            });
        })(window.jQuery);
    </script>
    <?php
});