Events Tickets Plus + Enfold quantity buttons conflict with ticket meta data
I have a problem with the custom code from your plugin as it conflicts with theme code from Enfold, and I don’t know who is at fault.
Enfold adds two buttons to change the quantity of a product. But if I have additional data for a ticket/product, it does not work accordingly. I could not yet make out what is exactly causing this, but maybe you could reproduce this and create a fix in your plugin.
Please find an animation attached to be not confused about what the problem is! The second ticket-meta form is not shown after I click on “plus”. Only when I click again (for the last available ticket) but then it is added as “Teilnehmer 2” but actually should be the third added form.
Thanks for your investigation. (I really hope for some support and not blame it on each other, so I have to return either the plugin or the theme)
Thanks for reporting this kaisv!
I checked this on my test site and all seems to work well.
I have an RSVP set up which collects additional attendee meta (name). The ‘name’ field appears after I increase the counter to 1.
Please note that the Enfold > Theme Options > Lightbox Modal Window option needs to be switched off. Here’s a screenshot of that: https://cloudup.com/cJR5JX-QBVw
Here’s a full description of the workaround:
Please check and let me know if that does the trick.
Yes, I can increase the number and I can even put it to the cart.
Did you add the
into the code? I guess you did, just to make sure.
There might be some other setting or maybe a snippet at play here.
What version of Enfold do you have? I’m testing with 4.2.4 without a child theme.
I was talking about the tickets form from events tickets plus, which is different than rsvp. There your suggested change has no effect of course. Anyway I could not yet figure out what difference is between the rsvp form and the tickets form except that there is a div used for the tickets and a table for the rsvp meta data quantity input field.
Still if I try it with rsvp:
That is not shown because it is only added to the “av-single-event-meta-bar-mobile” not “av-single-event-meta-bar-desktop” and the “-mobile” has “display: none;” set by enfold/config-events-calendar/event-mod.css (so this might be an enfold issue, but I could not yet figure out why it is not added to the desktop bar as well because the code in enfold/config-events-calendar/views/single-event.php looks identical for both “bars”…
I can add the rsvp tickets, and that is working (if I remove the “display: none;” part from the css). So I guess that fix has to be applied by enfold sometime.
Still my original issue is open.
Anyway I tracked down the problem:
Enfold renders the a single event with its own template offered in “wp-content/themes/enfold/config-events-calendar/views/single-event.php”. There it renders the meta information two times! (TWO TIMES, important in a moment). It creates a “av-single-event-meta-bar-mobile” and a “av-single-event-meta-bar-desktop”. The bar-mobile is hidden on desktop devices and the desktop bar on mobile devices. Despite being hidden, the meta divs are created at two locations. (Careful by following the recommendations to add your own “single-event.php”, enfold hooks into the selection process of theme files, forcing the usage of theirs at config-events-calendar/config.php:34 !)
Now the script from events tickets plus “wp-content/plugins/event-tickets-plus/src/resources/js/meta.js” (take note: the minified version “meta.min.js” is used, and has to be altered if you want to fix it yourself instead of the non minified verbose version), that is responsible to create the form divs for the additional meta data, calculates the amount of meta divs to add based on the existing divs. BUT that code uses a DOM CLASS selector to find the amount of already appended meta divs. Therefore the current behavior is wrong with enfold! Because the following happens:
- Having 0 products/items selected, does not render addiitonal attendee-meta-divs
- Changing to 1, renders 1 additional attendee-meta-div, but really appends 1 div in BOTH bars (desktop/mobile). leading to TWO/2 new divs.
- Changing to 2, renders NO additional attendee-meta-div, because the
var current_count = $fields.find( '.tribe-event-tickets-plus-meta-attendee' ).length;
gives already “2”.
- Changing to 3, renders 1 additional attendee-meta-div, because there are already two (one in each bar), but really appends 1 div in BOTH bars (desktop/mobile). leading to FOUR/4 new divs.
- And so on!
I assume the code from enfold from “single-event.php” has to be changed to include only one “bar”.Possible fix:
- This reply was modified 1 week, 3 days ago by kaisv. Reason: corrects code rendering (now in a gist)
Great findings! Based on that it definitely looks like an Enfold feature.
And it’s interesting, I have Enfold 4.2.4 on hand and that doesn’t have the issue. Maybe that is also worth pointing out to them. Also downgrading to that version might be a good temp solution for you.
Let me know how this all plays out or if I can help you any further.
It is posted to their forums here: https://kriesi.at/support/topic/woocommerce-events-tickets-plus-quantity-buttons-conflict-with-ticket-meta-data/