Support

Home Forums Event Espresso Premium Reduce clicks for payment process

Reduce clicks for payment process

Posted: January 15, 2016 at 1:36 am

Viewing 7 reply threads


Thomas

January 15, 2016 at 1:36 am

Hello,

(Sorry, I have an active license but the system does not let me post to the EE forum…)

I am using EE 3.1.36.6.P and only ONE payment option:
Electronic Funds Transfer

At the moment the user gets a first page after submitting the registration form, where it states
Payment Overview and
Please choose a payment option

Then the user must (1) click on the button below the title “Off-line Payment Options” in order to get to another button which needs to be (2) clicked to confirm/finialize the registration process (terminating the session).

As you can see, there are a lot of clicks just for one single payment option.
Is there a way to reduce the number of clicks, e.g. by avoiding the click #1, offering immediately this session terminating link?

Another minor thing:
Is it possible to bring the “Payment transfer details” button from the left to the center of the page?

Screenshot:
http://solusio.com/Amicale_PaymentOption.jpg

Thanks,
Thomas

  • This topic was modified 8 years, 12 months ago by Tony. Reason: Moved to premium forums


Tony

  • Support Staff

January 15, 2016 at 6:31 am

Hi Thomas,

I have updated your account so that you can post on the forums, please let us know if you have further problems.

As you can see, there are a lot of clicks just for one single payment option.
Is there a way to reduce the number of clicks, e.g. by avoiding the click #1, offering immediately this session terminating link?

The easiest way it to add some custom CSS to force the hidden div to remain visible, you could use something like:

#bank-payment-option-form-dv {
    display: block !important;
}

Another minor thing:
Is it possible to bring the “Payment transfer details” button from the left to the center of the page?

You can use some CSS for that again, something like this:

#bank-payment-option-lnk {
    margin: 0 auto;
}

Does that help?


Thomas

January 15, 2016 at 7:42 am

Hi Tony,

This is great, thanks.
Could you please indicate where I would find
#bank-payment-option-lnk

I found
/wp-content/plugins/event-espresso/templates/css/themeroller/themeroller-base.css
where I changed line 42 to the following:

.payment_container, .payment-option-dv { display: block !important; position: relative; margin:0 auto; }

This had the effect to center the button, but not to avoid it (avoiding the need to click on the button). I would like to see the bank details immediately…do you have any hint how/where to set that?

Thanks a lot,
Thomas


Lorenzo Orlando Caum

  • Support Staff

January 15, 2016 at 2:29 pm

Hi Thomas,

You can use jQuery to perform a “click” on an element.

Here is an example:

https://gist.github.com/lorenzocaum/6e8602e936123d9d0888

Try targeting bank-payment-option-lnk.


Lorenzo


Thomas

January 16, 2016 at 6:34 am

Hi Lorenzo,

Thanks a lot for your help.
Unfortunately, it does not succeed yet, this is what I have added to the themes functions.php file (not including the opening php tag):

function ee_bankpayment_show_details() {
?>
<script type=”text/javascript”>
jQuery(document).ready(function () {
setTimeout(function() {
jQuery(“.bank-payment-option-lnk”).trigger(‘click’);
},5);
});
</script>
<?php
}
add_action( ‘wp_footer’, ‘ee_bankpayment_show_details’ );

I think this is the right method I am targeting, do you have an idea what’s wrong?

Thanks,
Thomas


Thomas

January 16, 2016 at 6:38 am

Stop, hold your horses, it’s working now!
I have to address “payment-option-lnk”, then it’s fine.
Thank you so much for your help, it’s really appreciated!
Cheers from Vienna,
Thomas


Tony

  • Support Staff

January 18, 2016 at 3:37 am

Hi Thomas,

In reading over your previous replies it looks like you are editing core files within Event Espresso to make your changes, this is really not recommended.

CSS can be added to either a child themes style.css file or using a plugins such as My Custom CSS or Reaktiv CSS Builder.

Any modifications made to any plugins core files will be lost when that plugin is updated.

The function Lorenzo provided is added to your themes functions.php file which is better, however the same will happen there if you update the theme are you are not using a child theme to add customisations.


Thomas

January 18, 2016 at 1:05 pm

Hello Tony,

Thanks for your thoughts and recommendations.
I am aware of the risks when editing the EE3 plugin core files.
This is a special situation: we need to get this registration out for a big event in May. After that event we will anyway update to EE4, so we will see which of the customizations so far actually have to be kept.
Thanks, Thomas

Viewing 7 reply threads

The support post ‘Reduce clicks for payment process’ 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