/** Shopify CDN: Minification failed Line 16:9 Expected identifier but found "addEventListener(" Line 23:6 Comments in CSS use "/* ... */" instead of "//" Line 43:12 Comments in CSS use "/* ... */" instead of "//" Line 67:23 Comments in CSS use "/* ... */" instead of "//" Line 69:2 Comments in CSS use "/* ... */" instead of "//" Line 79:2 Comments in CSS use "/* ... */" instead of "//" Line 82:2 Comments in CSS use "/* ... */" instead of "//" Line 84:8 Expected ":" Line 87:9 Unexpected "fadeInElement(" Line 88:7 Expected ":" ... and 110 more hidden warnings **/ document.addEventListener("DOMContentLoaded", function () { document .querySelectorAll(".collections-grid p.collections-grid__desc") .forEach((p) => (p.textContent = "Explore ->")); function addIconsForMobile() { if (window.innerWidth <= 1024) { // Adjust breakpoint as needed const icons = { Categories: "icon-sound-waves", "Blowout Sale": "icon-lightning-bolt-1", "Exclusive Brands": "icon-wave-2", Brands: "icon-devices", Services: "icon-settings", "Trade In": "icon-delivery", Blogs: "icon-book", "Track Order": "icon-directions", "About Us": "icon-speaker", Support: "icon-card-holder" }; document .querySelectorAll(".menu-drawer__menu.list-menu li") .forEach((li) => { const text = li.textContent.trim(); const aTag = li.querySelector("a"); if (icons[text] && aTag && !aTag.querySelector(".icon.icon-pack")) { // Prevent duplicate icons const icon = document.createElement("i"); icon.classList.add("icon", "icon-pack", icons[text]); icon.style.marginRight = "8px"; icon.style.fontSize = "20px"; aTag.prepend(icon); } }); document .querySelectorAll(".menu-drawer__menu.list-menu details summary") .forEach((summary) => { const text = summary.textContent.trim(); if (icons[text] && !summary.querySelector(".icon.icon-pack")) { const icon = document.createElement("i"); icon.classList.add("icon", "icon-pack", icons[text]); icon.style.marginRight = "8px"; icon.style.fontSize = "20px"; summary.prepend(icon); } }); } } addIconsForMobile(); // Run on page load // Re-check when window resizes (optional) window.addEventListener("resize", function () { document .querySelectorAll(".menu-drawer__menu.list-menu li .icon.icon-pack") .forEach((icon) => icon.remove()); addIconsForMobile(); }); }); function isElementVisible() { // Get the element const htmlElement = document.documentElement; // Check if the opacity of the element is 1 const style = window.getComputedStyle(htmlElement); return style.opacity === "1"; } function fadeInElement(elementId, timer = 0) { const element = document.querySelector(elementId); if (!element) return; element.style.opacity = 0; element.style.transform = "translateY(20px)"; element.style.transition = "opacity 1.2s cubic-bezier(.39,.575,.565,1.000), transform 1.2s cubic-bezier(.39,.575,.565,1.000)"; const observer = new IntersectionObserver( (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { setTimeout(() => { requestAnimationFrame(() => { element.style.opacity = 1; element.style.transform = "translateY(0)"; }); }, timer); observer.unobserve(document.querySelector(elementId)); } }); }, { threshold: 0.05 } ); observer.observe(element); } function fadeInLeftElement( elementId, timer = 0, visibleThreshold = 0.001, transform = 0.6 ) { const element = document.querySelector(elementId); if (!element) return; element.style.opacity = 0; element.style.transform = "translateX(-20px)"; element.style.transition = "opacity 0.6s cubic-bezier(.39,.575,.565,1.000), transform " + transform + "s cubic-bezier(.39,.575,.565,1.000)"; const observer = new IntersectionObserver( (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { setTimeout(() => { requestAnimationFrame(() => { element.style.opacity = 1; element.style.transform = "translateX(0)"; }); }, timer); observer.unobserve(document.querySelector(elementId)); } }); }, { threshold: visibleThreshold } ); observer.observe(element); } function zoomOutElement(elementId, timer = 0) { const element = document.querySelector(elementId); if (!element) return; element.style.opacity = 0; element.style.transform = "scale(1.5)"; element.style.transition = "opacity 0.4s cubic-bezier(.25,.46,.45,.94), transform 0.4s cubic-bezier(.25,.46,.45,.94)"; const observer = new IntersectionObserver( (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { setTimeout(() => { requestAnimationFrame(() => { element.style.opacity = 1; element.style.transform = "scale(1)"; }); }, timer); observer.unobserve(element); } }); }, { threshold: 0.3 } ); observer.observe(element); } function zoomInForward(elementId, timer = 0) { const element = document.querySelector(elementId); if (!element) return; element.style.opacity = 0; element.style.transform = "scale(0.5)"; element.style.transition = "opacity 0.4s cubic-bezier(.25,.46,.45,.94), transform 0.4s cubic-bezier(.25,.46,.45,.94)"; const observer = new IntersectionObserver( (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { setTimeout(() => { requestAnimationFrame(() => { element.style.opacity = 1; element.style.transform = "scale(1)"; }); }, timer); observer.unobserve(element); } }); }, { threshold: 0.3 } ); observer.observe(element); } function animateSingleWithTimer(selector, timer = 500) { const titleElement = document.querySelector(selector); if (titleElement) { // Set initial styles titleElement.style.opacity = "0"; titleElement.style.transform = "translateY(40px)"; titleElement.style.transition = "opacity 0.6s ease-out, transform 0.5s ease-out"; // Intersection Observer to detect when element is in view const observer = new IntersectionObserver( (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { observer.unobserve(titleElement); setTimeout(() => { titleElement.style.opacity = "1"; titleElement.style.transform = "translateY(0)"; }, timer); } }); }, { threshold: 0.2 } // Trigger when 20% of the element is visible ); observer.observe(titleElement); } } function animateListItems(selector, timer = 500, threshold = 0.1) { const items = document.querySelectorAll(selector + " li"); function animateItem(index) { if (index >= items.length) { return; // Stop when all items are animated } const item = items[index]; item.style.transition = "transform 0.5s ease, opacity 0.5s ease"; item.style.transform = "translateY(0)"; item.style.opacity = "1"; // Wait for the animation to complete before animating the next item setTimeout(() => animateItem(index + 1), 50); } const observer = new IntersectionObserver( (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { setTimeout(() => { animateItem(0); // Start animation from the first item }, timer); observer.unobserve(document.querySelector(selector)); } }); }, { threshold: threshold } // Trigger when 20% of the element is visible ); observer.observe(document.querySelector(selector)); } function animateFadeBottomToTop( selector, secondarySelector, initialDelay = 0, thirdSelector, forthSelector ) { const titleElement = document.querySelector(selector); if (titleElement) { // Set initial styles titleElement.style.opacity = "0"; titleElement.style.transform = "translateY(40px)"; // Intersection Observer to detect when element is in view const observer = new IntersectionObserver( (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { observer.unobserve(titleElement); setTimeout(() => { titleElement.style.transition = "opacity 0.3s ease-out, transform 0.4s ease-out"; titleElement.style.transform = "translateY(0)"; titleElement.style.opacity = "1"; }, initialDelay); if (secondarySelector !== undefined) { setTimeout(() => { animateFadeBottomToTop(secondarySelector, undefined); }, 300); } if (thirdSelector !== undefined) { setTimeout(() => { animateFadeBottomToTop(thirdSelector, undefined); }, 450); } if (forthSelector !== undefined) { setTimeout(() => { const forthSelectorElement = document.querySelector(forthSelector); forthSelectorElement.style.transition = "opacity 0.6s ease-out, transform 0.5s ease-out"; forthSelectorElement.style.transform = "translateY(0)"; forthSelectorElement.style.opacity = "1"; //animateFadeBottomToTop(forthSelector, undefined); }, 650); } } }); }, { threshold: 0.1 } // Trigger when 10% of the element is visible ); observer.observe(titleElement); } else { console.log( "Element: " + titleElement + " not found . Hence Animations are not triggered." ); } } function animateCategoryList() { setTimeout(() => { animateFadeBottomToTop( ".section-template--19193979142361__42cdc506-03cc-4d93-b523-ad8cabbb1aec-padding .titles--left", ".section-template--19193979142361__42cdc506-03cc-4d93-b523-ad8cabbb1aec-padding .description--left" ); if (window.innerWidth > 1024) { animateListItems(".collections-list"); } else { animateListItems(".collections-list", 500, 0.001); } }, 200); } function applyAnimation() { //header animation const headerElement = document.querySelector(".shopify-section-header"); const slideshowSection = document.querySelector( ".shopify-section.section-slideshow" ); if (headerElement) { if (slideshowSection) { headerElement.style.animation = "slideIn 0.5s ease-out"; } headerElement.style.opacity = "1"; } //Main slideshow animation if (slideshowSection) { // Set initial styles slideshowSection.style.opacity = "0"; slideshowSection.style.transform = "translateY(50px)"; slideshowSection.style.transition = "opacity 0.6s ease-out, transform 0.6s ease-out"; // Trigger animation after a short delay setTimeout(() => { slideshowSection.style.opacity = "1"; slideshowSection.style.transform = "translateY(0)"; animateCategoryList(); }, 500); // Small delay for smooth animation } //Featured Brands fadeInLeftElement( "#shopify-section-template--19193979142361__5c94bd84-824f-4368-a89e-e1a1cdccf6d3", 0, 0.7, 1.3 ); animateFadeBottomToTop( ".background.section-template--19193979142361__1f309bc4-1a66-455b-90cb-63c739d1df21-padding.multirow--solid .multirow__subtitle", ".background.section-template--19193979142361__1f309bc4-1a66-455b-90cb-63c739d1df21-padding.multirow--solid .multirow-list__wrapper" ); //Exciting New Arrivals /*animateFadeBottomToTop( ".section-template--19193979142361__9b376f88-6df0-4ceb-ac6f-790180cdfe62-padding .popular-products__titles", ".section-template--19193979142361__9b376f88-6df0-4ceb-ac6f-790180cdfe62-padding .popular-products__description" );*/ animateFadeBottomToTop( ".section-template--19193979142361__9b376f88-6df0-4ceb-ac6f-790180cdfe62-padding .popular-products__titles", ".section-template--19193979142361__9b376f88-6df0-4ceb-ac6f-790180cdfe62-padding .popular-products__description", 0, undefined, ".section-template--19193979142361__9b376f88-6df0-4ceb-ac6f-790180cdfe62-padding .popular-products__button" ); animateListItems( ".section-template--19193979142361__9b376f88-6df0-4ceb-ac6f-790180cdfe62-padding .popular-products__wrapper" ); /*animateSingleWithTimer( ".section-template--19193979142361__9b376f88-6df0-4ceb-ac6f-790180cdfe62-padding .popular-products__button", 800 );*/ animateSingleWithTimer("#Hero-template--19193979142361__hero", 200); //Grab Your Deal animateFadeBottomToTop( "#shopify-section-template--19193979142361__popular_products_Rx4QGm .popular-products__title", "#shopify-section-template--19193979142361__popular_products_Rx4QGm .popular-products__description", 0, "#shopify-section-template--19193979142361__popular_products_Rx4QGm .popular-products__button", "#shopify-section-template--19193979142361__popular_products_Rx4QGm .popular-products-slider" ); //fadeInElement("#shopify-section-template--19193979142361__popular_products_Rx4QGm"); //Latest Articles animateFadeBottomToTop( ".section-template--19193979142361__featured_blog_mY3frH-padding .blog__subtitle", ".section-template--19193979142361__featured_blog_mY3frH-padding .blog__title", 0, ".section-template--19193979142361__featured_blog_mY3frH-padding .blog__description", ".section-template--19193979142361__featured_blog_mY3frH-padding .blog__button" ); fadeInLeftElement( ".section-template--19193979142361__featured_blog_mY3frH-padding .blog__slider", 500 ); animateFadeBottomToTop( ".section-template--19193979142361__ec8eb8a5-0272-4472-a5f6-cbe0ad1f37a3-padding .compare__subtitle", ".section-template--19193979142361__ec8eb8a5-0272-4472-a5f6-cbe0ad1f37a3-padding .compare__title", 0, ".section-template--19193979142361__ec8eb8a5-0272-4472-a5f6-cbe0ad1f37a3-padding .compare__description", ".section-template--19193979142361__ec8eb8a5-0272-4472-a5f6-cbe0ad1f37a3-padding .compare__content" ); animateFadeBottomToTop( ".section-template--19193979142361__fcdccba2-3798-4f1f-9704-3387ec1b3ca2-padding .multicolumn__subtitle", ".section-template--19193979142361__fcdccba2-3798-4f1f-9704-3387ec1b3ca2-padding .h2.multicolumn__title", 0, ".section-template--19193979142361__fcdccba2-3798-4f1f-9704-3387ec1b3ca2-padding .multicolumn__description", ".section-template--19193979142361__fcdccba2-3798-4f1f-9704-3387ec1b3ca2-padding .button--primary" ); fadeInLeftElement( ".section-template--19193979142361__fcdccba2-3798-4f1f-9704-3387ec1b3ca2-padding .multicolumn-list__wrapper", 500 ); //sustainability animateFadeBottomToTop( "#shopify-section-template--19193979142361__image_banner_E4A76e", undefined, 0 ); /*zoomInForward( "#shopify-section-template--19193979142361__image_banner_E4A76e", 0 );*/ animateFadeBottomToTop( "#shopify-section-template--19193979142361__testimonials", undefined, 0 ); //zoomOutElement("#shopify-section-template--19193979142361__testimonials", 0); } document.addEventListener("DOMContentLoaded", function () { let animationApplied = false; // Add a flag to track if animation is applied const observer = new MutationObserver(function (mutationsList) { for (const mutation of mutationsList) { if ( mutation.type === "attributes" && mutation.attributeName === "style" ) { if (isElementVisible() && !animationApplied) { applyAnimation(); animationApplied = true; // Set the flag to true after applying animation } } } }); observer.observe(document.documentElement, { attributes: true }); }); //whatsapp button (function (w, d, s, u) { w.gbwawc = { url: u, options: { waId: "919492940111", siteName: "SH Digital Media", siteTag: "Usually reply in 5 minutes", siteLogo: "https://files.gallabox.com/67c5c5dd0733b303a55bb51f/f43d2feb-0402-4db4-ab85-659448816f8c-images.jpeg", widgetPosition: "RIGHT", welcomeMessage: "Experience refined living with immersive home theatres and world-class AV systems seamlessly designed for your space. How would you like to proceed?", brandColor: "#25D366", messageText: "I'm looking for", replyOptions: [ "Speak with Our Team", "Explore AV Products", "Visit Experience Center", ], version: "v1", widgetPositionMarginX: 12, widgetPositionMarginY: 12, }, }; var h = d.getElementsByTagName(s)[0], j = d.createElement(s); j.async = true; j.src = u + "/whatsapp-widget.min.js?_=" + "2025-07-22 21"; h.parentNode.insertBefore(j, h); })(window, document, "script", "https://waw.gallabox.com"); document.addEventListener('DOMContentLoaded', () => { const textItems = document.querySelectorAll('.scroll-text-item'); // This function will be called whenever an observed element intersects with the viewport const observerCallback = (entries, observer) => { entries.forEach(entry => { // isIntersecting is true when the element is in the viewport if (entry.isIntersecting) { // Add the 'active' class to make it bold and fully opaque entry.target.classList.add('active'); } else { // Remove the 'active' class when it leaves the viewport entry.target.classList.remove('active'); } }); }; const observerOptions = { root: null, rootMargin: '-10% 0px -30% 0px', threshold: 0 }; // Create a new Intersection Observer const observer = new IntersectionObserver(observerCallback, observerOptions); // Tell the observer to watch each of our text items textItems.forEach(item => { observer.observe(item); }); // --- New Observer for the last text item to unstick the video --- const lastTextItem = textItems[textItems.length - 1]; const stickyVideoParent = document.querySelector('.sticky-video-parent'); if (lastTextItem && stickyVideoParent) { const unstickCallback = (entries, unstickObserver) => { entries.forEach(entry => { if (entry.isIntersecting) { stickyVideoParent.style.position = 'relative'; // We can stop observing now. unstickObserver.unobserve(lastTextItem); } }); }; const unstickOptions = { root: null, rootMargin: '0px 0px -100% 0px', // Triggers when top of element leaves viewport threshold: 0 }; const unstickObserver = new IntersectionObserver(unstickCallback, unstickOptions); unstickObserver.observe(lastTextItem); } }); document.addEventListener("DOMContentLoaded", function () { const modal = document.getElementById("support-modal"); const openBtns = document.querySelectorAll(".open-modal-btn"); const closeBtn = document.querySelector(".close-button"); const nextBtn = document.getElementById("next-btn"); const form = document.getElementById("support-form"); const slides = document.querySelectorAll(".form-slide"); const progressBar = document.getElementById("progress-bar"); const navigationButtons = document.querySelector(".navigation-buttons"); const modalContent = document.querySelector(".modal-content"); const enquiryPackageInput = document.getElementById("enquiry-package"); let currentSlide = 0; const totalSlides = slides.length; const countryList = [ { name: "India", code: "IN", dial: "91", length: 10, flag: "🇮🇳" }, { name: "United States", code: "US", dial: "1", length: 10, flag: "🇺🇸" }, { name: "United Kingdom", code: "GB", dial: "44", length: 10, flag: "🇬🇧" }, { name: "Australia", code: "AU", dial: "61", length: 9, flag: "🇦🇺" }, { name: "Canada", code: "CA", dial: "1", length: 10, flag: "🇨🇦" }, { name: "Germany", code: "DE", dial: "49", length: 11, flag: "🇩🇪" }, { name: "France", code: "FR", dial: "33", length: 9, flag: "🇫🇷" }, { name: "Japan", code: "JP", dial: "81", length: 10, flag: "🇯🇵" }, { name: "China", code: "CN", dial: "86", length: 11, flag: "🇨🇳" }, { name: "Brazil", code: "BR", dial: "55", length: 11, flag: "🇧🇷" }, { name: "South Africa", code: "ZA", dial: "27", length: 9, flag: "🇿🇦" }, { name: "Russia", code: "RU", dial: "7", length: 10, flag: "🇷🇺" }, { name: "Italy", code: "IT", dial: "39", length: 10, flag: "🇮🇹" }, { name: "Spain", code: "ES", dial: "34", length: 9, flag: "🇪🇸" }, { name: "Mexico", code: "MX", dial: "52", length: 10, flag: "🇲🇽" }, { name: "Turkey", code: "TR", dial: "90", length: 10, flag: "🇹🇷" }, { name: "Saudi Arabia", code: "SA", dial: "966", length: 9, flag: "🇸🇦" }, { name: "Singapore", code: "SG", dial: "65", length: 8, flag: "🇸🇬" }, { name: "UAE", code: "AE", dial: "971", length: 9, flag: "🇦🇪" }, ]; const countryCodeSelect = document.getElementById("country-code"); if (countryCodeSelect) { countryList.forEach((country) => { const option = document.createElement("option"); option.value = country.code; option.setAttribute("data-code", country.dial); option.setAttribute("data-length", country.length); option.title = `${country.name} (+${country.dial})`; option.textContent = country.flag; if (country.code === "IN") option.selected = true; countryCodeSelect.appendChild(option); }); } const phoneInput = document.getElementById("phone"); function updatePhoneInput() { if (countryCodeSelect && phoneInput) { const selected = countryCodeSelect.options[countryCodeSelect.selectedIndex]; const length = selected.getAttribute("data-length"); phoneInput.maxLength = length; phoneInput.placeholder = "Enter " + length + "-digit number"; } } if (countryCodeSelect && phoneInput) { countryCodeSelect.addEventListener("change", updatePhoneInput); updatePhoneInput(); } function updateProgressBar() { if (progressBar) { const progress = ((currentSlide + 1) / totalSlides) * 100; progressBar.style.width = progress + "%"; } } function showSlide(index) { slides.forEach((slide, i) => { slide.classList.remove("active"); if (i === index) { slide.classList.add("active"); } }); if (navigationButtons) { slides[index].appendChild(navigationButtons); } updateProgressBar(); if (currentSlide === totalSlides - 1) { nextBtn.textContent = "Submit"; } else { nextBtn.textContent = "Next"; } } openBtns.forEach((btn) => { btn.onclick = function () { const packageName = btn.getAttribute("data-package"); if (enquiryPackageInput) { enquiryPackageInput.value = packageName; } if (modal) { modal.style.display = "block"; } if (countryCodeSelect) { countryCodeSelect.value = "IN"; } currentSlide = 0; showSlide(currentSlide); }; }); function closeAndResetModal() { if (modal) { modal.style.display = "none"; } const thankYouMessage = document.getElementById("thank-you-message"); if (thankYouMessage) { thankYouMessage.remove(); } if (form) { form.style.display = "block"; form.reset(); } currentSlide = 0; if (slides.length > 0) { showSlide(currentSlide); } } if (closeBtn) { closeBtn.onclick = closeAndResetModal; } window.onclick = function (event) { if (event.target == modal) { closeAndResetModal(); } }; if (nextBtn) { nextBtn.addEventListener("click", function () { const currentSlideElement = slides[currentSlide]; const input = currentSlideElement.querySelector("input, textarea"); const phoneError = document.getElementById("phone-error"); const emailError = document.getElementById("email-error"); if (phoneError) { phoneError.style.display = "none"; } if (emailError) { emailError.style.display = "none"; } if (currentSlide === 1) { // Phone number validation if (countryCodeSelect && phoneInput) { const selected = countryCodeSelect.options[countryCodeSelect.selectedIndex]; const length = selected.getAttribute("data-length"); const regex = new RegExp("^\\d{" + length + "}$"); if (!regex.test(phoneInput.value)) { if (phoneError) phoneError.style.display = "block"; return; } } } else if (currentSlide === 2) { // Email validation const emailInput = document.getElementById("email"); if (emailInput) { const emailValue = emailInput.value.toLowerCase().trim(); const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; if (!emailPattern.test(emailValue)) { if (emailError) emailError.style.display = "block"; return; } } } else if (input && input.required && !input.value.trim()) { alert("This field is required."); return; } if (currentSlide < totalSlides - 1) { currentSlide++; showSlide(currentSlide); } else { if (form) { const formData = new FormData(form); fetch(form.action, { method: "POST", body: formData, }).catch((err) => console.error(err)); if (modalContent) { form.style.display = "none"; const thankYouMessage = document.createElement("div"); thankYouMessage.id = "thank-you-message"; thankYouMessage.innerHTML = "

Thank you!

THANKYOU FOR YOUR ENQUIRY. WE WILL GET BACK TO YOU SOON.

"; modalContent.appendChild(thankYouMessage); } } } }); } // Initialize if (slides.length > 0) { showSlide(currentSlide); } });