Skip to content

Instantly share code, notes, and snippets.

@andrasguseo
Last active January 30, 2024 21:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrasguseo/6596c17792418afea84781f2c46a7e6a to your computer and use it in GitHub Desktop.
Save andrasguseo/6596c17792418afea84781f2c46a7e6a to your computer and use it in GitHub Desktop.
ET+ > Show Attendee Registration Field for first attendee only.
<?php
/**
* Show Attendee Registration Field for first attendee only.
* (Hide field for subsequent attendees.)
* Can handle multiple fields.
*
* Usage: Add the snippet to your functions.php file or with a plugin like Code Snippets.
*
* @author: Andras Guseo
*
* Plugins required: Event Tickets Plus
* Created: January 30, 2024
*/
function et_hide_fields() {
// Bail if we don't have Event Tickets Plus
if ( ! class_exists( 'Tribe__Tickets_Plus__Main' ) ) {
return;
}
// Generic functions.
if (
(
is_single()
&& get_post_type() == 'tribe_events'
)
|| tribe( 'Tribe__Tickets__Attendee_Registration__Template' )->is_on_ar_page()
) {
?>
<script>
function fieldLabels() {
/**
* ADD THE LABELS HERE
* Add the labels of the fields, which you only want to show for the first attendee.
* Only letters, numbers, and space.
*/
const labels = [
'Show for first only',
'Another Label',
'Yet Another Label'
];
return labels.map(label => label.toLowerCase().replaceAll(" ", "-"));
}
function selectors() {
return fieldLabels().map(label => "label[for*='" + label + "']");
}
function waitForElement(selector, callback) {
let element;
const intervalID = setInterval(function () {
element = document.querySelectorAll(selector);
if (element[0]) {
clearInterval(intervalID);
callback();
}
}, 500); // Check every 500 milliseconds
}
function hideEm(fields) {
fields.forEach(
function (item, index) {
// Skip the first attendee
if (index < fieldLabels().length) {
return;
}
// Hide the field.
item.parentElement.style.display = 'none';
}
);
}
</script><?php
}
// Run on Single Event pages.
if (
is_single()
&& get_post_type() == 'tribe_events'
) {
?>
<script>
// Wait for the ticket modal to appear.
waitForElement('div.tribe-modal__wrapper--ar', hideFields);
function hideFields() {
// Listen for button clicks and field change.
document.querySelector('.tribe-modal__wrapper--ar .tribe-tickets__tickets-item-quantity-number-input').addEventListener("change", hideFields);
document.querySelector('.tribe-modal__wrapper--ar .tribe-tickets__tickets-item-quantity-add').addEventListener("click", hideFields);
document.querySelector('.tribe-modal__wrapper--ar .tribe-tickets__tickets-item-quantity-remove').addEventListener("click", hideFields);
const fields = document.querySelectorAll(selectors().join(', '));
hideEm(fields);
}
</script>
<?php
}
// Run on Attendee Registration page
if ( tribe( 'Tribe__Tickets__Attendee_Registration__Template' )->is_on_ar_page() ) {
?>
<script>
waitForElement('.tribe-tickets__form.tribe-tickets__attendee-tickets-item', hideOnAr);
function hideOnAr() {
const fields2 = document.querySelectorAll(selectors().join(', '));
hideEm(fields2);
}
</script>
<?php
}
}
add_action( 'wp_footer', 'et_hide_fields' );
@andrasguseo
Copy link
Author

Maybe, to set fields required, change the following.

function selectors() {
                return fieldLabels().map(label => "input[name*='" + label + "']");
            }

and

function hideEm(fields) {
                fields.forEach(
                    function (item, index) {
                        // Skip the first attendee
                        if (index < fieldLabels().length) {
                            item.setAttribute( 'required', 'required' );
                            item.setAttribute( 'aria-required', 'true' );
                            item.setAttribute( 'placeholder', 'required' );
                            return;
                        }
                        // Hide the field.
                        item.parentElement.parentElement.style.display = 'none';
                    }
                );
            }

It might need some further tweaking though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment