Splash-screen after click submit donation

Resolved wibergsweb
(@wibergsweb)

7 years, 9 months ago

Hi

I have created a gateway for payment swish but it would be nice to have a “splash-screen” that shows some text like “Open your swish app and make your payment”. (progress-text)

I know how I could do this in jquery, something like:

$(‘#give-purchase-button’).on(‘click’, function() {
$(‘.mfp-content’).append(‘<div id=”swish-splash”></div>’)
$(this).appendTo($(‘#swish-splash’)); (Move button into div so the text is correct)
});
(and then of course style accordingly)

BUT I want this code to be included somehow into give’s js(?)
(I want above to happen when user clicks submit-button but before submitting the actual data).

Is there any way of solving this without hacking into the give-js code?

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Contributor Ben Meredith
(@benmeredithgmailcom)

7 years, 9 months ago

Hi there,

We do not currently have a method for hooking into a JS event which fires before the form submit, but we are looking into introducing a javascript hook API which would allow for that sort of functionality. I don’t have a timeline for that new API.

For now, you’d essentially need to hack Give core (which is never recommended) or look for other workarounds.
Thread Starter wibergsweb
(@wibergsweb)

7 years, 9 months ago
Hi Ben!

I think it would be very appreciated with such a javascript hook. Meanwhile I’ve came up with a solution which really does not hack into your actual code, but is dependent of your current naming (and type) of one element. My hope relies on that you wont change name on this element (#give-purchase-button).
```
//Change name of submit so give plugin is 
//not active after loading dom
jQuery(function ($) {
    $('#give-purchase-button').attr('id', '
    give-purchase-button-new').attr(
    'name', 'give-purchase-new').prop('type','button');

    //Same event handler as give has but uses 
    //this new button instead
    $('body').on('click touchend', 
    '#give-purchase-button-new', function (e) {
        //My code...

        //Restore original name of button
        //and event is simulated by click()
        $('#give-purchase-button-new').attr(
        'id', 'give-purchase-button').attr(
        'name', 'give-purchase').prop('type','submit');        
        $('form.give-form input[name="give-purchase"]
        .give-submit').click();      
    }

}
```
This above is a workaround that I found working and
I hope it would be some help if someone else needs
the same kind of functionality for now.
- This reply was modified 7 years, 9 months ago by wibergsweb.
- This reply was modified 7 years, 9 months ago by wibergsweb.
- This reply was modified 7 years, 9 months ago by wibergsweb.
- This reply was modified 7 years, 9 months ago by wibergsweb.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Splash-screen after click submit donation’ is closed to new replies.

Tags