Support

Home Forums Event Espresso Premium Styling the Event Page

Styling the Event Page

Posted: November 20, 2019 at 12:06 pm

Viewing 21 reply threads


tneumann

November 20, 2019 at 12:06 pm

I am in the process of setting up my events in Event Espresso. I have no problem creating an event and adding the necessary data to it (date/time, tickets, etc.). Where I am having a problem is styling the event display, as you say in your own documentation it is rather generic looking. I have looked at a number of support responses as well as the documentation, but I am still not seeing any examples of how to approach this. I am using Divi and Divi Builder, but I am not sure integration there makes sense. Ultimately I would really like to have an “event” template that gets used to display the information for an event.


Josh

  • Support Staff

November 20, 2019 at 12:15 pm

Hi,

The Divi theme uses generic styles for its posts, so this isn’t a surprise. May I ask what kind of styling are we talking about? For example are you looking to change the layout, change colors, text sizes/spacing?


tneumann

November 20, 2019 at 4:04 pm

Hi Josh,

Thanks for your rapid response! I would like to style all of the items that you mention…layout order, visual layout, colors, text sizes/spacing. I understand, based on some coding work that I did with the EE Event Grid Add-On that there are even values that I might interrogate and utilize.

Ideally I would like to select a page template from the “Page Template” drop down oin the Add Event screen. From a programming point of view I believe I am capable of doing that…just need to understand the structure need to put that together…maybe an example of the necessary files and base code would help…

Thank you!
Tim


Josh

  • Support Staff

November 21, 2019 at 6:37 am

Hi Tim,

The layout order of the event page can be controlled with the settings in the Template Settings page. You go to Event Espresso > Events > Templates, then set “Use Custom Display Order?” to Yes. Then you can drag/drop the items to the preferred order.

If you prefer not to use the above options, and do a custom page template instead, you can follow this guide that explains how to get started:

https://eventespresso.com/wiki/ee4-custom-post-types/#single_event_template

After you have your starter template in place, you can copy/paste the desired elements from the stock template parts used by Event Espresso. Those are located in the EE plugin’s /public/Espresso_Arabica_2014 folder.

For example, to display the ticket selector in your custom template, you’ll copy the code from the content-espresso_events-tickets.php file.

With regards to changing the visual layout, colors, text sizes/spacing, that’s normally something that you would do by adding some CSS to a custom stylesheet, so you would not need to do a custom PHP template to make those changes.


tneumann

November 22, 2019 at 3:43 pm

Hi Josh,

Thank you for your response.

I have created a single-espresso_events.php file in my child theme directory and have added the add_filter statement to my functions.php file in my child theme as well. I have made some changes in the single-espresso_events.php and I am seeing the desired changes in the event pages now. So that is working great, thank you!

I have one additional step I would like to be able to complete, and I don’t know if I can do this as an add-on to the above approach, but it would be great if I could. In the Add Event screen, I would like to be able to add these changes as an additional “Page Template”

If I were able to do this then I could format specific events in specifc ways.

Thanks,
Tim


Josh

  • Support Staff

November 22, 2019 at 5:24 pm

The single-espresso_events.php will be the default and you can copy that file and give it a new name. You can make more than one copy and modify each one so it has its unique specific format.

Then, in each template copy, you’ll add a PHP comment at the top of the file as outlined here:
https://developer.wordpress.org/themes/template-files-section/page-template-files/#creating-page-templates-for-specific-post-types

e.g.

/*
Template Name: Custom Layout A
Template Post Type: espresso_events
*/

then a second layout template could have:

/*
Template Name: Custom Layout B
Template Post Type: espresso_events
*/


tneumann

December 4, 2019 at 4:08 am

Hi Josh,
Thanks for the additional information. I have made significant progress at creating an “overridden” page, modifying the default layout and adding in the styling that I was looking for. So all is good there!

I am currently struggling with one issue though. For an event, I am retrieving an $event object (EEH_Event_View::get_event($post->ID)), from there I would like to retrieve the Datetime(s) for that event (I ony have one per event) and then the tickets available for that Datetime. The goal being the iterate through the tickets available and pull out the price for each.

I am struggling with this and I seem to be getting back an empty array when I instantiate the $tickets object…

$event = EEH_Event_View::get_event( $post->ID );
if ( ! $event->is_sold_out() ) {
    $tickets = EEH_Event_View::event_tickets_available( $post->ID );
    $ticket = reset( $tickets );
    if ( $ticket instanceof EE_Ticket ) {
        $ticket_price = $ticket->pretty_price();
        $ticket_price_data_value = $ticket->price();print_r(“Two”);
        $ticket_price = $ticket_price_data_value == 0 ? __( ‘Free’, ‘event_espresso’ ) : $ticket_price;
    }
    $tickets_remaining = $datetime->tickets_remaining() === EE_INF ? __(‘Unlimited’,’event_espresso’) : $datetime->tickets_remaining();
} else {
    $ticket_price = __( ‘N/A’, ‘event_espresso’);
}

