'; }).join(''); } }).catch(function(){}); fetch(siteUrl + '/api/strapi/article-categories?populate=*').then(function(r){return r.json()}).then(function(res) { var cats = res.data || []; // Navbar blog dropdown (skip if SSR already populated — GTranslate has translated it) var blogDropdown = document.querySelector('[data-dropdown="blog"]'); if (blogDropdown && cats.length && !blogDropdown.children.length) { blogDropdown.innerHTML = cats.map(function(cat) { return ''; }).join(''); } }).catch(function(){}); // Close mobile menu on overlay click document.addEventListener('click', function(e) { if (navWrap && navWrap.classList.contains('active')) { if (!navWrap.contains(e.target) && !toggleBtn.contains(e.target)) { navWrap.classList.remove('active'); if (toggleBtn) toggleBtn.classList.remove('active'); document.body.style.overflow = ''; } } }); })(); // ========== 4. FloatingContact + back-to-top ========== (function initFloatingContact() { var sidebar = document.querySelector('.floating-sidebar'); if (!sidebar) { // FloatingContact may not have rendered (empty settings in SSR) // Fetch settings and create the sidebar dynamically fetch(siteUrl + '/api/strapi/global-setting?populate=*').then(function(r){return r.json()}).then(function(res) { var s = res.data || {}; if (!s.phone && !s.whatsapp && !s.email) return; sidebar = document.createElement('div'); sidebar.className = 'floating-sidebar'; var items = ''; if (s.phone) { items += ''; } if (s.whatsapp) { var waNum = s.whatsapp.replace(/[^0-9]/g, ''); items += ''; } if (s.email) { items += ''; } // Back to top button (hidden initially) items += ''; sidebar.innerHTML = items; document.body.appendChild(sidebar); setupSidebarBehavior(sidebar); }).catch(function(){}); return; } setupSidebarBehavior(sidebar); })(); function setupSidebarBehavior(sidebar) { var topBtn = sidebar.querySelector('.floating-sidebar-top'); function checkScroll() { if (window.scrollY > 300) { sidebar.style.opacity = '1'; sidebar.style.pointerEvents = 'auto'; if (topBtn) topBtn.style.display = ''; } else { if (topBtn) topBtn.style.display = 'none'; } } window.addEventListener('scroll', checkScroll, { passive: true }); checkScroll(); if (topBtn) { topBtn.addEventListener('click', function(e) { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }); } } // ========== 5. Swiper: load and initialize all .swiper elements ========== var swiperCss = document.createElement('link'); swiperCss.rel = 'stylesheet'; swiperCss.href = siteUrl + '/css/swiper-bundle.min.css'; document.head.appendChild(swiperCss); var animateCss = document.createElement('link'); animateCss.rel = 'stylesheet'; animateCss.href = siteUrl + '/css/animate.min.css'; document.head.appendChild(animateCss); var swiperScript = document.createElement('script'); swiperScript.src = siteUrl + '/js/swiper-bundle.min.js'; document.body.appendChild(swiperScript); swiperScript.onload = function() { setTimeout(function() { document.querySelectorAll('.swiper').forEach(function(el) { if (el.swiper) return; try { var opts = { loop: true, autoplay: { delay: 5000, disableOnInteraction: false }, speed: 800, slidesPerView: 1, slidesPerGroup: 1, spaceBetween: 30 }; var pag = el.querySelector('.swiper-pagination'); if (pag) opts.pagination = { clickable: true, el: pag }; var nextBtn = el.querySelector('.swiper-button-next'); if (nextBtn) opts.navigation = { nextEl: nextBtn, prevEl: el.querySelector('.swiper-button-prev') }; if (el.classList.contains('hero-swiper')) { opts.effect = 'fade'; opts.breakpoints = undefined; } if (el.classList.contains('categories-showcase-swiper')) { opts.effect = 'fade'; opts.breakpoints = undefined; } if (el.classList.contains('owl-style-9')) { opts.breakpoints = { 0: { slidesPerView: 1, slidesPerGroup: 1 }, 576: { slidesPerView: 2, slidesPerGroup: 1 }, 768: { slidesPerView: 3, slidesPerGroup: 1 }, 992: { slidesPerView: 4, slidesPerGroup: 1 } }; } if (el.classList.contains('related-products-swiper')) { opts.breakpoints = { 0: { slidesPerView: 1 }, 576: { slidesPerView: 2 }, 768: { slidesPerView: 3 }, 992: { slidesPerView: 4 } }; } if (el.classList.contains('product-gallery-main')) { opts.loop = false; opts.autoplay = false; opts.speed = 400; opts.spaceBetween = 0; opts.breakpoints = undefined; } new Swiper(el, opts); } catch(e) { console.warn('Swiper init failed:', e); } }); // Product detail: thumbnail click to change main image document.querySelectorAll('.product-gallery-thumb-item').forEach(function(thumb, idx) { thumb.addEventListener('click', function() { document.querySelectorAll('.product-gallery-thumb-item').forEach(function(t) { t.classList.remove('active'); }); thumb.classList.add('active'); var mainSwiper = document.querySelector('.product-gallery-main'); if (mainSwiper && mainSwiper.swiper) { mainSwiper.swiper.slideTo(idx); } }); }); }, 500); }; // ========== 5b. Product detail: tab switching ========== document.querySelectorAll('.tabs-custom .nav-link').forEach(function(tabLink) { tabLink.addEventListener('click', function(e) { e.preventDefault(); var tabsContainer = tabLink.closest('.tabs-custom'); if (!tabsContainer) return; // Deactivate all tabs tabsContainer.querySelectorAll('.nav-link').forEach(function(t) { t.classList.remove('active'); }); tabsContainer.querySelectorAll('.tab-pane').forEach(function(p) { p.classList.remove('show', 'active'); }); // Activate clicked tab tabLink.classList.add('active'); var targetId = tabLink.getAttribute('href'); if (targetId) { var targetPane = tabsContainer.querySelector(targetId); if (targetPane) { targetPane.classList.add('show', 'active'); } } }); }); // ========== 6. WOW.js: scroll animations ========== var wowScript = document.createElement('script'); wowScript.src = siteUrl + '/js/wow.min.js'; document.body.appendChild(wowScript); wowScript.onload = function() { setTimeout(function() { try { new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true }).init(); } catch(e) { console.warn('WOW init failed:', e); } }, 300); }; // ========== 7. Parallax: scroll-based parallax for .parallax-section ========== var pSections = document.querySelectorAll('.parallax-section'); if (pSections.length) { var ticking = false; function handleParallax() { if (ticking) return; ticking = true; window.requestAnimationFrame(function() { pSections.forEach(function(section) { var rect = section.getBoundingClientRect(); var windowHeight = window.innerHeight; var inView = rect.top < windowHeight && rect.bottom > 0; var bg = section.querySelector('.parallax-bg'); if (bg && inView) { var scrollProgress = (windowHeight - rect.top) / (windowHeight + rect.height); var speed = 0.6; var maxOffset = rect.height * speed; var offset = (scrollProgress - 0.5) * maxOffset * 2; bg.style.transform = 'translate3d(0, ' + offset + 'px, 0)'; } }); ticking = false; }); } window.addEventListener('scroll', handleParallax, { passive: true }); window.addEventListener('resize', handleParallax, { passive: true }); handleParallax(); } // ========== 8. Video modal: banner "Watch Video" button ========== (function initVideoModal() { var modal = null; // Play button click handler document.addEventListener('click', function(e) { var btn = e.target.closest('.banner-play-btn'); if (!btn) return; e.preventDefault(); // Find youtube URL from the banner's data or the page structure // The button sits inside a banner slide; we look for a data attribute or extract from nearby context // Since SSR renders youtubeVideoUrl as static content, we need another approach: // The play button is only shown when youtubeVideoUrl exists, so we read from a data attribute var youtubeUrl = btn.getAttribute('data-youtube-url') || ''; if (!youtubeUrl) return; var embedUrl = youtubeUrl; if (embedUrl.indexOf('/embed/') === -1) { var m = embedUrl.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]+)/); if (m) embedUrl = 'https://www.youtube.com/embed/' + m[1]; } // Create modal modal = document.createElement('div'); modal.className = 'video-modal-overlay'; modal.innerHTML = ''; document.body.appendChild(modal); document.body.style.overflow = 'hidden'; // Close handlers modal.addEventListener('click', function(ev) { if (ev.target === modal) closeModal(); }); modal.querySelector('.video-modal-close').addEventListener('click', closeModal); document.addEventListener('keydown', onEscKey); }); function onEscKey(e) { if (e.key === 'Escape') closeModal(); } function closeModal() { if (modal) { modal.remove(); modal = null; document.body.style.overflow = ''; } document.removeEventListener('keydown', onEscKey); } })(); // ========== 9. Products list: category filter + pagination ========== (function initProductsList() { var section = document.querySelector('[data-products-list]'); if (!section) return; var apiBase = siteUrl + '/api/strapi'; var currentCategory = ''; var currentPage = 1; function fetchAndRender(category, page) { currentCategory = category; currentPage = page; var queryParams = 'populate=*&sort=createdAt:desc&pagination[pageSize]=6&pagination[page]=' + page; if (category) queryParams += '&filters[category][slug][$eq]=' + category; var url = apiBase + '/products?' + queryParams; // Show loading - only replace the product list area (col-lg-8 col-xl-9) var listCol = section.querySelector('.col-lg-8.col-xl-9'); if (!listCol) return; var listContainer = listCol.querySelector('.row.row-30'); if (!listContainer) return; listContainer.innerHTML = '

