Fundraising Buggy on Phone and Tablet

We just had a potential donor discover another issue with the Fundraising plugin that is preventing them from making any donation on their phone. I just replicated the issue on our iPhone and discovered a related bug on our iPad.

Please confirm behavior at http://tripawds.org/give

iPhone
User reported that the "Support This project" button did nothing after entering a dollar amount. I entered a dollar amount, tapped button and confirmed that the page does not advance. The only thing that tapping the button does, is change the style of the button.

So, donations cannot be made on a mobile phone. Any attempt to do so only results in the button style changing with no redirection to proceed with payment.

iPad
I confirmed the same behavior occurs on the iPad. Clicking the button only changes the style of the button. After the new button displays, however, a second tap will advance the page to process payment.

So, on an iPad the user must tap the button twice to proceed with making a donation.

Thank you in advance for investigating this issue ASAP. Does anyone have any CSS hacks I can try or other recommendations for a possible immediate fix?

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hey there, jcnjr!

    First off, you have a great project. :slight_smile:

    I was just able to make a donation work on my iPhone, if you can confirm you saw that on your end.

    I tested the Support this Project button on a few devices, including an iPad 2, a Samsung tablet, and an HTC one. My iPhone is a 5, are you using a different model, per chance? Latest software updates?

    I put out a call to anyone in the "office" but it's pretty sparse on Saturdays.

    The change you're seeing in the button is the mobile interpretation of the :hover and :active properties that are so snazzy in a browser. The quickest way to eliminate any interference this is causing would be to change those properties. I'm looking now, via the inspect element tool in Chrome, and there are a surprising amount of properties for one button.

    My advice would be to style a new button for mobile, minus hover and active properties. This is the selector set you need:

    @media screen and (max-width: 1024px){
    .wdf-basic .wdf_send_donation, .wdf-basic .wdf_button {
    YOUR BUTTON PARAMETERS;
    }
    }

    Add this to a custom CSS file, your theme may have one, JetPack comes with one, or you can use a free plugin from the repository. https://wordpress.org/plugins/simple-custom-css/

    Even better, if you're using a child theme, you can just drop this in your child theme's style.css file.

    Thanks, jcnjr!

  • jcnjr
    • HummingBird

    Thank you Michelle!

    We did receive the Paypal notification for your generous donation. Thanks again!

    We did not, however, receive any notice within the Fundraising plugin. The donation did not get attributed to the stats in the admin nor to the progress bar.

    I wonder if that may be related to this mobile issue, or something else... FYI: I'm running the new update 2.6.1.3RC version provided by @Jose here: https://premium.wpmudev.org/forums/topic/recurring-fundraising-donation-no-longer-an-option-at-paypal-checkout

    Anyway, to answer your question, I confirmed the issue described above on an iPhone 4s and 4th Gen. iPad. I do not know what device was used by the potential donor who originally reported the error.

    Thanks for the CSS. My first guess was there may be some styling that is prohibiting the redirect when the button is tapped. If my goal is to ensure the button does not change when tapped, I'm not certain what parameters to use for the button. I presume it should just be the same as the desktop CSS. Investigating that now, but any tips are appreciated.

  • Michelle Shull
    • DEV MAN’s Apprentice

    Hey there, jcnjr!

    No problem, furry critters make my life better, just passing it on. : )

    Let me know how the update from Jose goes!

    As for the button parameters, you'll need to create three instances, standard, active, and hover. I'd keep it as simple as possible and use the same parameters for each one: size, bg color, border, text. If you want an easy tool, this is my go-to: http://css3buttongenerator.com/

    PS - "tripawds" is the best name ever. I audibly said AWWWWW when I figured it out. :slight_smile: /sappy animal lover. I hope you triple your goal.

  • jcnjr
    • HummingBird

    Thanks again for the direction Michelle! I'm making progress, but Fundraising pages continue to be buggy on the phone...

    I implemented new identical styles for the mobile screen button as you recommended, and it works fine on the actual project page at: http://tripawds.org/projects/community-fund/

    The button is styled like the CSS upon page load, and works as expected when clicked.

    However... The original behavior I described still occurs on our primary fundraising page at http://tripawds.org/give

    Upon page load, the button is still like it was before my added CSS. And when clicked, the button style changes (to the style I added) and nothing else happens.

    I can't inspect elements on the phone to determine what style might be loading on the /give page to figure this out. Any additional tips are greatly appreciated.

    On a related note, I also just discovered that the Projects page at http://tripawds.org/projects/ shows nothing but a blank white screen when loaded on the iPhone...like I said, buggy! Perhaps @Jose can help us check this out.

    EDIT: That blank screen occurs on the desktop too! This is new behavior, since the last update @Jose provided. :-\

  • Jose
    • Bruno Diaz

    Jim,

    I just tried in my android phone and the redirection to paypal works just fine either from tripawds.org/projects/community-fund/ or tripawds.org/give/

    Is it happening for you in any particular circumstance? Is it a fixed amount? recurring payment? or any other detail that can help me to reproduce the issue?

    (Unfortunately, I don't have an iOS device with me here)

    Please advise,
    Jose

  • jcnjr
    • HummingBird

    Is it happening for you in any particular circumstance?

    Yes, on iPhone 4s as detailed in my original post. But only on the /give page.

    The button loads correctly with the new style I created with the guidance of @Michelle Shull at /projects/community-fund/

    The button on the /give page loads with the original style upon page load, then changes to the new style when tapped.

    If either of you could advise what further CSS may be necessary to get the button to display with the new style on both pages so it does not just change when tapped (on /give) I would be most appreciative!

    Thanks again...

    EDIT: Issue occurs regardless of type of payment selected.

  • Jose
    • Bruno Diaz

    Hey Jim,

    I think we can mark this one as resolved, right?

    Let's keep the follow up on the remaining payment issue in the original thread.

    For future reference, this issue in touchscreen devices is caused by the first touch being interpreted as a hover. The solution is to either remove the hover style or match the normal state style (only for touchscreen devices).

    This is the approach that I used. It should be included in future releases:

    function inject_javascript() {
            ?>
            <script type="text/javascript">
                jQuery(document).ready(function(){
                    //Disable hover state for touch screen devices.
                    var idx, idxs, ignore, rule, stylesheet, _i, _j, _k, _len, _len1, _len2, _ref, _ref1;
    
                    if ('createTouch' in document) {
                        ignore = /:hover\b/;
                        try {
                            _ref = document.styleSheets;
                            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                                stylesheet = _ref[_i];
                                idxs = [];
                                _ref1 = stylesheet.cssRules;
                                if( !_ref1 || _ref1.length < 1 ){
                                    continue;
                                }
                                for (idx = _j = 0, _len1 = _ref1.length; _j < _len1; idx = ++_j) {
                                    rule = _ref1[idx];
                                    if (rule.type === CSSRule.STYLE_RULE && ignore.test(rule.selectorText)) {
                                        idxs.unshift(idx);
                                    }
                                }
                                for (_k = 0, _len2 = idxs.length; _k < _len2; _k++) {
                                    idx = idxs[_k];
                                    stylesheet.deleteRule(idx);
                                }
                            }
                        } catch (_error) {}
                    }
                });
            </script>
        <?php
    
    //The action is hooked to 'wp_enqueue_scripts', and will be triggered only if the post type is 'funder' to avoid conflicts with other features.
        add_action('wp_footer', array(&$this,'inject_javascript'));
        }

    Thanks,
    Jose

  • jcnjr
    • HummingBird

    I think we can mark this one as resolved, right?

    Yes, thank you for the clarification @Jose !

    I'll presume this is the 'patch" you referenced in your email, and that it was already made to the plugin on our site. I wasn't certain about that, thanks again for the help!

    PS: Not sure if I can now remove the custom CSS edits I made, but I can try that myself and see...

  • jcnjr
    • HummingBird

    Thanks again @Jose ... not sure if this is related to either of the patches you've made, or if I should open this topic back up or start a new one, but...

    The Progress Bar shortcode no longer renders the bar in blog posts. It is still showing in our sidebar and on pages, and within the Fundraiser custom post type. But the bar itself does not display in posts anymore. (I'm pretty certain it did previously!) The title and the totals are shown, but no bar.

    See example at http://tripawds.org/2014/12/year-end/

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.