Support

Home Forums Event Espresso Premium Table View with ticket selector and checkout button

Table View with ticket selector and checkout button

Posted: May 9, 2018 at 1:06 pm


tnbadmin247

May 9, 2018 at 1:06 pm

Hi there,

We are trying to have a table view of tickets in one page. I got most of the layout down with this template suggestion I found in another thread:
https://gist.github.com/joshfeck/e8fcb3946f56490d1384bfcc449caa9b

And CSS to show hide the description elements that we want for the users to know what they’re signing up for. All beautiful so far.

Now we are getting an error when selecting one of the tickets in any event with multiple tickets. Whenever you pick one and then click the (now changed) “View Cart” (in our case registrations), the page treats it as though we are trying to add a second ticket and throws the error that it is not allowed, because our events are all set to 1 ticket per person.
I have to put the bullet on the first item (even if I picked one of the other tickets), in order to be able to actually move on to the cart.

This is our page, so far:
https://dev-sheenaspl.pantheonsite.io/classes-list/

It’s odd because the same error doesn’t happen on the events that don’t have multiple (different) tickets, at the bottom of that same page. These work just fine. So something is up with the multiple tickets bit.

I thought of hiding the buttons altogether once the ticket is added – and this brings me to a second question for that page -, I would need a “Proceed to Checkout” button at the bottom of the page, much like:
https://www.smarterselling.com.au/stages-of-development/

[ESPRESSO_CHECKOUT] doesn’t seem to exist as a shortcode anymore however. So I’m wondering if there is another bit of code to add that “proceed to checkout” button?

And on a side note, is there a way to add an “empty cart” button as well on that page? So the user could just restart the selection right there right then instead of going to the cart to clear everything.

From a technical point of view: does the plugin do a “is_in_cart” check before loading the items on the page? So it would just not have the items available/deactivate the selection if they are already in the cart?


Josh

  • Support Staff

May 9, 2018 at 1:16 pm

Hi there,

I’m afraid this type of customization is outside of the scope of support. The view cart button will add more items to the cart if more selections are made within the ticket selector form. You might hide those altogether and add the mini cart widget or a link in the navigation menu.

I can answer you question about the [ESPRESSO_CHECKOUT] shortcode though, that shortcode is on this page:

https://dev-sheenaspl.pantheonsite.io/registration-checkout/


tnbadmin247

May 9, 2018 at 1:28 pm

“Outside the scope”?
Josh, that is your repo!!!

So that checkout shortcode is for the whole checkout experience. My question is more: is there another bit of code for a “proceed to checkout” link/button? Simple, just a link. Because if I just link to the checkout page it says that page can’t be directly accessed.

What about “empty cart” button?


Josh

  • Support Staff

May 9, 2018 at 1:53 pm

Correct. Outside of scope. I routinely publish gists of example code, but that example code is just that, an example. We’re happy to provide examples where possible, but supporting custom development and extending examples into production ready code is outside the scope of support.

With regards to the proceed to checkout link, you’ll find examples of how the Multi Event Registration plugin handles displaying the link conditionally (in the mini cart widget, for example, if nothing in the cart, the link doesn’t display) Here’s a link to the source code:

https://github.com/eventespresso/ee4-mer/blob/master/EEW_Mini_Cart.widget.php#L123


tnbadmin247

May 9, 2018 at 2:00 pm

Correct.

Except, I wasn’t asking for you to make anything new, but considering it is your code I’d imagine you’d be better suited to know what the cause of that error is. Anyways… have a great day.


tnbadmin247

May 15, 2018 at 10:00 am

Hello Garth,

Here it goes:
https://dev-sheenaspl.pantheonsite.io/classes-list/

First Event page:
https://dev-sheenaspl.pantheonsite.io/programs/first-choice/

No customization, straight from the box, aside from stuff that is being hidden with CSS – events are free so we don’t show prices and etc -.

Process done by the user:

  • 1 – click “Register” link to event page;
  • 2 – select one of the ticket options (radio button);
  • 3 – button at the bottom goes from “Select” to “View Registrations”;
  • 4 – clicking this button renders the error, saying the user is trying to add more than one ticket, instead of proceeding to checkout.

Events are set to 1 ticket per user, so that would be the correct behavior if the user were going away from the page and back trying to Select something different. But still, in the selection part of the process (2-3), a second click on what is supposed to be “a link to check out” (View Registrations), tries to add a new ticket and gives an error that the action isn’t permitted.


Josh

  • Support Staff

May 15, 2018 at 12:47 pm

Ok, I’m looking at the site right now and I have a question. After step 2, there should be a modal that displays. It appears that it’s one of the items that’s being hidden with CSS.

https://slack-files.com/T02SY781D-FAPJDSB1N-818e990507

Is that intended, you don’t want the modal to be displayed?


tnbadmin247

May 15, 2018 at 12:51 pm

It’s intended, we don’t want the modal to display each time, because eventually if all works out what we would like is the ticket selector on the table view page. If the modal pops-up each time the user selects a course people will get irritated.

