| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
const loadTabContent = async (wrapper, key) => { |
| 5 |
const ajax = wrapper.dataset.ajax === 'yes'; |
| 6 |
if (!ajax) { |
| 7 |
return true; |
| 8 |
} |
| 9 |
|
| 10 |
const panel = wrapper.querySelector('.ka-woo-tabs__panel[data-tab="' + key + '"]'); |
| 11 |
if (!panel || !panel.querySelector('.ka-woo-tabs__placeholder')) { |
| 12 |
return true; |
| 13 |
} |
| 14 |
|
| 15 |
const ajaxUrl = wrapper.dataset.ajaxUrl; |
| 16 |
const nonce = wrapper.dataset.nonce; |
| 17 |
const productId = wrapper.dataset.productId; |
| 18 |
|
| 19 |
if (!ajaxUrl || !nonce || !productId) { |
| 20 |
return true; |
| 21 |
} |
| 22 |
|
| 23 |
panel.classList.add('is-loading'); |
| 24 |
|
| 25 |
const formData = new FormData(); |
| 26 |
formData.append('action', 'king_addons_render_product_tab'); |
| 27 |
formData.append('nonce', nonce); |
| 28 |
formData.append('product_id', productId); |
| 29 |
formData.append('tab_key', key); |
| 30 |
|
| 31 |
try { |
| 32 |
const response = await fetch(ajaxUrl, { |
| 33 |
method: 'POST', |
| 34 |
credentials: 'same-origin', |
| 35 |
body: formData, |
| 36 |
}); |
| 37 |
|
| 38 |
const result = await response.json(); |
| 39 |
if (result && result.success && result.data && typeof result.data.html === 'string') { |
| 40 |
panel.innerHTML = result.data.html; |
| 41 |
panel.dataset.loaded = 'yes'; |
| 42 |
} else { |
| 43 |
panel.innerHTML = '<div class="ka-woo-tabs__error">Could not load content.</div>'; |
| 44 |
} |
| 45 |
} catch (e) { |
| 46 |
panel.innerHTML = '<div class="ka-woo-tabs__error">Could not load content.</div>'; |
| 47 |
} |
| 48 |
|
| 49 |
panel.classList.remove('is-loading'); |
| 50 |
return true; |
| 51 |
}; |
| 52 |
|
| 53 |
const initTabs = (wrapper) => { |
| 54 |
const tabs = wrapper.querySelectorAll('.ka-woo-tabs__tab'); |
| 55 |
const panels = wrapper.querySelectorAll('.ka-woo-tabs__panel'); |
| 56 |
const accordions = wrapper.querySelectorAll('.ka-woo-tabs__accordion-toggle'); |
| 57 |
|
| 58 |
const setActive = (key) => { |
| 59 |
tabs.forEach((btn) => btn.classList.toggle('is-active', btn.dataset.tab === key)); |
| 60 |
panels.forEach((panel) => { |
| 61 |
const active = panel.dataset.tab === key; |
| 62 |
panel.classList.toggle('is-active', active); |
| 63 |
const body = panel.querySelector('.ka-woo-tabs__accordion-body'); |
| 64 |
if (body) { |
| 65 |
body.style.display = active ? 'block' : 'none'; |
| 66 |
} |
| 67 |
}); |
| 68 |
}; |
| 69 |
|
| 70 |
const handleSwitch = async (key) => { |
| 71 |
const panel = wrapper.querySelector('.ka-woo-tabs__panel[data-tab="' + key + '"]'); |
| 72 |
const needsLoad = panel && panel.querySelector('.ka-woo-tabs__placeholder'); |
| 73 |
if (needsLoad) { |
| 74 |
await loadTabContent(wrapper, key); |
| 75 |
} |
| 76 |
setActive(key); |
| 77 |
}; |
| 78 |
|
| 79 |
tabs.forEach((btn) => { |
| 80 |
btn.addEventListener('click', () => handleSwitch(btn.dataset.tab)); |
| 81 |
}); |
| 82 |
|
| 83 |
accordions.forEach((btn) => { |
| 84 |
btn.addEventListener('click', () => handleSwitch(btn.dataset.tab)); |
| 85 |
}); |
| 86 |
}; |
| 87 |
|
| 88 |
const bootstrap = (scope) => { |
| 89 |
const root = scope || document; |
| 90 |
root.querySelectorAll('.ka-woo-tabs').forEach(initTabs); |
| 91 |
}; |
| 92 |
|
| 93 |
document.addEventListener('DOMContentLoaded', () => bootstrap(document)); |
| 94 |
|
| 95 |
if (window.elementorFrontend && window.elementorFrontend.hooks) { |
| 96 |
window.elementorFrontend.hooks.addAction('frontend/element_ready/woo_product_tabs.default', (scope) => { |
| 97 |
bootstrap(scope[0] || scope); |
| 98 |
}); |
| 99 |
} |
| 100 |
})(); |
| 101 |
|
| 102 |
|
| 103 |
|
| 104 |
|
| 105 |
|
| 106 |
|
| 107 |
|