Loading products...

'; fetch(url).then(function(res) { return res.json(); }).then(function(result) { var products = result.data || []; var meta = result.meta || {}; var pagination = meta.pagination || {}; var pageCount = pagination.pageCount || 1; var page = pagination.page || 1; // Render products var html = ''; if (products.length === 0) { html = '

No products found.

'; } else { products.forEach(function(product, index) { var imgUrl = '/images/product-big-1-328x330.jpg'; if (product.image && product.image.url) { imgUrl = product.image.url; if (imgUrl.startsWith('/uploads/')) imgUrl = siteUrl + '/api/media/' + imgUrl.replace('/uploads/', ''); } var catName = product.category ? product.category.name : ''; var desc = product.description ? product.description.substring(0, 150) + '...' : ''; html += '

' + '

' + ' ' + product.title + '

' + '

' + product.title + '

' + (catName ? '

' + catName + '

' : '') + '

' + desc + '

' + 'Read More' + '

'; }); } listContainer.innerHTML = html; // Render pagination var pagWrap = listCol.querySelector('.pagination-wrap'); if (pagWrap) { if (pageCount <= 1) { pagWrap.innerHTML = ''; } else { var pagHtml = ''; pagWrap.innerHTML = pagHtml; } } // Re-init WOW for new elements if (window.WOW) { try { new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true }).init(); } catch(e) {} } window.scrollTo({ top: 0, behavior: 'smooth' }); }).catch(function(err) { console.error('Failed to fetch products:', err); if (listContainer) listContainer.innerHTML = '

Failed to load products.

'; }); } // Category filter section.addEventListener('change', function(e) { if (e.target.matches('input[type="radio"][data-category]')) { var cat = e.target.getAttribute('data-category') || ''; fetchAndRender(cat, 1); } }); // Pagination section.addEventListener('click', function(e) { var link = e.target.closest('.pagination a[data-page]'); if (!link) return; e.preventDefault(); var page = parseInt(link.getAttribute('data-page')); if (page && page > 0) fetchAndRender(currentCategory, page); }); })(); // ========== 10. Blog list: pagination ========== (function initArticlesList() { var section = document.querySelector('[data-articles-list]'); if (!section) return; var apiBase = siteUrl + '/api/strapi'; var currentPage = 1; function fetchAndRender(page) { currentPage = page; var url = apiBase + '/articles?populate=*&sort=createdAt:desc&pagination[pageSize]=6&pagination[page]=' + page; var listContainer = section.querySelector('.row.row-50.row-md-60.row-lg-80'); if (!listContainer) return; listContainer.innerHTML = '

Loading articles...

'; fetch(url).then(function(res) { return res.json(); }).then(function(result) { var articles = result.data || []; var pagination = (result.meta || {}).pagination || {}; var pageCount = pagination.pageCount || 1; var p = pagination.page || 1; var html = ''; if (articles.length === 0) { html = '

