How can I get Contribution Widget to show totals? It just shows "Placeholder" instead of text and total.

Question

I can't seem to get contribution widgets to appear.

Here's a contribution page I've created: https://lofcenter.org/christmasangel/

Here's the widget code that I'm supposed to use, but it does not show any of the text or the contribution total collected so far:

<style>
    .crm-contribute-widget {
        font-size:12px;
        font-family:Helvetica, Arial, sans;
        padding:6px;
        -moz-border-radius:       4px;
        -webkit-border-radius:   4px;
        -khtml-border-radius:   4px;
        border-radius:      4px;
        border:1px solid #96C0E7;
        width:200px;
    }
    .crm-contribute-widget h5 {
        font-size:14px;
        padding:3px;
        margin: 0px;
        text-align:center;
        -moz-border-radius:   4px;
        -webkit-border-radius:   4px;
        -khtml-border-radius:   4px;
        border-radius:      4px;
    }
    .crm-contribute-widget .crm-amounts {
        height:1em;
        margin:.8em 0px;
        font-size:13px;
    }
    .crm-contribute-widget .crm-amount-low {
        float:left;
    }
    .crm-contribute-widget .crm-amount-high {
        float:right;
    }
    .crm-contribute-widget .crm-percentage {
        margin:0px 30%;
        text-align:center;
    }
    .crm-contribute-widget .crm-amount-bar {
        background-color:#FFF;
        width:100%;
        display:block;
        border:1px solid #CECECE;
        -moz-border-radius:   4px;
        -webkit-border-radius:   4px;
        -khtml-border-radius:   4px;
        border-radius:      4px;
        margin-bottom:.8em;
        text-align:left;
    }
    .crm-contribute-widget .crm-amount-fill {
        background-color:#2786C2;
        height:1em;
        display:block;
        -moz-border-radius:   4px 0px 0px 4px;
        -webkit-border-radius:   4px 0px 0px 4px;
        -khtml-border-radius:   4px 0px 0px 4px;
        border-radius:      4px 0px 0px 4px;
        text-align:left;
    }
    .crm-contribute-widget .crm-amount-raised-wrapper {
        margin-bottom:.8em;
    }
    .crm-contribute-widget .crm-amount-raised {
        font-weight:bold;
    }
    .crm-contribute-widget .crm-logo {
        text-align:center;
    }
    .crm-contribute-widget .crm-comments,
    .crm-contribute-widget .crm-donors,
    .crm-contribute-widget .crm-campaign {
        font-size:11px;
        margin-bottom:.8em;
    }
    .crm-contribute-widget .crm-contribute-button {
        display:block;
        background-color:#CECECE;
        -moz-border-radius:       4px;
        -webkit-border-radius:   4px;
        -khtml-border-radius:   4px;
        border-radius:      4px;
        text-align:center;
        margin:0px 10% .8em 10%;
        text-decoration:none;
        color:#556C82;
        padding:2px;
        font-size:13px;
    }
    .crm-contribute-widget .crm-home-url {
        text-decoration:none;
        border:0px;
    }
