templates/CRM/Contribute/Form/Contribution/PremiumBlock.tpl

   1 {*
   2  +--------------------------------------------------------------------+
   3  | CiviCRM version 5                                                  |
   4  +--------------------------------------------------------------------+
   5  | Copyright CiviCRM LLC (c) 2004-2019                                |
   6  +--------------------------------------------------------------------+
   7  | This file is a part of CiviCRM.                                    |
   8  |                                                                    |
   9  | CiviCRM is free software; you can copy, modify, and distribute it  |
  10  | under the terms of the GNU Affero General Public License           |
  11  | Version 3, 19 November 2007 and the CiviCRM Licensing Exception.   |
  12  |                                                                    |
  13  | CiviCRM is distributed in the hope that it will be useful, but     |
  14  | WITHOUT ANY WARRANTY; without even the implied warranty of         |
  15  | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.               |
  16  | See the GNU Affero General Public License for more details.        |
  17  |                                                                    |
  18  | You should have received a copy of the GNU Affero General Public   |
  19  | License and the CiviCRM Licensing Exception along                  |
  20  | with this program; if not, contact CiviCRM LLC                     |
  21  | at info[AT]civicrm[DOT]org. If you have questions about the        |
  22  | GNU Affero General Public License or the licensing of CiviCRM,     |
  23  | see the CiviCRM license FAQ at http://civicrm.org/licensing        |
  24  +--------------------------------------------------------------------+
  25 *}
  26 {if $products}
  27   <div id="premiums" class="premiums-group">
  28     {if $context EQ "makeContribution"}
  29       <fieldset class="crm-group premiums_select-group">
  30       {if $premiumBlock.premiums_intro_title}
  31         <legend>{$premiumBlock.premiums_intro_title}</legend>
  32       {/if}
  33       {if $premiumBlock.premiums_intro_text}
  34         <div id="premiums-intro" class="crm-section premiums_intro-section">
  35           {$premiumBlock.premiums_intro_text}
  36         </div>
  37       {/if}
  38     {/if}
  39
  40     {if $context EQ "confirmContribution" OR $context EQ "thankContribution"}
  41     <div class="crm-group premium_display-group">
  42       <div class="header-dark">
  43         {if $premiumBlock.premiums_intro_title}
  44           {$premiumBlock.premiums_intro_title}
  45         {else}
  46           {ts}Your Premium Selection{/ts}
  47         {/if}
  48       </div>
  49     {/if}
  50
  51     {if $preview}
  52       {assign var="showSelectOptions" value="1"}
  53     {/if}
  54
  55     {strip}
  56       <div id="premiums-listings">
  57       {if $showPremium AND !$preview AND $premiumBlock.premiums_nothankyou_position EQ 1}
  58         <div class="premium premium-no_thanks" id="premium_id-no_thanks" min_contribution="0">
  59           <div class="premium-short">
  60             <input type="checkbox" disabled="disabled" /> {$premiumBlock.premiums_nothankyou_label}
  61           </div>
  62           <div class="premium-full">
  63             <input type="checkbox" checked="checked" disabled="disabled" /> {$premiumBlock.premiums_nothankyou_label}
  64           </div>
  65         </div>
  66       {/if}
  67       {foreach from=$products item=row}
  68         <div class="premium {if $showPremium}premium-selectable{/if}" id="premium_id-{$row.id}" min_contribution="{$row.min_contribution}">
  69           <div class="premium-short">
  70             {if $row.thumbnail}<div class="premium-short-thumbnail"><img src="{$row.thumbnail}" alt="{$row.name|escape}" /></div>{/if}
  71             <div class="premium-short-content">{$row.name}</div>
  72             <div style="clear:both"></div>
  73           </div>
  74
  75           <div class="premium-full">
  76             <div class="premium-full-image">{if $row.image}<img src="{$row.image}" alt="{$row.name|escape}" />{/if}</div>
  77             <div class="premium-full-content">
  78               <div class="premium-full-title">{$row.name}</div>
  79               <div class="premium-full-disabled">
  80                 {ts 1=$row.min_contribution|crmMoney}You must contribute at least %1 to get this item{/ts}<br/>
  81                 <input type="button" value="{ts 1=$row.min_contribution|crmMoney}Contribute %1 Instead{/ts}" amount="{$row.min_contribution}" />
  82               </div>
  83               <div class="premium-full-description">
  84                 {$row.description}
  85               </div>
  86               {if $showSelectOptions }
  87                 {assign var="pid" value="options_"|cat:$row.id}
  88                 {if $pid}
  89                   <div class="premium-full-options">
  90                     <p>{$form.$pid.html}</p>
  91                   </div>
  92                 {/if}
  93               {else}
  94                 <div class="premium-full-options">
  95                   <p><strong>{$row.options}</strong></p>
  96                 </div>
  97               {/if}
  98               {if ( ($premiumBlock.premiums_display_min_contribution AND $context EQ "makeContribution") OR $preview EQ 1) AND $row.min_contribution GT 0 }
  99                 <div class="premium-full-min">{ts 1=$row.min_contribution|crmMoney}Minimum: %1{/ts}</div>
 100               {/if}
 101             <div style="clear:both"></div>
 102             </div>
 103           </div>
 104           <div style="clear:both"></div>
 105         </div>
 106       {/foreach}
 107       {if $showPremium AND !$preview AND $premiumBlock.premiums_nothankyou_position EQ 2}
 108         <div class="premium premium-no_thanks" id="premium_id-no_thanks" min_contribution="0">
 109           <div class="premium-short">
 110             <input type="checkbox" disabled="disabled" /> {$premiumBlock.premiums_nothankyou_label}
 111           </div>
 112           <div class="premium-full">
 113             <input type="checkbox" checked="checked" disabled="disabled" /> {$premiumBlock.premiums_nothankyou_label}
 114           </div>
 115         </div>
 116       {/if}
 117       </div>
 118     {/strip}
 119
 120     {if $context EQ "makeContribution"}
 121       </fieldset>
 122     {elseif ! $preview} {* Close premium-display-group div for Confirm and Thank-you pages *}
 123       </div>
 124     {/if}
 125   </div>
 126
 127   {if $context EQ "makeContribution"}
 128     {literal}
 129     <script>
 130       CRM.$(function($) {
 131         var is_separate_payment = {/literal}{if $membershipBlock.is_separate_payment}{$membershipBlock.is_separate_payment}{else}0{/if}{literal};
 132
 133         // select a new premium
 134         function select_premium(premium_id) {
 135           if($(premium_id).length) {
 136             // hide other active premium
 137             $('.premium-full').hide();
 138             $('.premium-short').show();
 139             // show this one
 140             $('.premium-short', $(premium_id)).hide();
 141             $('.premium-full', $(premium_id)).show();
 142             // record this one
 143             var id_parts = premium_id.split('-');
 144             $('#selectProduct').val(id_parts[1]);
 145           }
 146         }
 147
 148         // click premium to select
 149         $('.premium-short').click(function(){
 150           select_premium( '#'+$($(this).parent()).attr('id') );
 151         });
 152
 153         // select the default premium
 154         var premium_id = $('#selectProduct').val();
 155         if(premium_id == '') premium_id = 'no_thanks';
 156         select_premium('#premium_id-'+premium_id);
 157
 158         // get the current amount
 159         function get_amount() {
 160           var amount;
 161
 162           if (typeof totalfee !== "undefined") {
 163             return totalfee;
 164           }
 165
 166           // see if other amount exists and has a value
 167           if($('.other_amount-content input').length) {
 168             amount = Number($('.other_amount-content input').val());
 169             if(isNaN(amount))
 170               amount = 0;
 171           }
 172
 173           function check_price_set(price_set_radio_buttons) {
 174             if (!amount) {
 175               $(price_set_radio_buttons).each(function(){
 176                 if ($(this).prop('checked')) {
 177                   amount = $(this).attr('data-amount');
 178                   if (typeof amount !== "undefined") {
 179                     amount = Number(amount);
 180                   }
 181                   else {
 182                     amount = 0;
 183                   }
 184                 }
 185               });
 186             }
 187           }
 188
 189           // check for additional contribution
 190           var additional_amount = 0;
 191           if(is_separate_payment) {
 192             additional_amount = amount;
 193             amount = 0;
 194           }
 195
 196           // next, check for contribution amount price sets
 197           check_price_set('.contribution_amount-content input[type="radio"]');
 198
 199           // next, check for membership level price set
 200           check_price_set('.membership_amount-content input[type="radio"]');
 201
 202           check_price_set(cj('.price-set-option-content input[type="radio"]'));
 203
 204           // make sure amount is a number at this point
 205           if(!amount) amount = 0;
 206
 207           // next, check for membership/contribution level price set
 208           check_price_set('#priceset input[type="radio"]');
 209
 210           // account for is_separate_payment
 211           if(is_separate_payment && additional_amount) {
 212             amount += additional_amount;
 213           }
 214
 215           return amount;
 216         }
 217
 218         // update premiums
 219         function update_premiums() {
 220           var amount = get_amount();
 221           console.log('amount:', amount);
 222
 223           $('.premium').each(function(){
 224             var min_contribution = $(this).attr('min_contribution');
 225             if(amount < min_contribution) {
 226               $(this).addClass('premium-disabled');
 227             } else {
 228               $(this).removeClass('premium-disabled');
 229             }
 230           });
 231         }
 232         $('.other_amount-content input').change(update_premiums);
 233         $('input, #priceset').change(update_premiums);
 234         update_premiums();
 235
 236         // build a list of price sets
 237         var amounts = [];
 238         var price_sets = {};
 239         $('input, #priceset  select,#priceset').each(function(){
 240           if (this.tagName == 'SELECT') {
 241             var selectID = $(this).attr('id');
 242             var selectvalues = JSON.parse($(this).attr('price'));
 243             Object.keys(selectvalues).forEach(function (key) {
 244               var option = selectvalues[key].split(optionSep);
 245               amount = Number(option[0]);
 246               price_sets[amount] = '#' + selectID + '-' + key;
 247               amounts.push(amount);
 248             });
 249           }
 250           else {
 251             var amount = Number($(this).attr('data-amount'));
 252             if (!isNaN(amount)) {
 253               amounts.push(amount);
 254
 255              var id = $(this).attr('id');
 256              price_sets[amount] = '#'+id;
 257             }
 258           }
 259         });
 260         amounts.sort(function(a,b){return a - b});
 261
 262         // make contribution instead buttons work
 263         $('.premium-full-disabled input').click(function(){
 264           var amount = Number($(this).attr('amount'));
 265           if (price_sets[amount]) {
 266             if (!$(price_sets[amount]).length) {
 267               var option =  price_sets[amount].split('-');
 268               $(option[0]).val(option[1]);
 269               $(option[0]).trigger('change');
 270             }
 271             else if ($(price_sets[amount]).attr('type') == 'checkbox') {
 272                $(price_sets[amount]).prop("checked",true);
 273                if ((typeof totalfee !== 'undefined') && (typeof display == 'function')) {
 274                  if (totalfee > 0) {
 275                    totalfee += amount;
 276                  }
 277                  else {
 278                    totalfee = amount;
 279                  }
 280                  display(totalfee);
 281                }
 282              }
 283              else {
 284                $(price_sets[amount]).click();
 285                $(price_sets[amount]).trigger('click');
 286              }
 287           } else {
 288             // is there an other amount input box?
 289             if($('.other_amount-section input').length) {
 290               // is this a membership form with separate payment?
 291               if(is_separate_payment) {
 292                 var current_amount = 0;
 293                 if($('#priceset input[type="radio"]:checked').length) {
 294                   current_amount = Number($('#priceset input[type="radio"]:checked').attr('data-amount'));
 295                   if(!current_amount) current_amount = 0;
 296                 }
 297                 var new_amount = amount - current_amount;
 298                 $('.other_amount-section input').val(new_amount.toFixed(2));
 299               } else {
 300                 $('.other_amount-section input').click();
 301                 $('.other_amount-section input').val($(this).attr('amount'));
 302               }
 303             } else {
 304               // find the next best price set
 305               var selected_price_set = false;
 306               for(var i in amounts) {
 307                 if(amounts[i] >= amount) {
 308                   selected_price_set = amounts[i];
 309                   break;
 310                 }
 311               }
 312               if(!selected_price_set) {
 313                 selected_price_set = amounts[amounts.length-1];
 314               }
 315
 316               if (!$(price_sets[selected_price_set]).length) {
 317                 var option =  price_sets[selected_price_set].split('-');
 318                 $(option[0]).val(option[1]);
 319                 $(option[0]).trigger('change');
 320               }
 321               else if ($(price_sets[selected_price_set]).attr('type') == 'checkbox') {
 322                 $(price_sets[selected_price_set]).prop("checked",true);
 323                 if ((typeof totalfee !== 'undefined') && (typeof display == 'function')) {
 324                   if (totalfee > 0) {
 325                     totalfee += amount;
 326                   }
 327                   else {
 328                     totalfee = amount;
 329                   }
 330                   display(totalfee);
 331                 }
 332              }
 333              else {
 334                $(price_sets[selected_price_set]).click();
 335                $(price_sets[selected_price_set]).trigger('click');
 336              }
 337             }
 338           }
 339           update_premiums();
 340         });
 341
 342         // validation of premiums
 343         var error_message = '{/literal}{ts escape="js"}You must contribute more to get that item{/ts}{literal}';
 344         $.validator.addMethod('premiums', function(value, element, params){
 345           var premium_id = $('#selectProduct').val();
 346           var premium$ = $('#premium_id-'+premium_id);
 347           if(premium$.length) {
 348             if(premium$.hasClass('premium-disabled')) {
 349               return false;
 350             }
 351           }
 352           return true;
 353         }, error_message);
 354
 355         // add validation rules
 356         CRM.validate.functions.push(function(){
 357           $('#selectProduct').rules('add', 'premiums');
 358         });
 359
 360         // need to use jquery validate's ignore option, so that it will not ignore hidden fields
 361         CRM.validate.params['ignore'] = '.ignore';
 362       });
 363     </script>
 364     {/literal}
 365
 366   {else}
 367     {literal}
 368     <script>
 369       CRM.$(function($) {
 370         cj('.premium-short').hide();
 371         cj('.premium-full').show();
 372       });
 373     </script>
 374     {/literal}
 375   {/if}
 376 {/if}
 377