I am wondering, am I doing this the right way and/or is event status (upcoming, etc.) affecting this return?

Thanks,
Tim


Tony

  • Support Staff

December 4, 2019 at 5:15 am

Hi Tim,

The event status won’t affect the above, or at least, an event status of upcoming wouldn’t, however, what you have described that you want to do differs from the method you are using.

I am currently struggling with one issue though. For an event, I am retrieving an $event object (EEH_Event_View::get_event($post->ID)), from there I would like to retrieve the Datetime(s) for that event (I ony have one per event) and then the tickets available for that Datetime. The goal being the iterate through the tickets available and pull out the price for each.

You have an EE_Event object, but then you skip most of the above and just go for an array of tickets using a helper method, ultimately the end result would be that you have an array of available tickets and that’s likely exactly what you need, however the code above references a DateTime:

$tickets_remaining = $datetime->tickets_remaining()

Which unless you’ve set up outside of the above code (which wouldn’t really make sense) will not work.

Using the helper method is fine if that’s what you want to use, it’s just a little different from your post. You’ve mentioned:

I am struggling with this and I seem to be getting back an empty array when I instantiate the $tickets object…

Have you confirmed that you are in fact getting an empty array back from the above call?

Personally I recommend using Kint as its much nicer to view the objects within it, I personally use: https://en-gb.wordpress.org/plugins/kint-debugger/

Then you’d wrap $tickets in d();, like so:

d($tickets);
$ticket = reset( $tickets );

Then that code runs you’ll get a much nicer debug output than print_r/var_dump etc.

If you are getting an empty array we can work through some more troubleshooting steps.

The other option is to use the methods directly available on the EE_Event object (which is essentially what that helper method is doing for you) but really it depends on the specifics of what you need.


tneumann

December 4, 2019 at 11:59 am

Hi Josh,

Thank you for the additional information. Some of that makes sense, and some does not, due to my inexperience with the product. Would it be possible for you to give me a rough example of how you would put that together? I will attempt to pseudo-code what I am looking to do…

$event = EE_Event(post->ID)
$datetimes = $event->$dateimes
$datetime = $datetimes(only $datetime that exists withint the array)
$ticketprices = $datetime->ticketprices
for each $ticketprice[ 0 to n]
output $ticketprice

Not sure if that makes sense, but seemed like the most efficient way to convey what I am looking to do. I understand coding, but not PHP of the Event Espresso structure. I can muddle my way through the PHP if you can help me with a starting point.

Thanks,
Tim


Tony

  • Support Staff

December 4, 2019 at 12:27 pm

What you have is most of the way there, except that you’re using reset() on $tickets, which moves the array pointer to the first element and returns it, so you’ll only ever work with 1 ticket regardless of how many tickets you have in the event.

So you want an array of ticket prices by the time you’ve finished?

E.g array( '£22.00 (GPB)', '£21.50 (GBP)');

That’s what you’ve asked for about but that seems a little strange so I’m not sure if that is what you need? I’ll happily give you an example:

$event = EEH_Event_View::get_event( $post->ID );
$ticket_prices = array();
if ( $event instanceof EE_Event && ! $event->is_sold_out() ) {
    $tickets = EEH_Event_View::event_tickets_available( $event->ID() );
	foreach( $tickets as $ticket ) {
		if ( $ticket instanceof EE_Ticket ) {
			$ticket_price = $ticket->pretty_price();
			$ticket_price_data_value = $ticket->price();
			$ticket_price = $ticket_price_data_value == 0 ? __( ‘Free’, ‘event_espresso’ ) : $ticket_price;
			$ticket_prices[] = $ticket_price;
		}
	}
	// Do something with $ticket_prices to output the prices here.
}

Pulls the event object for the current post.
Checked you have an event object and it’s not sold out.
Pulls all available tickets from the event.
Loops over each ticket and creates a $ticket_prices array as shown above.
You can then output $ticket_prices however you prefer.

The above helper method (This EEH_Event_View::event_tickets_available( $event->ID() );) just uses the methods available on the EE_Event object itself to pull all of the details in and returns an array of EE_Tickets. It depends what you want to do if you need to use the EE_Event object directly and go through all of the steps as if all you want is an array of tickets, you can use the helper, if you want more control you build your own using the EE_Event model methods.


tneumann