</style>
<style>
    .crm-contribute-widget {
        background-color: #00cc44; /* background color */
        border-color:#96C0E7; /* border color */
    }
    .crm-contribute-widget h5 {
        color: #000000;
        background-color: #00802b;
    } /* title */
    .crm-contribute-widget .crm-amount-raised { color:#000; }
    .crm-contribute-widget .crm-amount-fill {
      background-color:#cc0000;
    }
    .crm-contribute-widget a.crm-contribute-button { /* button color */
        background-color:#cc0000;
    }
    .crm-contribute-widget .crm-contribute-button-inner { /* button text color */
        padding:2px;
        display:block;
        color:#556C82;
    }
    .crm-contribute-widget .crm-comments,
    .crm-contribute-widget .crm-donors,
    .crm-contribute-widget .crm-campaign {
        color:#2786C2 /* other color*/
    }
    .crm-contribute-widget .crm-home-url {
        color:#cc0000 /* home page link color*/
    }
</style>

<div id="crm_cpid_11" class="crm-contribute-widget">
    <h5 id="crm_cpid_11_title"></h5>
    <div class="crm-amounts">
        <div id="crm_cpid_11_amt_hi" class="crm-amount-high"></div>
        <div id="crm_cpid_11_amt_low" class="crm-amount-low"></div>
        <div id="crm_cpid_11_percentage" class="crm-percentage"></div>
    </div>
    <div class="crm-amount-bar">
        <div class="crm-amount-fill" id="crm_cpid_11_amt_fill"></div>
    </div>
    <div class="crm-amount-raised-wrapper">
        <span id="crm_cpid_11_amt_raised" class="crm-amount-raised"> -- placeholder -- </span>
    </div>
            <div class="crm-logo"><img src="https://lofcenter.org/wp-content/uploads/2015/07/lof-logo-widget.png" alt=Logo></div>
        <div id="crm_cpid_11_donors" class="crm-donors"></div>
    <div id="crm_cpid_11_comments" class="crm-comments"></div>
    <div id="crm_cpid_11_campaign" class="crm-campaign"></div>
    <div class="crm-contribute-button-wrapper" id="crm_cpid_11_button">
        <a href='https://lofcenter.org/CiviCRM?page=CiviCRM&q=civicrm/contribute/transact&reset=1&id=11' class="crm-contribute-button"><span class="crm-contribute-button-inner" id="crm_cpid_11_btn_txt"> -- placeholder -- </span></a>
    </div>
</div>

<script type="text/javascript">
// Cleanup functions for the document ready method
if ( document.addEventListener ) {
    DOMContentLoaded = function() {
        document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        onReady();
    };
} else if ( document.attachEvent ) {
    DOMContentLoaded = function() {
        // Make sure body exists, at least, in case IE gets a little overzealous
        if ( document.readyState === "complete" ) {
            document.detachEvent( "onreadystatechange", DOMContentLoaded );
            onReady();
        }
    };
}
if ( document.readyState === "complete" ) {
    // Handle it asynchronously to allow scripts the opportunity to delay ready
    setTimeout( onReady, 1 );
}
// Mozilla, Opera and webkit support this event
if ( document.addEventListener ) {
    // Use the handy event callback
    document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
    // A fallback to window.onload, that will always work
    window.addEventListener( "load", onReady, false );
    // If IE event model is used
} else if ( document.attachEvent ) {
    // ensure firing before onload,
    // maybe late but safe also for iframes
    document.attachEvent("onreadystatechange", DOMContentLoaded);
    // A fallback to window.onload, that will always work
    window.attachEvent( "onload", onReady );
}
function onReady( ) {
    var cpid    = 11;
    var jsonvar = eval('jsondata' + cpid);
    var crmCurrency = jsonvar.currencySymbol;
    document.getElementById('crm_cpid_'+cpid+'_title').innerHTML        = jsonvar.title;
    if ( jsonvar.money_target > 0 ) {
        document.getElementById('crm_cpid_'+cpid+'_amt_hi').innerHTML   = jsonvar.money_target_display;
        document.getElementById('crm_cpid_'+cpid+'_amt_low').innerHTML  = crmCurrency+jsonvar.money_low;
    }
    document.getElementById('crm_cpid_'+cpid+'_amt_raised').innerHTML   = jsonvar.money_raised;
    document.getElementById('crm_cpid_'+cpid+'_comments').innerHTML     = jsonvar.about;
    document.getElementById('crm_cpid_'+cpid+'_donors').innerHTML       = jsonvar.num_donors;
    document.getElementById('crm_cpid_'+cpid+'_btn_txt').innerHTML      = jsonvar.button_title;
    document.getElementById('crm_cpid_'+cpid+'_campaign').innerHTML     = jsonvar.campaign_start;
    if ( jsonvar.money_raised_percentage ) {
        var moneyRaised = jsonvar.money_raised_percentage;
        var percentWidth = moneyRaised.split('%');
        if ( percentWidth[0] > 100 ) {
            moneyRaised = '100%';
        }
        document.getElementById('crm_cpid_'+cpid+'_amt_fill').style.width = moneyRaised;
        document.getElementById('crm_cpid_'+cpid+'_percentage').innerHTML = jsonvar.money_raised_percentage;
    }
    if ( !jsonvar.is_active ) {
        document.getElementById('crm_cpid_'+cpid+'_button').innerHTML   = jsonvar.home_url;
        document.getElementById('crm_cpid_'+cpid+'_button').style.color = 'red';
    }
}
</script>

<script type="text/javascript" src="https://lofcenter.org/wp-content/plugins/civicrm/civicrm//extern/widget.php?cpageId=11&widgetId=10&format=3"></script>

Here's what the widget shows:

Am I missing a setting somewhere? Why is this not working?

Laryn · Accepted Answer · 2015-12-21 17:05:26Z

I'd guess the warnings thrown by this URL (linked in the final <script> declaration in the code you posted) are causing the problem. If you take care of them (or even hide them from displaying) it may solve it:

https://lofcenter.org/wp-content/plugins/civicrm/civicrm//extern/widget.php?cpageId=11&widgetId=10&format=3

Warning: mktime(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone. in /home/xxxxx/wp-content/plugins/civicrm/civicrm/CRM/Utils/Date.php on line 271

Warning: Cannot modify header information - headers already sent by (output started at /home/xxxxx/wp-content/plugins/civicrm/civicrm/CRM/Utils/Date.php:271) in /home/xxxxx/wp-content/plugins/civicrm/civicrm/CRM/Core/Page/AJAX.php on line 212

Warning: Cannot modify header information - headers already sent by (output started at /home/xxxxx/wp-content/plugins/civicrm/civicrm/CRM/Utils/Date.php:271) in /home/xxxxx/wp-content/plugins/civicrm/civicrm/CRM/Core/Page/AJAX.php on line 213

Warning: Cannot modify header information - headers already sent by (output started at /home/xxxxx/wp-content/plugins/civicrm/civicrm/CRM/Utils/Date.php:271) in /home/xxxxx/wp-content/plugins/civicrm/civicrm/CRM/Core/Page/AJAX.php on line 214
var jsondata11 = {"currencySymbol":"$","is_error":false,"is_active":true,"title":"Christmas Angel","logo":"https:\/\/lofcenter.org\/wp-content\/uploads\/2015\/07\/lof-logo-widget.png","button_title":"Be an Angel","about":"
Be a Christmas Angel and send a gift a local survivor!<\/strong><\/p>","num_donors":"3 Donors","money_raised":"Raised $ 175.00 of $ 4,000.00","campaign_start":"Campaign is ongoing","money_target":4000,"money_raised_percentage":"4%","money_target_display":"$ 4,000.00","money_low":0,"home_url":"Learn more.<\/a>","homepage_link":null,"colors":{"title":"#000000","button":"#cc0000","bar":"#cc0000","main_text":"#2786C2","main":"#00cc44","main_bg":"#00802b","bg":"#96C0E7","about_link":"#556C82"}};

Thank you, I added the line "date_default_timezone_set(EST)" to the date.php file and the widget is now working just fine. — V3rmie, Commented Dec 21, 2015 at 19:09

Stack Exchange Network

How can I get Contribution Widget to show totals? It just shows "Placeholder" instead of text and total.

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged
civicontribute
or ask your own question.

Hot Network Questions

How can I get Contribution Widget to show totals? It just shows "Placeholder" instead of text and total.

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged civicontribute or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
civicontribute
or ask your own question.