Support » Plugin: Give - Donation Plugin and Fundraising Platform » Splash-screen after click submit donation

  • Resolved wibergsweb

    (@wibergsweb)



    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 Support Ben Meredith

    (@benmeredithgmailcom)

    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.

    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 1 week, 3 days ago by  wibergsweb.
    • This reply was modified 1 week, 3 days ago by  wibergsweb.
    • This reply was modified 1 week, 3 days ago by  wibergsweb.
    • This reply was modified 1 week, 3 days ago by  wibergsweb.
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.