December 4, 2019 at 12:28 pm

Hi Josh,

It occurred to me, maybe I should clarify exactly what I am hoping to do…in plain English! lol

For any single event, I will have one date/time for that event, I will have two tickets for that event(date/time), potentially more. One ticket would be based upon single occupancy lodging, and one ticket would be based upon double occupancy lodging. I want to be able to look through all the tickts that are available for an event, so I can grab the price for each of the tickets and display it elsewhere in a single event listing.

Thanks,
Tim


tneumann

December 4, 2019 at 12:29 pm

Hi John,

Just got your post as I was typing my clarification…I think what you sent is exactly what I am after. I will check it out and let you know!

Thanks,
Tim


tneumann

December 4, 2019 at 12:39 pm

Hi Josh,

I added your code to my page and it is working…

$event = EEH_Event_View::get_event( $post->ID );
d($event);
$ticket_prices = array();
if ( $event instanceof EE_Event && ! $event->is_sold_out() ) {
$tickets = EEH_Event_View::event_tickets_available( $event->ID() );
d($tickets);

foreach( $tickets as $ticket ) {
if ( $ticket instanceof EE_Ticket ) {
$ticket_price = $ticket->pretty_price();
$ticket_price_data_value = $ticket->price();
$ticket_price = $ticket_price_data_value == 0 ? __( ‘Free’, ‘event_espresso’ ) : $ticket_price;
$ticket_prices[] = $ticket_price;
}
}

d($ticket_prices);
// Do something with $ticket_prices to output the prices here.

}

I added in Kint as you suggested and it is showing me that…

d($tickets); is an empty array…

d($event); is showing me the correct event though…

Confused about that?

Thanks,
Tim


Tony

  • Support Staff

December 4, 2019 at 1:09 pm

Can you link me to the event in question on your site, please?


tneumann

December 4, 2019 at 1:21 pm

Hi Tony,

Here is the event on my site…

https://softliteworkshops.com/events/ws-2020010901/

New code is not there, it is on internal dev site…I can push it there if you want…

Thanks,
Tim


tneumann

December 4, 2019 at 1:27 pm

Hi Tony,

I went ahead and put Kint on the production site and push the new code out there as well. Figured that would make it easier for you to inspect the objects in question…

Thanks,
Tim


tneumann

December 4, 2019 at 1:29 pm

Hi Tony,

I have inspected multiple events, as they are all sharing this code (coming from single-espresso_events.php in a child theme) and all are returning an empty array…

Thanks,
Tim


Tony

  • Support Staff

December 4, 2019 at 1:37 pm

For this event: https://softliteworkshops.com/events/ws-2020010901/

Your tickets are not active, they show as upcoming… meaning they are not ‘available’ for purchase and the above method will not return those.

The above method is only going to return ticket with a TKT_start_date <= now AND the TKT_end_date >= now, meaning your tickets are available for sale.

Do you want the tickets available on an event regardless of their status or are you displaying the price when they become available for purchase?


tneumann

December 4, 2019 at 1:48 pm

Ironically I asked that question at the top of this post…was upcoming an issue? So I guess now we know it is…

I would like to get the ticket prices either before they are on sale, or while they are on sale…

Thanks,
Tim


Tony

  • Support Staff

December 4, 2019 at 1:55 pm

Ironically I asked that question at the top of this post…was upcoming an issue? So I guess now we know it is…

What you actually asked, is if the event status would affect anything, which is not the problem here, the ticket status is.

The event and ticket status are completely separate and your code specifcially checked for an event status (sold out), nothing was mentioned about upcoming tickets 🙂

I would like to get the ticket prices either before they are on sale, or while they are on sale…

Then you’ll need to use EE_Event model directly, something like:

$tickets = $event->tickets();

Will pull all tickets saved within an event.


tneumann

December 4, 2019 at 2:01 pm

Hi Tony,

I thought that’s what I was asking…I guess my lack of understanding of the core internals is really hampering what I am trying to do here! lol

My apologies for the miscommunication…

Long story short, I updated to code to include the new constructor you just provided an I indeed now see my tickets!

Thank you all for your excellent support today!!!!!
Tim


Tony

  • Support Staff

December 5, 2019 at 3:13 am

No problem, I’m glad that worked for you.

I highly recommend you read over the docs on the model system:

https://github.com/eventespresso/event-espresso-core/tree/master/docs/G–Model-System

The models can get all of the information you need and if there isn’t a method already available to pull what you need it’s simple enough to pass where conditions to something like get_all() or get_one() as the models handle joining all of the data for you once you know how they work and the relationships between the different entities.

Viewing 21 reply threads

The support post ‘Styling the Event Page’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso