Custom bookings views

Hi,
EM user here.

Your links do not work as they can only be viewed by logged in users.

Additionally, I do hope this is not your live site? Maps do not work, no link to your privacy statement, etc. ??

On a desktop your pagination is somewhere half the page on the right. ??

• This reply was modified 5 years, 11 months ago by Stonehenge Creations.
• This reply was modified 5 years, 11 months ago by Stonehenge Creations.

Only the files you can edit are located in events-manager/templates. You do need to be careful that you use the exact right folder tree in your theme folder, else EM will never find it.

Hello Patrick thanks for the prompt reply, yes I know, if you see at the bottom I am saying I can provide the login details, I don’t really feel to post them here.

I made some screenshots of the pages I would like to customize

general bookings table: https://drive.google.com/file/d/1WXFhfymwz4S0v_umvMBRAzBjweOv6lTZ/view?usp=sharing

bookings overview per event: https://drive.google.com/file/d/1JQX0nnq9YKOs_qNRWr0pccHbIk9QhShY/view?usp=sharing

bookings overview per client / user: https://drive.google.com/file/d/1WOrySrPdx7nRGhWf-lVvaNUaUtYDZH-G/view?usp=sharing

As mentioned I believe those tables gets created by the em-bookings-table.php file in the classes folder, but I was not able to overwrite that template or find a template in the template folder.

Cheers

Hello Patrick, i am just starting laying down the foundations – is a dev site, yes I know the pagination is not ok on desktop, I am focusing on mobile (hence the need to move avay from the booking table overview and have a flex-box one), after the mobile version is polished I ll tackle the desktop one. I live in The Hague by the way ??

• This reply was modified 5 years, 11 months ago by mbri.

Not really sure what it is exactly you are trying to accomplish… The screenshots show the default EM Admin pages. Admin Pages never have templates. You can only change that by editing the core file and that will get lost upon every update. The thing is that it uses a lot of EM javascript etc for the filters, so a template file would easily break that. Also it may look like one file, but EM uses a lot of functions behind the scenes to generate a single admin page.

It’s is better to “simply” target the layout with css.

I don’t use front-end submission myself, but I did dequeue the complete EM css and formatted it to my linking (www.gidspatrick.nl/agenda).

If you’re not afraid of coding, you could recreate the entire code for the pages, leaving the core files alone and recreate a new output. But… I have noticed that that does not always come easily.

Yes, EM has a lot of hooks and filters, but not for everything. Some functions use $this-> and then it will no longer work if it’s called from outside of the main EM_Object.

In general,
WordPress Admin pages are not made for mobile use. The editor (now) is (if you do not intensely hate Gutenberg, like me. LOL). The core WP Table WP_List uses hard coded tables to be generated and so responsiveness is lost there.

Hi Patrick thanks a lot for your replies!
Basically I would like to have a custom view of those admin pages. That view need to be responsive so not in a table. As mentioned I have identified where those tables gets created, in the em-bookings-table.php file which is located in the classes folder.
Any idea on how to create a custom view/template for those admin pages?
No need to be fancy, just an overview of all bookings received with contact info.
Cheers

You really should ask yourself how useful and most of all: workable, these pages will be if viewed on a mobile phone. They are not meant for use on such small screens. You will doing a lot of work and (my personal belief is) that will never really work well.

Even if you convert the table cells to divs, the responsiveness will make it really unreadable. Links will no longer be together and the whole overview (and with that usability) will be lost.

And again, you would have to do a complete rewrite of the php file and put it back manually after every update. Not something I would do. Just have people use bigger screens (iPads in landscape mode will work just fine) and save yourself a whole lot of hassle.

If you just want booking name, email and number of tickets, then simply use the Printable View. That has no links or actions, just a simple overview.
The link is located in the Edit Event -> Booking Stats.

To create an extra button in the Bookings Table, you can use this snippet:

/* === Add Printable View button to Manage Bookings === */
function button_printable_view() {
    global $EM_Event;
    echo '  <a href="' . EM_ADMIN_URL . '&page=events-manager-bookings&action=bookings_report&event_id=' . $EM_Event->event_id . '" target="_blank" class="page-title-action">' . __('Printable View','events-manager'). '</a> ';
}
add_action( 'em_admin_event_booking_options_buttons', 'button_printable_view', 10 );