No articles found.

'; } else { articles.forEach(function(article, index) { var imgUrl = '/images/post-7-800x394.jpg'; if (article.cover && article.cover.url) { imgUrl = article.cover.url; if (imgUrl.startsWith('/uploads/')) imgUrl = siteUrl + '/api/media/' + imgUrl.replace('/uploads/', ''); } var catName = article.category ? article.category.name : 'News'; var dateStr = new Date(article.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }); var desc = article.description || article.excerpt || ''; html += '

' + '

' + catName + '

' + '

' + dateStr + '

' + '

' + article.title + '

' + '

' + desc + '

' + 'Read more' + '

'; }); } listContainer.innerHTML = html; // Render pagination var pagWrap = section.querySelector('.pagination-wrap'); if (pagWrap) { if (pageCount <= 1) { pagWrap.innerHTML = ''; } else { var pagHtml = ''; pagWrap.innerHTML = pagHtml; } } if (window.WOW) { try { new WOW({ boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true }).init(); } catch(e) {} } window.scrollTo({ top: 0, behavior: 'smooth' }); }).catch(function(err) { console.error('Failed to fetch articles:', err); if (listContainer) listContainer.innerHTML = '

Failed to load articles.

'; }); } section.addEventListener('click', function(e) { var link = e.target.closest('.pagination a[data-page]'); if (!link) return; e.preventDefault(); var page = parseInt(link.getAttribute('data-page')); if (page && page > 0) fetchAndRender(page); }); })(); // ========== 11. ContactForm: basic form submission ========== document.querySelectorAll('form.rd-form').forEach(function(form) { // Use CSS class to show/hide alerts (not inline style, which GTranslate may alter) // Alerts are hidden by default via CSS: .contact-alert[data-alert] { display: none } form.addEventListener('submit', function(e) { e.preventDefault(); // Read values by input id (GTranslate may translate name attributes) var firstName = (form.querySelector('#contact-first-name-home, #contact-first-name-page') || {}).value || ''; var lastName = (form.querySelector('#contact-last-name-home, #contact-last-name-page') || {}).value || ''; var email = (form.querySelector('#contact-email-home, #contact-email-page') || {}).value || ''; var phone = (form.querySelector('#contact-phone-home, #contact-phone-page') || {}).value || ''; var message = (form.querySelector('#contact-message-home, #contact-message-page') || {}).value || ''; // Basic validation if (!firstName || !lastName || !email) { var errAlert = form.querySelector('[data-alert="error"]'); if (errAlert) errAlert.classList.add('contact-alert-visible'); setTimeout(function() { if (errAlert) errAlert.classList.remove('contact-alert-visible'); }, 5000); return; } var submitBtn = form.querySelector('button[type="submit"]'); if (submitBtn) submitBtn.disabled = true; var contactUrl = siteUrl + '/api/contact'; fetch(contactUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ data: { firstName: firstName, lastName: lastName, email: email, phone: phone, message: message } }) }).then(function(res) { if (submitBtn) submitBtn.disabled = false; if (res.ok) { form.reset(); var alert = form.querySelector('[data-alert="success"]'); if (alert) alert.classList.add('contact-alert-visible'); setTimeout(function() { if (alert) alert.classList.remove('contact-alert-visible'); }, 5000); } else { var alert = form.querySelector('[data-alert="error"]'); if (alert) alert.classList.add('contact-alert-visible'); setTimeout(function() { if (alert) alert.classList.remove('contact-alert-visible'); }, 5000); } }).catch(function() { if (submitBtn) submitBtn.disabled = false; var alert = form.querySelector('[data-alert="error"]'); if (alert) alert.classList.add('contact-alert-visible'); setTimeout(function() { if (alert) alert.classList.remove('contact-alert-visible'); }, 5000); }); }); }); // ========== 12. Mark page ready ========== setTimeout(markReady, 2000); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initGTranslatePage); } else { initGTranslatePage(); } } })();

Contact Us

Get in touch

Phones

WhatsApp

E-mails