Donations Plugin - Real time progress bars and prompt further donations

Hope you are well,

I was wondering if you are able to let me know the best plugin for progress bars and real time updates, based on those who purchase something at an event.

To give an example, we will be giving out bottles of water ($2) per water and then every dollar will then be given to charity. The $2 is taken on the day, no money will be taken over the website. We simply want to quantify how many were actually sold.

The admin of course can manually count on the day and update as well in the backend, but the person who bought the water, we want to track this amount in real time. In case the person who bought the bottle is interested in how many was sold so far.

We will only provide the link on a physical handout on the day when purchased to go to the link and once on the landing page it will prompt "how many did you purchase" and then automatically go to progress bar?

Do you know which would be the best plugin to allow this?

Kind Regards,
Lisa

  • Ash

    Hello @LisaAllen

    I hope you are doing good.

    You can try our fundraiser plugin, that will help you to collect donate, and the plugin has a progress bar integrated.
    You can take a look here: https://premium.wpmudev.org/project/fundraising/

    If you don't want to use a plugin but just a simple script, try the following code:

    add_shortcode( 'progress_bar', 'progress_bar_cb' );
    function progress_bar_cb( $atts ) {
        $atts = shortcode_atts(
            array(
                'target' => '',
                'raised' => ''
            ),
            $atts
        );
    
        $html = '<div class="donation">';
            $html .= '<div class="raised">';
            $html .= '</div>';
        $html .= '</div>';
    
        $html .= '<style type="text/css">';
            $html .= '.donation{width: 100%; height: 20px; background: #ccc;}';
            $html .= '.raised{height: 20px; background: green; width: 0;}';
        $html .= '</style>';
    
        $html .= '<script type="text/javascript">
        jQuery(function($){
            $(".raised").animate({
                width: "' . ( $atts['raised'] / $atts['target'] ) * 100 . '%"
            }, 1000);
        });
        </script>';
    
        return $html;
    }

    You can add those codes in your functions.php in the theme, if you think your theme won’t be changed. Otherwise mu-plugins is the best solution. To use mu-plugins, go to /wp-content/ and find the folder with name 'mu-plugins'. If there is no folder in that name, then create a folder, name it 'mu-plugins', create a file inside that, give any name you like and paste the code in there. You don't need to activate that plugin. Mu-plugins means must use plugins, so it will be activated automatically always. If you use mu-plugins then add a php start tag at the beginning of the code.

    The use the shortcode like this:

    [progress_bar raised="50" target="100"]

    It will look like this: http://jsfiddle.net/4endbmcd/

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.