templates/CRM/Contribute/Form/ContributionPage/Widget.tpl

   1 {*
   2  +--------------------------------------------------------------------+
   3  | Copyright CiviCRM LLC. All rights reserved.                        |
   4  |                                                                    |
   5  | This work is published under the GNU AGPLv3 license with some      |
   6  | permitted exceptions and without any warranty. For full license    |
   7  | and copyright information, see https://civicrm.org/licensing       |
   8  +--------------------------------------------------------------------+
   9 *}
  10 {crmRegion name="contribute-form-contributionpage-widget-main"}
  11 <h3>{ts}Configure Widget{/ts}</h3>
  12 {if $showStatus}
  13 <div class="messages status no-popup">
  14     <div class="icon inform-icon"></div>
  15     {ts}It looks like you may have posted and / or distributed the flash version of the Contribution widget. We won't be supporting the flash version in next release. You should try and get all sites using the flash widget to update to the improved HTML widget code below as soon as possible.{/ts}
  16 </div>
  17 {/if}
  18 <div id="form" class="crm-block crm-form-block crm-contribution-contributionpage-widget-form-block">
  19     <div class="help">
  20         {ts}CiviContribute widgets allow you and your supporters to easily promote this fund-raising campaign. Widget code can be added to any web page.  It will provide a real-time display of current contribution results and a direct link to this contribution page.{/ts} {help id="id-intro"}
  21     </div>
  22 <div class="crm-submit-buttons">{include file="CRM/common/formButtons.tpl" location="top"}</div>
  23     <table class="form-layout-compressed">
  24       <tr class="crm-contribution-contributionpage-widget-form-block-is_active"><td style="width: 12em;">&nbsp;</td><td style="font-size: 10pt;">{$form.is_active.html}&nbsp;{$form.is_active.label}</td></tr>
  25     </table>
  26     <div class="spacer"></div>
  27
  28     <div id="widgetFields">
  29         <table class="form-layout-compressed">
  30             <tr class="crm-contribution-contributionpage-widget-form-block-title"><td class="label">{$form.title.label}<span class="crm-marker"> *</span></td><td>{$form.title.html}</td></tr>
  31             <tr class="crm-contribution-form-block-url_logo"><td class="label">{$form.url_logo.label}</span></td><td>{$form.url_logo.html}</td></tr>
  32             <tr class="crm-contribution-contributionpage-widget-form-block-button_title"><td class="label">{$form.button_title.label}</td><td>{$form.button_title.html}</td></tr>
  33             <tr class="crm-contribution-contributionpage-widget-form-block-about"><td class="label">{$form.about.label}<span class="crm-marker"> *</span></td><td>{$form.about.html}
  34 <br /><span class="description">{ts}Enter content for the about message. You may include HTML formatting tags. You can also include images, as long as they are already uploaded to a server&mdash;reference them using complete URLs.{/ts}</span>
  35 </td></tr>
  36
  37         </table>
  38
  39         <div id="id-get_code">
  40             <fieldset>
  41             <legend>{ts}Preview Widget and Get Code{/ts}</legend>
  42             <div class="col1">
  43                 {if $widget_id}
  44                     <div class="description">
  45                         {ts}Click <strong>Save & Preview</strong> to save any changes to your settings, and preview the widget again on this page.{/ts}
  46                     </div>
  47                     {include file="CRM/Contribute/Page/Widget.tpl" widgetId=$widget_id cpageId=$cpageId}<br />
  48                 {else}
  49                     <div class="description">
  50                         {ts}Click <strong>Save & Preview</strong> to save your settings and preview the widget on this page.{/ts}<br />
  51                     </div>
  52                 {/if}
  53                 <div>{$form._qf_Widget_refresh.html}</div>
  54             </div>
  55             <div class="col2">
  56                 {* Include "get widget code" section if widget has been created for this page and is_active. *}
  57                 {if $widget_id}
  58                     <div class="description">
  59                         {ts}Add this widget to any web page by copying and pasting the code below.{/ts}
  60                     </div>
  61                     <textarea rows="8" cols="50" name="widget_code" id="widget_code">{include file="CRM/Contribute/Page/Widget.tpl" widgetId=$widget_id cpageId=$cpageId}</textarea>
  62                     <br />
  63                     <strong><a href="#" onclick="Widget.widget_code.select(); return false;"><i class="crm-i fa-code" aria-hidden="true"></i> {ts}Select Code{/ts}</a></strong>
  64                 {else}
  65                     <div class="description">
  66                         {ts}The code for adding this widget to web pages will be displayed here after you click <strong>Save and Preview</strong>.{/ts}
  67                     </div>
  68                 {/if}
  69             </div>
  70             </fieldset>
  71         </div>
  72
  73
  74         <div class="crm-accordion-wrapper collapsed crm-case-roles-block">
  75          <div class="crm-accordion-header">
  76           {ts}Edit Widget Colors{/ts}
  77          </div><!-- /.crm-accordion-header -->
  78          <div class="crm-accordion-body">
  79             <table class="form-layout-compressed">
  80             {foreach from=$colorFields item=field key=fieldName}
  81               <tr><td class="label">{$form.$fieldName.label}<span class="crm-marker"> *</span></td><td>{$form.$fieldName.html}</td></tr>
  82             {/foreach}
  83             </table>
  84          </div><!-- /.crm-accordion-body -->
  85         </div><!-- /.crm-accordion-wrapper -->
  86
  87     </div>
  88
  89     <div id="crm-submit-buttons">
  90         <table id="preview" class"form-layout-compressed">
  91      <tr>
  92         <td>{$form._qf_Widget_refresh.html}</td>
  93         </td>
  94      </tr>
  95   </table>
  96     </div>
  97   <div class="crm-submit-buttons">{include file="CRM/common/formButtons.tpl" location="bottom"}</div>
  98
  99 </div>
 100
 101 {literal}
 102 <script type="text/javascript">
 103   var is_act = document.getElementsByName('is_active');
 104     if ( ! is_act[0].checked) {
 105            cj('#widgetFields').hide();
 106      cj('#preview').hide();
 107   }
 108     function widgetBlock(chkbox) {
 109         if (chkbox.checked) {
 110         cj('#widgetFields').show();
 111         cj('#preview').show();
 112         return;
 113         } else {
 114         cj('#widgetFields').hide();
 115         cj('#preview').hide();
 116               return;
 117      }
 118     }
 119 </script>
 120 {/literal}
 121 {/crmRegion}
 122 {crmRegion name="contribute-form-contributionpage-widget-post"}
 123 {/crmRegion}