Okay
  Print

Stachethemes Event Calendar 5 Custom RSVP Input Fields hook example:

This example inserts two new inputs: Phone Number and Company Name.

The example assumes the code will be placed in the theme or the child-theme functions.php file.

/**
 * STEP 1:
 * Modify the Attendance Form Structure on the Front-end 
 * via stecFilterAttendFormContent JavaScript filter
 */
add_action('wp_footer', function () {
?>
    <script>
        window.stecFilterAttendFormContent = function({
            structure,
            attendanceData,
            isLoggedIn
        }) {
            const newStructure = JSON.parse(JSON.stringify(structure));
            // Insert Phone Number input field
            newStructure.push({
                id: 'phone-number',
                title: 'Phone number',
                type: 'input-text',
                metaKey: 'phone_number',
                value: attendanceData?.current_user?.phone_number || '',
                required: true,
                regexByType: 'phone',
                errorMessage: 'Invalid phone number'
            });
            // Insert Company Name input field
            newStructure.push({
                id: 'company-name',
                title: 'Company name',
                type: 'input-text',
                metaKey: 'company_name',
                value: attendanceData?.current_user?.company_name || '',
                required: true,
                regexByType: 'title',
                errorMessage: 'Invalid company name'
            });
            return newStructure;
        }
    </script>
<?php
});
/**
 * STEP 2:
 * Register the new custom input fields as a post meta
 * so that it can be saved in the database when the user submits the RSVP form
 */
add_action('init', function () {
    register_post_meta(
        'stec_attend',
        'phone_number',
        array(
            'type'          => 'string',
            'single'        => true,
            'show_in_rest'  => true
        )
    );
    register_post_meta(
        'stec_attend',
        'company_name',
        array(
            'type'          => 'string',
            'single'        => true,
            'show_in_rest'  => true
        )
    );
});
/**
 * STEP 3:
 * Include the new custom input fields from the database when 
 * the attendance data for the event is being retrieved on the front-end
 */
add_filter('stec_attendance_data_meta_fields', function ($fields) {
    $fields[] = 'phone_number';
    $fields[] = 'company_name';
    return $fields;
});
/**
 * STEP 4: 
 * Modify the Attendance Form Structure on the Admin via stecFilterAttendFormContentAdmin JavaScript filter
 * to include the new custom checkbox field
 * 
 * This is similar as STEP 1 but for the Admin panel
 */
add_action('admin_footer', 'stec_attendance_custom_form_admin');
add_action('wp_footer', 'stec_attendance_custom_form_admin');
function stec_attendance_custom_form_admin() {
?>
    <script>
        window.stecFilterAttendFormContentAdmin = function({
            structure,
            postData
        }) {
            const newStructure = JSON.parse(JSON.stringify(structure));
            newStructure.push({
                id: 'phone-number',
                title: 'Phone number',
                type: 'input-text',
                metaKey: 'phone_number',
                value: postData.current?.meta?.phone_number || '',
                regexByType: 'phone',
                required: true,
                errorMessage: 'Invalid phone number'
            });
            newStructure.push({
                id: 'company-name',
                title: 'Company Name',
                type: 'input-text',
                metaKey: 'company_name',
                value: postData.current?.meta?.company_name || '',
                regexByType: 'title',
                required: true,
                errorMessage: 'Invalid company name'
            });
            return newStructure;
        }
    </script>
<?php
}