| 1 |
<?php |
| 2 |
/** |
| 3 |
* The template used to display the mini donation widget. |
| 4 |
* |
| 5 |
* Override this template by copying it to: |
| 6 |
* yourtheme/charitable/shortcodes/mini-widget.php |
| 7 |
* |
| 8 |
* @author David Bisset |
| 9 |
* @package Charitable/Templates/Shortcodes |
| 10 |
* @since 1.8.12 |
| 11 |
*/ |
| 12 |
|
| 13 |
// Exit if accessed directly. |
| 14 |
if ( ! defined( 'ABSPATH' ) ) { |
| 15 |
exit; |
| 16 |
} |
| 17 |
|
| 18 |
$campaign_id = $view_args['campaign_id']; |
| 19 |
$cta_mode = $view_args['cta_mode']; |
| 20 |
$cta_label = $view_args['cta_label']; |
| 21 |
$recurring_active = $view_args['recurring_active']; |
| 22 |
$show_currency = $view_args['show_currency']; |
| 23 |
$min_amount = $view_args['min_amount']; |
| 24 |
$max_amount = $view_args['max_amount']; |
| 25 |
$accent_color = $view_args['accent_color']; |
| 26 |
$extra_class = $view_args['extra_class']; |
| 27 |
$monthly_amounts = $view_args['monthly_amounts']; |
| 28 |
$monthly_default = $view_args['monthly_default']; |
| 29 |
$monthly_show_other = $view_args['monthly_show_other']; |
| 30 |
$monthly_impact = $view_args['monthly_impact']; |
| 31 |
$onetime_amounts = $view_args['onetime_amounts']; |
| 32 |
$onetime_default = $view_args['onetime_default']; |
| 33 |
$onetime_show_other = $view_args['onetime_show_other']; |
| 34 |
$onetime_impact = $view_args['onetime_impact']; |
| 35 |
$campaign_url = $view_args['campaign_url']; |
| 36 |
$currency_code = $view_args['currency_code']; |
| 37 |
$currency_symbol = $view_args['currency_symbol']; |
| 38 |
$currency_pos = $view_args['currency_pos']; |
| 39 |
$widget_align = isset( $view_args['widget_align'] ) ? $view_args['widget_align'] : 'left'; |
| 40 |
$widget_width = isset( $view_args['widget_width'] ) ? $view_args['widget_width'] : ''; |
| 41 |
$impact_align = isset( $view_args['impact_align'] ) ? $view_args['impact_align'] : ''; |
| 42 |
$monthly_label = ! empty( $view_args['monthly_label'] ) ? $view_args['monthly_label'] : __( 'Monthly', 'charitable' ); |
| 43 |
$give_once_label = ! empty( $view_args['give_once_label'] ) ? $view_args['give_once_label'] : __( 'Give Once', 'charitable' ); |
| 44 |
$widget_title_raw = isset( $view_args['widget_title'] ) ? $view_args['widget_title'] : ''; |
| 45 |
$widget_title = $widget_title_raw |
| 46 |
? str_replace( '{{campaign_title}}', get_the_title( $campaign_id ), $widget_title_raw ) |
| 47 |
: ''; |
| 48 |
|
| 49 |
// Wrapper classes. |
| 50 |
$wrapper_classes = 'charitable-mini-widget'; |
| 51 |
if ( $extra_class ) { |
| 52 |
$wrapper_classes .= ' ' . $extra_class; |
| 53 |
} |
| 54 |
|
| 55 |
// Build inline style. |
| 56 |
$style_parts = array(); |
| 57 |
if ( $accent_color ) { |
| 58 |
$style_parts[] = '--charitable-mini-widget-accent:' . esc_attr( $accent_color ); |
| 59 |
} |
| 60 |
if ( $widget_width ) { |
| 61 |
$style_parts[] = 'max-width:' . esc_attr( $widget_width ); |
| 62 |
if ( '100%' !== $widget_width ) { |
| 63 |
$style_parts[] = 'width:100%'; |
| 64 |
} |
| 65 |
} |
| 66 |
if ( 'center' === $widget_align ) { |
| 67 |
$style_parts[] = 'margin-left:auto'; |
| 68 |
$style_parts[] = 'margin-right:auto'; |
| 69 |
} elseif ( 'right' === $widget_align ) { |
| 70 |
$style_parts[] = 'margin-left:auto'; |
| 71 |
$style_parts[] = 'margin-right:0'; |
| 72 |
} |
| 73 |
$inline_style = $style_parts ? ' style="' . implode( ';', $style_parts ) . '"' : ''; |
| 74 |
|
| 75 |
// Determine starting tab. |
| 76 |
$start_tab = $recurring_active ? 'monthly' : 'onetime'; |
| 77 |
|
| 78 |
// Use onetime amounts as the active tab when recurring is off. |
| 79 |
$active_amounts = $recurring_active ? $monthly_amounts : $onetime_amounts; |
| 80 |
$active_default = $recurring_active ? $monthly_default : $onetime_default; |
| 81 |
$active_show_other = $recurring_active ? $monthly_show_other : $onetime_show_other; |
| 82 |
$active_impact = $recurring_active ? $monthly_impact : $onetime_impact; |
| 83 |
|
| 84 |
// Data attributes for JS initialization. |
| 85 |
$data_config = array( |
| 86 |
'campaignId' => $campaign_id, |
| 87 |
'ctaMode' => $cta_mode, |
| 88 |
'campaignUrl' => $campaign_url, |
| 89 |
'recurringActive' => $recurring_active, |
| 90 |
'showCurrency' => $show_currency, |
| 91 |
'currencyCode' => $currency_code, |
| 92 |
'currencySymbol' => $currency_symbol, |
| 93 |
'currencyPos' => $currency_pos, |
| 94 |
'minAmount' => $min_amount, |
| 95 |
'maxAmount' => $max_amount, |
| 96 |
'monthly' => array( |
| 97 |
'amounts' => $monthly_amounts, |
| 98 |
'default' => $monthly_default, |
| 99 |
'showOther' => $monthly_show_other, |
| 100 |
'impact' => $monthly_impact, |
| 101 |
), |
| 102 |
'onetime' => array( |
| 103 |
'amounts' => $onetime_amounts, |
| 104 |
'default' => $onetime_default, |
| 105 |
'showOther' => $onetime_show_other, |
| 106 |
'impact' => $onetime_impact, |
| 107 |
), |
| 108 |
); |
| 109 |
?> |
| 110 |
|
| 111 |
<div |
| 112 |
class="<?php echo esc_attr( $wrapper_classes ); ?>" |
| 113 |
data-charitable-mini-widget="<?php echo esc_attr( wp_json_encode( $data_config ) ); ?>" |
| 114 |
<?php echo $inline_style; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> |
| 115 |
> |
| 116 |
|
| 117 |
<?php if ( $widget_title ) : ?> |
| 118 |
<p class="charitable-mini-widget__title"><?php echo esc_html( $widget_title ); ?></p> |
| 119 |
<?php endif; ?> |
| 120 |
|
| 121 |
<?php if ( $recurring_active ) : ?> |
| 122 |
<div class="charitable-mini-widget__tabs" role="tablist"> |
| 123 |
<button |
| 124 |
class="charitable-mini-widget__tab charitable-mini-widget__tab--active" |
| 125 |
data-tab="monthly" |
| 126 |
role="tab" |
| 127 |
aria-selected="true" |
| 128 |
><?php echo esc_html( $monthly_label ); ?></button> |
| 129 |
<button |
| 130 |
class="charitable-mini-widget__tab" |
| 131 |
data-tab="onetime" |
| 132 |
role="tab" |
| 133 |
aria-selected="false" |
| 134 |
><?php echo esc_html( $give_once_label ); ?></button> |
| 135 |
</div> |
| 136 |
<?php endif; ?> |
| 137 |
|
| 138 |
<div class="charitable-mini-widget__amounts" role="group" aria-label="<?php esc_attr_e( 'Select donation amount', 'charitable' ); ?>"> |
| 139 |
<?php foreach ( $active_amounts as $amount ) : ?> |
| 140 |
<?php |
| 141 |
$is_selected = ( (float) $amount === (float) $active_default ); |
| 142 |
$btn_class = 'charitable-mini-widget__amount' . ( $is_selected ? ' charitable-mini-widget__amount--selected' : '' ); |
| 143 |
?> |
| 144 |
<button |
| 145 |
class="<?php echo esc_attr( $btn_class ); ?>" |
| 146 |
data-amount="<?php echo esc_attr( $amount ); ?>" |
| 147 |
type="button" |
| 148 |
> |
| 149 |
<?php if ( 'right' === $currency_pos ) : ?> |
| 150 |
<span class="charitable-mini-widget__amount-number"><?php echo esc_html( number_format( $amount, 0, '.', '' ) . $currency_symbol ); ?></span> |
| 151 |
<?php if ( $show_currency ) : ?> |
| 152 |
<span class="charitable-mini-widget__amount-currency"><?php echo esc_html( $currency_code ); ?><?php if ( $recurring_active ) { echo '/mo'; } ?></span> |
| 153 |
<?php endif; ?> |
| 154 |
<?php else : ?> |
| 155 |
<span class="charitable-mini-widget__amount-number"><?php echo esc_html( $currency_symbol . number_format( $amount, 0, '.', '' ) ); ?></span> |
| 156 |
<?php if ( $show_currency ) : ?> |
| 157 |
<span class="charitable-mini-widget__amount-currency"><?php echo esc_html( $currency_code ); ?><?php if ( $recurring_active ) { echo '/mo'; } ?></span> |
| 158 |
<?php endif; ?> |
| 159 |
<?php endif; ?> |
| 160 |
</button> |
| 161 |
<?php endforeach; ?> |
| 162 |
|
| 163 |
<?php if ( $active_show_other ) : ?> |
| 164 |
<button |
| 165 |
class="charitable-mini-widget__amount charitable-mini-widget__amount--other" |
| 166 |
data-amount="other" |
| 167 |
type="button" |
| 168 |
><?php esc_html_e( 'Other', 'charitable' ); ?></button> |
| 169 |
<?php endif; ?> |
| 170 |
</div> |
| 171 |
|
| 172 |
<div class="charitable-mini-widget__other-wrap" style="display:none;"> |
| 173 |
<div class="charitable-mini-widget__other-input-wrap"> |
| 174 |
<?php if ( 'right' !== $currency_pos ) : ?> |
| 175 |
<span class="charitable-mini-widget__currency-symbol"><?php echo esc_html( $currency_symbol ); ?></span> |
| 176 |
<?php endif; ?> |
| 177 |
<input |
| 178 |
class="charitable-mini-widget__other-input" |
| 179 |
type="number" |
| 180 |
min="0" |
| 181 |
step="0.01" |
| 182 |
placeholder="<?php esc_attr_e( 'Enter amount', 'charitable' ); ?>" |
| 183 |
aria-label="<?php esc_attr_e( 'Custom donation amount', 'charitable' ); ?>" |
| 184 |
/> |
| 185 |
<?php if ( 'right' === $currency_pos ) : ?> |
| 186 |
<span class="charitable-mini-widget__currency-symbol"><?php echo esc_html( $currency_symbol ); ?></span> |
| 187 |
<?php endif; ?> |
| 188 |
</div> |
| 189 |
<div class="charitable-mini-widget__error" role="alert" aria-live="polite"></div> |
| 190 |
</div> |
| 191 |
|
| 192 |
<div class="charitable-mini-widget__impact" aria-live="polite"<?php echo $impact_align ? ' style="text-align:' . esc_attr( $impact_align ) . '"' : ''; ?>> |
| 193 |
<?php |
| 194 |
// Show impact for the default amount if set. |
| 195 |
$default_key = (string) $active_default; |
| 196 |
if ( isset( $active_impact[ $default_key ] ) && '' !== $active_impact[ $default_key ] ) { |
| 197 |
echo wp_kses( $active_impact[ $default_key ], array() ); |
| 198 |
} |
| 199 |
?> |
| 200 |
</div> |
| 201 |
|
| 202 |
<button |
| 203 |
class="charitable-mini-widget__cta<?php echo esc_attr( ( 'modal' === $cta_mode ) ? ' charitable-modal-trigger' : '' ); ?>" |
| 204 |
type="button" |
| 205 |
<?php if ( ! $active_default ) : ?>disabled<?php endif; ?> |
| 206 |
<?php if ( 'modal' === $cta_mode ) : ?> |
| 207 |
data-campaign-id="<?php echo esc_attr( $campaign_id ); ?>" |
| 208 |
data-amount="<?php echo esc_attr( $active_default ); ?>" |
| 209 |
data-period="<?php echo esc_attr( $recurring_active ? 'monthly' : 'once' ); ?>" |
| 210 |
<?php endif; ?> |
| 211 |
><?php echo esc_html( $cta_label ); ?></button> |
| 212 |
|
| 213 |
</div> |
| 214 |
|
