| 1 |
"use strict"; |
| 2 |
|
| 3 |
(function ($) { |
| 4 |
'use strict'; |
| 5 |
|
| 6 |
// ── Campaign Selection (BXGY pattern) ──────────────────────────── |
| 7 |
$(document).on('click', '.merchant-flexible-content-control.buy-now-style .layout', function () { |
| 8 |
var $this = $(this); |
| 9 |
var $parent = $this.closest('.merchant-flexible-content-control.buy-now-style'); |
| 10 |
$parent.find('.layout').removeClass('active'); |
| 11 |
$this.addClass('active'); |
| 12 |
initPreview(); |
| 13 |
}); |
| 14 |
$(document).on('change.merchant keyup', function () { |
| 15 |
initPreview(); |
| 16 |
updatePopupPreview(); |
| 17 |
}); |
| 18 |
|
| 19 |
// ── Button Size Preset Logic ───────────────────────────────────── |
| 20 |
var autoSelect = false; |
| 21 |
var sizes = { |
| 22 |
small: { |
| 23 |
padding_top_bottom: 5, |
| 24 |
padding_left_right: 10 |
| 25 |
}, |
| 26 |
medium: { |
| 27 |
padding_top_bottom: 12, |
| 28 |
padding_left_right: 24 |
| 29 |
}, |
| 30 |
large: { |
| 31 |
padding_top_bottom: 15, |
| 32 |
padding_left_right: 30 |
| 33 |
} |
| 34 |
}; |
| 35 |
$(document).on('change input', '.merchant-field-button-size select', function () { |
| 36 |
if (autoSelect) return; |
| 37 |
var size = $(this).val(); |
| 38 |
if (size !== 'custom' && sizes[size]) { |
| 39 |
$('[name="merchant[padding_top_bottom]"]').val(sizes[size].padding_top_bottom); |
| 40 |
$('[name="merchant[padding_left_right]"]').val(sizes[size].padding_left_right); |
| 41 |
} |
| 42 |
}); |
| 43 |
$(document).on('change input', '.merchant-field-padding_top_bottom input, .merchant-field-padding_left_right input', function () { |
| 44 |
var field = $('.merchant-field-button-size select'); |
| 45 |
if (field.val() !== 'custom') { |
| 46 |
autoSelect = true; |
| 47 |
field.val('custom').trigger('change'); |
| 48 |
autoSelect = false; |
| 49 |
} |
| 50 |
}); |
| 51 |
|
| 52 |
// ── Preview Updater ────────────────────────────────────────────── |
| 53 |
function initPreview() { |
| 54 |
var layout = $('.merchant-flexible-content-control.buy-now-style').find('.layout.active'); |
| 55 |
if (!layout.length) return; |
| 56 |
|
| 57 |
// Campaign-level fields. |
| 58 |
var buttonText = layout.find('.merchant-field-button_text input').val() || 'Buy Now'; |
| 59 |
var buttonIcon = layout.find('.merchant-field-button_icon select').val() || 'none'; |
| 60 |
var iconPosition = layout.find('.merchant-field-button_icon_position select').val() || 'before'; |
| 61 |
var customSvg = layout.find('.merchant-field-button_icon_svg textarea').val() || ''; |
| 62 |
var $btn = $('.merchant-buy-now-button'); |
| 63 |
|
| 64 |
// Update button text — preserve icon spans. |
| 65 |
updateButtonContent($btn, buttonText, buttonIcon, iconPosition, customSvg); |
| 66 |
|
| 67 |
// Global fields (Button Style section) — colors, font-size, border-radius. |
| 68 |
var textColor = $('[name="merchant[text-color]"]').val(); |
| 69 |
var bgColor = $('[name="merchant[background-color]"]').val(); |
| 70 |
var borderColor = $('[name="merchant[border-color]"]').val(); |
| 71 |
var fontSize = $('[name="merchant[font-size]"]').filter('[type=number]').val(); |
| 72 |
var borderRadius = $('[name="merchant[border-radius]"]').filter('[type=number]').val(); |
| 73 |
$btn.css({ |
| 74 |
'color': textColor || '', |
| 75 |
'background-color': bgColor || '', |
| 76 |
'border-color': borderColor || '', |
| 77 |
'font-size': fontSize ? fontSize + 'px' : '', |
| 78 |
'border-radius': borderRadius ? borderRadius + 'px' : '' |
| 79 |
}); |
| 80 |
} |
| 81 |
|
| 82 |
/** |
| 83 |
* Rebuild button inner HTML with text + optional icon. |
| 84 |
*/ |
| 85 |
function updateButtonContent($btn, text, iconKey, position, customSvg) { |
| 86 |
// Icon SVG map is localized from PHP. |
| 87 |
var icons = typeof merchantBuyNowPreview !== 'undefined' ? merchantBuyNowPreview.icons : {}; |
| 88 |
var svg = ''; |
| 89 |
if (iconKey === 'custom' && customSvg) { |
| 90 |
svg = '<span class="merchant-buy-now-icon">' + customSvg + '</span>'; |
| 91 |
} else if (iconKey !== 'none' && icons[iconKey]) { |
| 92 |
svg = '<span class="merchant-buy-now-icon">' + icons[iconKey] + '</span>'; |
| 93 |
} |
| 94 |
var iconAfter = ''; |
| 95 |
var iconBefore = ''; |
| 96 |
if (svg) { |
| 97 |
if (position === 'after') { |
| 98 |
iconAfter = svg.replace('merchant-buy-now-icon', 'merchant-buy-now-icon merchant-buy-now-icon--after'); |
| 99 |
} else { |
| 100 |
iconBefore = svg; |
| 101 |
} |
| 102 |
} |
| 103 |
$btn.html(iconBefore + text + iconAfter); |
| 104 |
} |
| 105 |
|
| 106 |
// ── Preview Panel Switching (FBT pattern) ──────────────────────── |
| 107 |
function showProductPagePreview() { |
| 108 |
$('.merchant-buy-now-preview-product-page').addClass('show'); |
| 109 |
$('.merchant-buy-now-preview-popup').removeClass('show'); |
| 110 |
} |
| 111 |
function showPopupPreview() { |
| 112 |
$('.merchant-buy-now-preview-popup').addClass('show'); |
| 113 |
$('.merchant-buy-now-preview-product-page').removeClass('show'); |
| 114 |
updatePopupPreview(); |
| 115 |
} |
| 116 |
|
| 117 |
// Detect which settings section is open and switch preview accordingly. |
| 118 |
$(document).on('click', '.merchant-module-page-setting-box', function () { |
| 119 |
var $box = $(this); |
| 120 |
// Check if this box contains any popup style or layout fields. |
| 121 |
var isPopupSection = $box.find('[class*="merchant-field-popup_"], [class*="merchant-field-upsell_layout"], [class*="merchant-field-upsell_button_layout"]').length > 0; |
| 122 |
if (isPopupSection) { |
| 123 |
showPopupPreview(); |
| 124 |
} else { |
| 125 |
showProductPagePreview(); |
| 126 |
} |
| 127 |
}); |
| 128 |
|
| 129 |
// ── Popup Style Live Preview ───────────────────────────────────── |
| 130 |
function updatePopupPreview() { |
| 131 |
var $popup = $('.merchant-buy-now-popup-preview-box'); |
| 132 |
if (!$popup.length) return; |
| 133 |
|
| 134 |
// Colors. |
| 135 |
$popup.css('background-color', $('[name="merchant[popup_bg_color]"]').val() || '#ffffff'); |
| 136 |
$popup.css('border-radius', ($('[name="merchant[popup_border_radius]"]').filter('[type=number]').val() || 12) + 'px'); |
| 137 |
$popup.find('.merchant-buy-now-popup-preview-title').css('color', $('[name="merchant[popup_title_color]"]').val() || '#212121'); |
| 138 |
$popup.find('.merchant-buy-now-popup-preview-description').css('color', $('[name="merchant[popup_description_color]"]').val() || '#757575'); |
| 139 |
$popup.find('.product-name').css('color', $('[name="merchant[popup_product_name_color]"]').val() || '#212121'); |
| 140 |
$popup.find('.product-price').css('color', $('[name="merchant[popup_price_color]"]').val() || '#212121'); |
| 141 |
$popup.find('.merchant-buy-now-popup-preview-accept').css({ |
| 142 |
'background-color': $('[name="merchant[popup_accept_bg_color]"]').val() || '#212121', |
| 143 |
'color': $('[name="merchant[popup_accept_text_color]"]').val() || '#ffffff' |
| 144 |
}); |
| 145 |
$popup.find('.merchant-buy-now-popup-preview-decline').css('color', $('[name="merchant[popup_decline_text_color]"]').val() || '#757575'); |
| 146 |
$('.merchant-buy-now-popup-preview-overlay').css('background-color', $('[name="merchant[popup_overlay_color]"]').val() || 'rgba(0,0,0,0.5)'); |
| 147 |
|
| 148 |
// Sizing. |
| 149 |
$popup.css('max-width', ($('[name="merchant[popup_max_width]"]').filter('[type=number]').val() || 480) + 'px'); |
| 150 |
$popup.css('padding', ($('[name="merchant[popup_padding]"]').filter('[type=number]').val() || 24) + 'px'); |
| 151 |
var borderWidth = $('[name="merchant[popup_border_width]"]').filter('[type=number]').val() || 0; |
| 152 |
var borderColor = $('[name="merchant[popup_border_color]"]').val() || '#e0e0e0'; |
| 153 |
$popup.css('border', borderWidth > 0 ? borderWidth + 'px solid ' + borderColor : 'none'); |
| 154 |
|
| 155 |
// Typography. |
| 156 |
$popup.find('.merchant-buy-now-popup-preview-title').css('font-size', ($('[name="merchant[popup_title_font_size]"]').filter('[type=number]').val() || 18) + 'px'); |
| 157 |
|
| 158 |
// Button border radius. |
| 159 |
var btnRadius = ($('[name="merchant[popup_accept_btn_radius]"]').filter('[type=number]').val() || 6) + 'px'; |
| 160 |
$popup.find('.merchant-buy-now-popup-preview-accept, .merchant-buy-now-popup-preview-decline').css('border-radius', btnRadius); |
| 161 |
|
| 162 |
// Button font size. |
| 163 |
var btnFontSize = ($('[name="merchant[popup_btn_font_size]"]').filter('[type=number]').val() || 15) + 'px'; |
| 164 |
$popup.find('.merchant-buy-now-popup-preview-accept, .merchant-buy-now-popup-preview-decline').css('font-size', btnFontSize); |
| 165 |
|
| 166 |
// Product layout (list / grid). |
| 167 |
var productLayout = $('[name="merchant[upsell_layout]"]').val() || 'list'; |
| 168 |
var $productsContainer = $popup.find('.merchant-buy-now-popup-preview-products'); |
| 169 |
$productsContainer.removeClass('is-layout-list is-layout-grid').addClass('is-layout-' + productLayout); |
| 170 |
|
| 171 |
// Button layout (stacked / stacked-reverse / side-by-side / accept-only). |
| 172 |
var btnLayout = $('[name="merchant[upsell_button_layout]"]').val() || 'stacked'; |
| 173 |
var $actions = $popup.find('.merchant-buy-now-popup-preview-actions'); |
| 174 |
$actions.removeClass('is-btn-stacked is-btn-stacked-reverse is-btn-side-by-side is-btn-accept-only').addClass('is-btn-' + btnLayout); |
| 175 |
|
| 176 |
// Timer countdown badge. |
| 177 |
var countdownClass = 'merchant-buy-now-popup-preview-countdown'; |
| 178 |
$popup.find('.' + countdownClass).remove(); // Clear any existing. |
| 179 |
|
| 180 |
var timerEnabled = $('[name="merchant[popup_timer_enabled]"]').is(':checked'); |
| 181 |
if (timerEnabled) { |
| 182 |
var timerAction = $('[name="merchant[popup_timer_action]"]').val() || 'auto_decline'; |
| 183 |
var timerDuration = $('[name="merchant[popup_timer_duration]"]').filter('[type=number]').val() || 30; |
| 184 |
var badgeHtml = '<span class="' + countdownClass + '">' + '<svg viewBox="0 0 36 36"><circle class="countdown-track" cx="18" cy="18" r="16" />' + '<circle class="countdown-fill" cx="18" cy="18" r="16" stroke-dasharray="100.53" stroke-dashoffset="35" /></svg>' + '<span class="countdown-seconds">' + timerDuration + '</span></span>'; |
| 185 |
var $target; |
| 186 |
if (timerAction === 'auto_accept') { |
| 187 |
$target = $popup.find('.merchant-buy-now-popup-preview-accept'); |
| 188 |
} else if (timerAction === 'auto_decline') { |
| 189 |
$target = $popup.find('.merchant-buy-now-popup-preview-decline'); |
| 190 |
} else { |
| 191 |
// do_nothing — show near the title area as a standalone badge. |
| 192 |
$target = $popup.find('.merchant-buy-now-popup-preview-title'); |
| 193 |
} |
| 194 |
$target.append(badgeHtml); |
| 195 |
} |
| 196 |
} |
| 197 |
|
| 198 |
// ── Init: Select first campaign ────────────────────────────────── |
| 199 |
$(document).ready(function () { |
| 200 |
$('.merchant-flexible-content-control.buy-now-style .layout:first-child').addClass('active').trigger('click'); |
| 201 |
}); |
| 202 |
})(jQuery); |
