Display Hierarchy on events submission form

[cliffy]

Hi, I note the following post: https://theeventscalendar.com/support/forums/topic/changing-the-order-of-event-categories-on-front-end-form/

I have no idea about PHP (yeah, sorry). But surely presenting a category hierarchy if I have created one is the most obvious thing to show on submit your event form?

I know how to modify my functions.php (should that be the actual theme or child theme functions file?)

Can someone give me the code I would need so I can cut and paste. I just want the complete hierarchy displayed as I created it at the backend.

(on the note of Hierarchy, if I select a sub-category, should the category above not be automatically selected? e.g. If you break the USA into States and select a particular State, should it not automatically tick USA ? )

Thanks in advance,

[Nico]

Hi Cliffy,

Thanks for reaching out to us! I’ll try to help you out on this.

By default categories in the Submission form are displayed as checkboxes in alphabetical order. I can craft a snippet for you to show them ordered by hierarchy. But unfortunately selecting the parent element automatically would require a more extensive javascript customization and that is out of support scope.

Do you think that would be ok? How many levels does your category tree have?

Please let me know about those,
Best,
Nico

[cliffy]

Hi Nico,

That would be great if you could do that. Three would be sufficient. When you provide the code is it easy to change to four if necessary?

Many thanks,
C

[Nico]

C,

Thanks for the follow-up!

I’ll have that in mind when I craft the snippet. Hope to do so on Monday!

Have a great weekend!
Best,
Nico

[Nico]

C,

Sorry to say I had a very busy day and haven’t got time to look into this snippet. I’ll prioritize this tomorrow.

Thanks for your patience on this,
Best,
Nico

[cliffy]

That’s OK Nico, I really appreciate your help. Look forward to hearing from you.
I understand I should only post one support item per topic (but I do have another issue with the form)
ALL the form fields stretch across the full width of the screen. So Start Date is full width and even the time Hour and Time Minutes and even the AM / PM etc. It doesn’t really look good and not sure why it is not like the Administrator version.

I will try add a screenshot here so you can see. Can you help with this at the same time?

Thanks in Advance.

[Nico]

Hi Cliffy,

Thanks for your patience so far 🙂

I finally jumped into this and crafted a quick snippet to achieve the hierarchical order:

https://gist.github.com/niconerd/bedd0734b5ecaa6114ac

Paste that code into your functions.php file (located at ‘wp-content/themes/your_theme/’) and test if it works as expected. The front-end will remain the same but categories should now be ordered by hierarchy.

Regarding the ‘display issue’ you later shared it’s surely a CSS ‘conflict’. Can you share the URL to check on this? Probably a simple CSS hack will make this right.

Please let me know about the snippet and also about the URL where I can see the conflict,
Best,
Nico

[cliffy]

Hey Nico, I thought for a moment that that didn’t work. I have so many categories – over 70 so even for me it’s confusing just to have one long list.
However, the list IS in the correct order, thank you.
I’m just unsure how the end user will see it but that’s not a reflection on your amazing help, thank you.

I came across this issue also when using the Time.ly product – same issue. It beats me why both organisations have not implemented a hierarchical view. I really need my users to not only select the county they are in but also the area, and I know from experience they will see their county and just select that. That means it is difficult presenting events for a specific area which may contain 4 or more counties.

I will reply below in a private message as you will need a login to view the community add event form. …

Thanks again for all your help.

[cliffy]

This reply is private.

[cliffy]

This reply is private.

[Nico]

Hi Cliffy,

Thanks for the follow-up! Happy to help you on this side, so don’t worry at all 😉

Glad the script worked, you can try to add that to your child theme functions.php to avoid this being cleared by a theme update as you say. I understand your point about the event categories, they are surely not prepared to work that way. Venues hold country/state values, I guess that doesn’t work for your case?

Regarding the width of inputs in the submission form, this is caused by Enfold ‘base’ CSS. You can fix this by targeting the inputs in the form and setting a fixed width for them, and some other custom style. For example, try adding this line to your theme style sheet:


// set fixed with for text inputs in community form
.tribe-events-community-details input[type=text] {
width: 300px !important;
}
// set fixed with for selects in community form
.tribe-events-community-details select {
width: 200px !important;
}
// display event date fields in the same line
#EventStartDate, select[name=EventStartHour], select[name=EventStartMinute], select[name=EventStartMeridian] {
display: inline-block !important;
margin-right: 10px!important;
width: 100px !important;
}


There are a bunch of things to re-style there, but the code above should help you start dealing with those.

Please let me know if there’s anything else I can help you with,
Best,
Nico

[cliffy]

Nico,

That is fantastic, thanks so much for your help. I was even able to search the support and find the EventEndDate too and do the same.

I just noticed a problem with the date picker though for the Start Date (and End) when the calendar is displayed. The month and year drop downs display over the calendar.

I have signed up to Cloudup (I think Brian showed me a screenshot from there) really cool site. So hopefully, here is a screenshot of what I mean:

https://cldup.com/mOXFb-rhoq.JPG

In addition. The category hierarchy you helped with works brilliant now. It may have been the latest update, but it shows the complete indented list. (see below). I wonder though if it is possible to make that display thinner? You will see the “68 more >” right over to the right side of the screen. Is there a way to show that expand button closer to the titles?

Here is the view when you click the 68 more > link … (looks great!)

Thanks again in advance 🙂

*unsure how to embed them as images rather than link. Tried the img tag above but it didn’t work :/ Oh well.

• This reply was modified 10 years, 9 months ago by cliffy. Reason: images didn't work
• This reply was modified 10 years, 9 months ago by cliffy.

[Nico]

Howdy Cliffy,

Glad you found my tips helpful and that you are making good progress on that 🙂

Regarding the date picker dropdowns, this might help you get started:

.ui-datepicker-month, .ui-datepicker-year {
padding: 0!important;
width: 70px !important;
display: inline-block !important;
margin: 0 !important;
}


Regarding the width of each category (which indeed looks really nice), you can adjust it like this:

ul.tribe-categories-with-children {
// you can also set a fixed width like 300px if it works best for the site
width: 50% !important;
}


There’s no need to embed the images, linking them is ok 😉

Hope you have a great weekend,
Best,
Nico

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts