| 1 |
'use strict'; |
| 2 |
|
| 3 |
(function ($) { |
| 4 |
/** |
| 5 |
* Set max value for the input field based on the unit |
| 6 |
* |
| 7 |
* @param element The input field |
| 8 |
* @param unit The unit of the input field |
| 9 |
*/ |
| 10 |
function setMaxValue(element, unit) { |
| 11 |
if ('WEEK' === unit) { |
| 12 |
element.attr('max', 4); |
| 13 |
if (element.val() > 4) { |
| 14 |
element.val(4); |
| 15 |
} |
| 16 |
} |
| 17 |
if ('DAY' === unit) { |
| 18 |
element.attr('max', 30); |
| 19 |
if (element.val() > 30) { |
| 20 |
element.val(30); |
| 21 |
} |
| 22 |
} |
| 23 |
if ('HOUR' === unit) { |
| 24 |
element.attr('max', 720); |
| 25 |
if (element.val() > 720) { |
| 26 |
element.val(720); |
| 27 |
} |
| 28 |
} |
| 29 |
} |
| 30 |
|
| 31 |
/** |
| 32 |
* Initializes the preview of the recent sales notifications. |
| 33 |
* |
| 34 |
* This function retrieves the current values of various form fields and uses them to update the styles of the progress bar. |
| 35 |
* |
| 36 |
* @return {void} |
| 37 |
*/ |
| 38 |
function merchantInitPreview() { |
| 39 |
var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; |
| 40 |
var widget = $('.merchant-recent-sales-notifications-widget'), |
| 41 |
layout = $('.merchant-field-layout input:checked').val(), |
| 42 |
themeType = $('.merchant-field-theme_type input:checked').val(), |
| 43 |
theme = $('.merchant-field-theme input:checked').val(), |
| 44 |
customBgImage = $('.merchant-field-background_image input'), |
| 45 |
bgColor = $('.merchant-field-background_color input').val(), |
| 46 |
borderColor = $('.merchant-field-border_color input').val(), |
| 47 |
messageColor = $('.merchant-field-message_color input').val(), |
| 48 |
productNameColor = $('.merchant-field-product_name_color input').val(), |
| 49 |
timeColor = $('.merchant-field-time_color input').val(), |
| 50 |
hideProductImage = $('.merchant-field-hide_product_image input').is(':checked'), |
| 51 |
hideProductName = $('.merchant-field-hide_product_name input').is(':checked'), |
| 52 |
boxBorderRadius = $('.merchant-field-notification_box_radius input'), |
| 53 |
productImageBorderRadius = $('.merchant-field-product_image_radius input'), |
| 54 |
closeBtnBgColor = $('.merchant-field-close_btn_bg_color input').val(), |
| 55 |
closeBtnColor = $('.merchant-field-close_btn_color input').val(), |
| 56 |
recentPurchasesUnit = $('.merchant-field-single_product_purchase .merchant-field-time_unit select').val(), |
| 57 |
cartNotificationUnit = $('.merchant-field-single_product_add_to_cart .merchant-field-time_unit select').val(), |
| 58 |
visitorsCountUnit = $('.merchant-field-product_views_settings .merchant-field-time_unit select').val(); |
| 59 |
setMaxValue($('.merchant-field-single_product_purchase .merchant-field-time_span input'), recentPurchasesUnit); |
| 60 |
setMaxValue($('.merchant-field-single_product_add_to_cart .merchant-field-time_span input'), cartNotificationUnit); |
| 61 |
setMaxValue($('.merchant-field-product_views_settings .merchant-field-time_span input'), visitorsCountUnit); |
| 62 |
|
| 63 |
// remove all classes starts with merchant-rsn- |
| 64 |
widget.attr('class', function (i, c) { |
| 65 |
return c.replace(/(^|\s)widget-layout-\S+/g, ''); |
| 66 |
}); |
| 67 |
widget.addClass('widget-' + layout); |
| 68 |
if (e !== null && $(e.target).closest('.merchant-field-layout').length) { |
| 69 |
if (layout === 'layout-1' || layout === 'layout-2') { |
| 70 |
boxBorderRadius.val(8); |
| 71 |
productImageBorderRadius.val(8); |
| 72 |
} |
| 73 |
if (layout === 'layout-3') { |
| 74 |
boxBorderRadius.val(8); |
| 75 |
productImageBorderRadius.val(50); |
| 76 |
} |
| 77 |
if (layout === 'layout-4') { |
| 78 |
boxBorderRadius.val(60); |
| 79 |
productImageBorderRadius.val(50); |
| 80 |
} |
| 81 |
} |
| 82 |
document.documentElement.style.setProperty('--merchant-rsn-bg-color', bgColor); |
| 83 |
if (themeType === 'template') { |
| 84 |
var sizesAttr = customBgImage.closest('.merchant-field-background_image').find('.merchant-upload-image').attr('data-sizes'); |
| 85 |
if (customBgImage.val() && sizesAttr) { |
| 86 |
var sizes = JSON.parse(sizesAttr); |
| 87 |
if (sizes.full !== undefined) { |
| 88 |
document.documentElement.style.setProperty('--merchant-rsn-bg-image', 'url( "' + sizes.full.url + '")'); |
| 89 |
} else { |
| 90 |
document.documentElement.style.setProperty('--merchant-rsn-bg-image', 'url( "' + MerchantRSN.merchant_url + 'assets/images/modules/recent-sales-notifications/' + theme + '.png")'); |
| 91 |
} |
| 92 |
} else { |
| 93 |
document.documentElement.style.setProperty('--merchant-rsn-bg-image', 'url( "' + MerchantRSN.merchant_url + 'assets/images/modules/recent-sales-notifications/' + theme + '.png")'); |
| 94 |
} |
| 95 |
} else { |
| 96 |
document.documentElement.style.setProperty('--merchant-rsn-bg-image', 'none'); |
| 97 |
} |
| 98 |
|
| 99 |
// Change border color |
| 100 |
document.documentElement.style.setProperty('--merchant-rsn-border-color', borderColor); |
| 101 |
|
| 102 |
// Change close button background color |
| 103 |
document.documentElement.style.setProperty('--merchant-rsn-close-btn-bg', closeBtnBgColor); |
| 104 |
|
| 105 |
// Change box radius |
| 106 |
document.documentElement.style.setProperty('--merchant-rsn-box-radius', boxBorderRadius.val() + 'px'); |
| 107 |
|
| 108 |
// Change product image border radius |
| 109 |
document.documentElement.style.setProperty('--merchant-rsn-box-product-image-radius', productImageBorderRadius.val() + 'px'); |
| 110 |
widget.find('.merchant-notification-message').css('color', messageColor); |
| 111 |
widget.find('.merchant-notification-title').css('color', productNameColor); |
| 112 |
widget.find('.merchant-notification-time').css('color', timeColor); |
| 113 |
if (hideProductImage) { |
| 114 |
widget.find('.merchant-notification-image').hide(); |
| 115 |
} else { |
| 116 |
widget.find('.merchant-notification-image').show(); |
| 117 |
} |
| 118 |
if (hideProductName) { |
| 119 |
widget.find('.merchant-notification-title').hide(); |
| 120 |
} else { |
| 121 |
widget.find('.merchant-notification-title').show(); |
| 122 |
} |
| 123 |
$('.merchant-recent-sales-notifications-widget svg path').attr('fill', closeBtnColor); |
| 124 |
} |
| 125 |
$(document).on('change.merchant keyup click', 'input[type="text"]:not(.merchant-color-input)', function (e) { |
| 126 |
var widget = $('.merchant-recent-sales-notifications-widget'); |
| 127 |
var message = widget.find('.merchant-notification-message'); |
| 128 |
var customerName = getFormattedCustomerName($('.merchant-field-customer_name_format select').val()); |
| 129 |
message.html($(this).val().replace('{customer_name}', "<span class=\"customer-name\">".concat(customerName, "</span>")).replace('{country_code}', 'US').replace('{city}', 'New York').replace('{count}', '7')); |
| 130 |
}); |
| 131 |
$(document).on('change', '.merchant-field-customer_name_format select', function (e) { |
| 132 |
var customerName = getFormattedCustomerName($(this).val()); |
| 133 |
$('.customer-name').text(customerName); |
| 134 |
}); |
| 135 |
$(document).on('change.merchant keyup', function (e) { |
| 136 |
merchantInitPreview(e); |
| 137 |
}); |
| 138 |
$(document).ready(function () { |
| 139 |
merchantInitPreview(); |
| 140 |
}); |
| 141 |
|
| 142 |
// Helpers |
| 143 |
function getFormattedCustomerName(format) { |
| 144 |
var customerName; |
| 145 |
switch (format) { |
| 146 |
case 'firstname': |
| 147 |
customerName = 'John'; |
| 148 |
break; |
| 149 |
case 'lastname': |
| 150 |
customerName = 'Doe'; |
| 151 |
break; |
| 152 |
case 'firstname_initial': |
| 153 |
customerName = 'John D.'; |
| 154 |
break; |
| 155 |
case 'lastname_initial': |
| 156 |
customerName = 'J. Doe'; |
| 157 |
break; |
| 158 |
case 'full': |
| 159 |
default: |
| 160 |
customerName = 'John Doe'; |
| 161 |
} |
| 162 |
return customerName; |
| 163 |
} |
| 164 |
})(jQuery); |
