add custom filters to the event calendar plugin programatically to frontend
I want to add custom filters to the filter bar of the event calendar. I have added two dropdown as categories and location programtically, when I submit the selected filters to find events, it gives me error in console as
Uncaught TypeError: Cannot read property 'length' of null
in \plugins\the-events-calendar\src\resources\js\tribe-events-bar-min.js
I tried to print the value of e, so it is giving as
e = http://192.168.10.200:8181/asha/c2c/events/month/
e =
e = 55
e = null
Now there are 4 filters in filter bar as
Events In - Date (Datepicker)
Search - Keyword (Input text)
Categories (Select dropdown of categories)
Location (Select dropdown of locations)
I added filter in \plugins\the-events-calendar\src\Tribe\Main.php like
add_filter( 'tribe-events-bar-filters', array( $this, 'setup_date_search_in_bar' ), 1, 1 );
add_filter( 'tribe-events-bar-filters', array( $this, 'setup_keyword_search_in_bar' ), 1, 1 );
add_filter( 'tribe-events-bar-filters', array( $this, 'setup_category_search_in_bar' ), 1, 1 );
add_filter( 'tribe-events-bar-filters', array( $this, 'setup_location_search_in_bar' ), 1, 1 );
and the functions for above filters are
category filter
public function setup_category_search_in_bar( $filters ) {
$term_list = get_terms( array(
'taxonomy' = 'tribe_events_cat',
'hide_empty' = false,
) );
$optionsList ="";
foreach ($term_list as $category) {
$optionsList .= 'option value="'.$category-term_id.'"'.$category-name.'/option';
}
if ( ! empty( $_REQUEST['tribe-bar-category'] ) ) {
$value = esc_attr( $_REQUEST['tribe-bar-category'] );
}
if ( tribe_get_option( 'tribeDisableTribeBar', false ) == false ) {
$filters['tribe-bar-category'] = array(
'name' = 'tribe-bar-category',
'caption' = esc_html__( 'Categories', 'the-events-calendar' ),
// 'html' = 'input type="text" name="tribe-bar-search" id="tribe-bar-search" value="' . esc_attr( $value ) . '" placeholder="' . esc_attr__( 'Keyword', 'the-events-calendar' ) . '"',
'html' = 'select name="tribe-bar-category" id="tribe-bar-category"
option value="select_category" selected="selected" disabled="disabled"Select category/option
'.$optionsList.'
/select',
);
}
return $filters;
}
location filter
public function setup_location_search_in_bar( $filters ) {
$venue_list = tribe_get_venues ( );
// echo "pre";print_r($list);
$optionsList ="";
foreach ($venue_list as $venue) {
$optionsList .= 'option value="'.$venue-ID.'"'.$venue-post_title.'/option';
}
if ( ! empty( $_REQUEST['tribe-bar-location'] ) ) {
$value = esc_attr( $_REQUEST['tribe-bar-location'] );
}
if ( tribe_get_option( 'tribeDisableTribeBar', false ) == false ) {
$filters['tribe-bar-location'] = array(
'name' = 'tribe-bar-location',
'caption' = esc_html__( 'Locations', 'the-events-calendar' ),
// 'html' = 'input type="text" name="tribe-bar-search" id="tribe-bar-search" value="' . esc_attr( $value ) . '" placeholder="' . esc_attr__( 'Keyword', 'the-events-calendar' ) . '"',
'html' = 'select name="tribe-bar-location" id="tribe-bar-location"
option value="select_location" selected="selected" disabled="disabled"Select location/option
'.$optionsList.'
/select',
);
}
return $filters;
}
How can I get these dropdown values if selected and find events accordingly.
Thanks in advance.