I did include the minicart at the bottom (it was showing before, and it’s not right now, but that’s on me).


Josh

  • Support Staff

May 15, 2018 at 1:31 pm

You can add the following code to a site specific plugin:

function ee_custom_mer_radio_button_clear() {
    wp_add_inline_script( 
        'espresso_multi_event_registration',
        'jQuery( document ).one( "ajaxStop", function() {
            jQuery( ".ticket-selector-tbl-qty-slct" ).each( function() {
                jQuery( this ).prop( "checked", false );
            });
        });'
    );
}
add_action( 'wp_enqueue_scripts', 'ee_custom_mer_radio_button_clear', 11 );

and that will clear the radio button that’s selected after adding to the cart, and avoid the error you saw.

Here’s a link to the documentation on how to add a site specific plugin:

https://eventespresso.com/wiki/create-site-specific-plugin-wordpress-site/

The reason we recommend the site specific plugin instead of adding code directly in the functions.php of your theme is because this way you’ll keep better track of where your customizations are. This avoids having to go hunting for them later when they need to be updated.


tnbadmin247

May 15, 2018 at 3:28 pm

Thank you for that bit of code Josh, that’s appreciated.

Unfortunately, it didn’t result in anything, the error is still there. I checked the class of the radio buttons and it matches, thus I’m not sure for this “attempt”.

I deleted all the changes I had done and started with the plugin from scratch. The error is there on ticket selection (out of the box), if the user selects, closes the modal box, and clicks on “View Cart”.

With a limit of 1 ticket per event the submit button at the bottom goes straight to the Proceed to Registration (MER deactivated), there isn’t a chance to click the button again, which is understandable.

Then, I reactivated MER and instead of loading the Registration page, this is when the button changes from “Add to Event Cart” to “Proceed to checkout”.
The error doesn’t happen on single tickets, just when there are multiple ticket options for the same event (radio buttons)

I mean, it doesn’t seem normal. A glitch in the code where the class of the input button “View Cart” is not being picked up on multiple tickets? I see that the class doesn’t really change, so I’m not sure how/where the plugin does the call/change.

Sorry for the long post, just trying to describe everything I tried on our end.

This is the test environment where I reset everything:
https://testee-sheenaspl.pantheonsite.io/classes-list/

and first event choice:
https://testee-sheenaspl.pantheonsite.io/programs/first-choice/

Thanks for any thoughts.


Josh

  • Support Staff

May 15, 2018 at 3:42 pm

Hi again,

Did you check the page source to ensure the added inline JS is in the source of the page?

I tried to check your new site, but it will not load, and the original dev site has this error:

Fatal error: Cannot redeclare ee_custom_mer_radio_button_clear() (previously declared in /srv/bindings/1f47b1614ee94ae188c8a330869d7f3a/code/wp-content/themes/foundationpress/library/custom-functions.php:379) in /srv/bindings/1f47b1614ee94ae188c8a330869d7f3a/code/wp-content/themes/foundationpress/library/custom-functions.php on line 401

Ideally that code should be placed only once into a custom functions plugin. It appears that you’ve copied and pasted the code into the themes functions.php file twice and that’s resulted in a fatal error.


Josh

  • Support Staff

May 15, 2018 at 3:57 pm

You might also try loading the version of jQuery that’s bundled with WordPress. The code I shared with you was tested on a site that uses v1.12.4. Your site is running jQuery 3.3 right?


Josh

  • Support Staff

May 15, 2018 at 4:06 pm

Or try this which does the same thing but uses a different event handler:

function ee_custom_mer_radio_button_clear() {
    wp_add_inline_script( 
        'espresso_multi_event_registration',
        'jQuery( document ).ready(function() {
            jQuery( document ).ajaxComplete( function() {
                jQuery( ".ticket-selector-tbl-qty-slct" ).each( function() {
                    jQuery( this ).prop( "checked", false );
                });
            });
        });'
    );
}
add_action( 'wp_enqueue_scripts', 'ee_custom_mer_radio_button_clear', 11 );


tnbadmin247

May 16, 2018 at 7:47 am

My bad, probably didn’t see that as I was wrapping up for the day.

The function was added to the page yes.

That second one you sent for ajaxComplete did the trick!! Thank you.

May I suggest though, that this be corrected in the plugin!? The event handler for the submit input (.ticket-selector-submit-btn .ticket-selector-submit-ajax) on ticket selector should be able to accept a second click without having to refresh the page, in case the user simply closes the modal pop-up (instead of moving away from the page). May be only my user case, still a simple glitch that could be fixed fairly easy with a different class being added or removed from the input button in the ajax function.

There was no customization on our end on this latest test, so it is something from the plugin itself.

For now this works.


Josh

  • Support Staff

May 16, 2018 at 8:46 am

No need for the suggestion, there’s work in the plugin to correct this, but I’m assuming you want a solution right now vs. wait for the next release.

The support post ‘Table View with ticket selector and checkout button’ 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