| 1 |
(function () { |
| 2 |
document.querySelectorAll('.bkbg-guarantee-section-app').forEach(function (root) { |
| 3 |
var opts = {}; |
| 4 |
try { opts = JSON.parse(root.dataset.opts || '{}'); } catch (e) {} |
| 5 |
|
| 6 |
var sz = opts.sealSize || 200; |
| 7 |
var wrap = document.createElement('div'); |
| 8 |
wrap.className = 'bkbg-guarantee-section-wrap'; |
| 9 |
wrap.style.cssText = 'background:' + (opts.bgColor || '#f5f3ff') + ';padding:' + (opts.paddingTop || 80) + 'px 40px ' + (opts.paddingBottom || 80) + 'px;'; |
| 10 |
wrap.style.setProperty('--bkbg-gs-max', (opts.maxWidth || 1100) + 'px'); |
| 11 |
|
| 12 |
/* typography CSS vars */ |
| 13 |
if (window.typoCssVarsForEl) { |
| 14 |
window.typoCssVarsForEl(opts.typoHeading, '--bkbg-guar-hl-', wrap); |
| 15 |
window.typoCssVarsForEl(opts.typoBody, '--bkbg-guar-bd-', wrap); |
| 16 |
} |
| 17 |
|
| 18 |
var inner = document.createElement('div'); |
| 19 |
inner.className = 'bkbg-gs-inner' + (opts.layout === 'centered' ? ' centered' : ''); |
| 20 |
|
| 21 |
// Seal |
| 22 |
var seal = document.createElement('div'); |
| 23 |
seal.className = 'bkbg-gs-seal'; |
| 24 |
seal.style.cssText = 'width:' + sz + 'px;height:' + sz + 'px;background:' + (opts.sealBg || '#7c3aed') + ';color:' + (opts.sealColor || '#fff') + ';box-shadow:0 0 0 12px ' + (opts.sealBg || '#7c3aed') + '33;'; |
| 25 |
|
| 26 |
var sealIcon = document.createElement('div'); |
| 27 |
sealIcon.className = 'bkbg-gs-seal-icon'; |
| 28 |
sealIcon.style.fontSize = (sz * 0.2) + 'px'; |
| 29 |
var _IP = window.bkbgIconPicker; |
| 30 |
if (_IP && opts.sealIconType && opts.sealIconType !== 'custom-char') { |
| 31 |
var _iconNode = _IP.buildFrontendIcon(opts.sealIconType, opts.sealIcon, opts.sealIconDashicon, opts.sealIconImageUrl, opts.sealIconDashiconColor); |
| 32 |
if (_iconNode) sealIcon.appendChild(_iconNode); |
| 33 |
else sealIcon.textContent = opts.sealIcon || '🛡️'; |
| 34 |
} else { |
| 35 |
sealIcon.textContent = opts.sealIcon || '🛡️'; |
| 36 |
} |
| 37 |
|
| 38 |
var sealLabel = document.createElement('div'); |
| 39 |
sealLabel.className = 'bkbg-gs-seal-label'; |
| 40 |
sealLabel.style.fontSize = (sz * 0.17) + 'px'; |
| 41 |
sealLabel.textContent = opts.sealLabel || '30-Day'; |
| 42 |
|
| 43 |
var sealSub = document.createElement('div'); |
| 44 |
sealSub.className = 'bkbg-gs-seal-sub'; |
| 45 |
sealSub.style.fontSize = (sz * 0.1) + 'px'; |
| 46 |
sealSub.textContent = (opts.sealSub || 'Money-Back\nGuarantee'); |
| 47 |
|
| 48 |
seal.appendChild(sealIcon); |
| 49 |
seal.appendChild(sealLabel); |
| 50 |
seal.appendChild(sealSub); |
| 51 |
inner.appendChild(seal); |
| 52 |
|
| 53 |
// Text column |
| 54 |
var textDiv = document.createElement('div'); |
| 55 |
textDiv.className = 'bkbg-gs-text'; |
| 56 |
|
| 57 |
var h2 = document.createElement('h2'); |
| 58 |
h2.className = 'bkbg-gs-heading'; |
| 59 |
h2.style.color = opts.headingColor || '#111827'; |
| 60 |
h2.innerHTML = opts.heading || ''; |
| 61 |
textDiv.appendChild(h2); |
| 62 |
|
| 63 |
var p = document.createElement('p'); |
| 64 |
p.className = 'bkbg-gs-body'; |
| 65 |
p.style.color = opts.textColor || '#374151'; |
| 66 |
p.innerHTML = opts.subtext || ''; |
| 67 |
textDiv.appendChild(p); |
| 68 |
|
| 69 |
if (opts.bullets && opts.bullets.length) { |
| 70 |
var ul = document.createElement('ul'); |
| 71 |
ul.className = 'bkbg-gs-bullets'; |
| 72 |
opts.bullets.forEach(function (b) { |
| 73 |
var li = document.createElement('li'); |
| 74 |
li.className = 'bkbg-gs-bullet'; |
| 75 |
var chk = document.createElement('span'); |
| 76 |
chk.className = 'bkbg-gs-check'; |
| 77 |
chk.style.color = opts.bulletColor || '#16a34a'; |
| 78 |
chk.textContent = '✓'; |
| 79 |
var txt = document.createElement('span'); |
| 80 |
txt.style.color = opts.textColor || '#374151'; |
| 81 |
txt.textContent = b; |
| 82 |
li.appendChild(chk); |
| 83 |
li.appendChild(txt); |
| 84 |
ul.appendChild(li); |
| 85 |
}); |
| 86 |
textDiv.appendChild(ul); |
| 87 |
} |
| 88 |
|
| 89 |
if (opts.showCta && opts.ctaLabel) { |
| 90 |
var cta = document.createElement('a'); |
| 91 |
cta.className = 'bkbg-gs-cta'; |
| 92 |
cta.href = opts.ctaUrl || '#'; |
| 93 |
cta.style.background = opts.ctaBg || '#7c3aed'; |
| 94 |
cta.style.color = opts.ctaColor || '#fff'; |
| 95 |
cta.textContent = opts.ctaLabel + ' →'; |
| 96 |
textDiv.appendChild(cta); |
| 97 |
} |
| 98 |
|
| 99 |
inner.appendChild(textDiv); |
| 100 |
wrap.appendChild(inner); |
| 101 |
root.parentNode.replaceChild(wrap, root); |
| 102 |
}); |
| 103 |
})(); |
| 104 |
|