• This reply was modified 5 years, 11 months ago by Stonehenge Creations.

Hi Patrick thanks a lot again for your replies and the tip,

Let me show you some views I have made on mobile, i believe it is worth the effort, and I am up to write all needed css, no problem with that.

Basically what I would like to achieve is to rewrite the class EM_Bookings_Table{} to making it output a div instead of a table.

https://drive.google.com/file/d/1001gLd7ySkbbez5tvA93IymZMZo4aWS5/view?usp=sharing
that is how I changed the default table into a div keeping actions link and using icons, I think is usable on mobile.

https://drive.google.com/file/d/10BWSnFEJcEUCqyyYRi-y5eyFonpGhdls/view?usp=sharing this one is how I changed the mybookings.php template again into a series of div making it usable for people attending events do view nd manage their booking from their phone as it should be in 2019

The same result I would like to achieve “rewriting” or overriding the table that gets created in the EM_Bookings_Table{} class in the em-bookings-table.php file. I would not like to have to modify the file and have to upload it again every update.

An alternative could be create a template like the mybookings.php one, but then showing the bookings that a user has received for its events, with actions buttons.

I am happy to share my templates and css code for the mobile

• This reply was modified 5 years, 11 months ago by mbri.

I personally disagree with the “as it should be in 2019”. Some things are just not best suited for mobile.

Good luck, as I already said: WordPress creates Admin Column Lists as tables. So, forcing it to divs would mean changing the core.

• This reply was modified 5 years, 11 months ago by Stonehenge Creations.

Hi Patrick. forcing my target users to use a laptop is not an option. Have you seen the mobile version I have created? I believe is suited. You gave me a brilliant idea with using the printable view, since that one has a template I can modify. I will give it a shot and post the result.
Where should I add the snippet you shared for the button? I would like to have that button/link on the events.php file (this https://drive.google.com/file/d/1001gLd7ySkbbez5tvA93IymZMZo4aWS5/view?usp=sharing is the mobile version i made) so when my user click on the icon face it will see the printable view instead of the ugly admin table ??

Hi Patrick just an update, I have added the link to the printable view to my customized events.php file so now it is working as I wanted it. I have started customizing the template of the printable view to move away from a table so it can be responsive.
As soon as I am done I am going to post the result. That was a great tip/idea you gave me thanks a lot!
This is a workaround that for now is acceptable, still I would appreciate some directions (not only from you of course but also from some of the Events Manager team) on how to override the EM_Bookings_Table{} class that is in the em-bookings-table.php file without loosing changes at any updates OR how to create a template like the mybookings.php one, but then showing the bookings that a user has received for all his/her events keeping the filtering options.
Thanks!

Hello the tips about the printed version was a good enough workaround.

You can see the results here: https://drive.google.com/file/d/1GDAb4PvFQt_gmw2KBjXrXCm8eek1RRFV/view?usp=sharing

I have a little challenge, there is no conditional placeholder for phonenumber and extra comments on the booking, how I can hide those 2 fields if they are empty?
I have checked the tutorial on conditional placeholder but the example is too difficult for me ?? still learning

Cheers

To be honest: with all my experience with EM coding.. I never got custom conditional placeholders to work either! LOL ??

What I usually do is create a normal placeholder and put the condition in there.

// Only show Phone Number if not empty.
function em_customplaceholder_show_phone($replacement, $EM_Booking, $result) {
	global $EM_Event;
	if( $result == '#_ccShowPhone' ) {
		$show_phone = $EM_Booking->output('#_BOOKINGPHONE');
		if( !empty($show_phone) ) {
			$replacement = 'Phone Number: ' . $show_phone .'<br>';
		}
		else {
			$replacement = '';
		}
	}
	return $replacement;
}
add_filter('em_booking_output_placeholder', 'em_customplaceholder_show_phone', 1, 3 );

Please note that there are different filters with different variables.
If the retrieved info is about an event, use em_event_output_placeholder and $EM_Event. If it contains booking info, use em_booking_output_placeholder and $EM_Booking. And of course for locations: em_location_output_placeholer and $EM_Location.