// search placeholder window.addEventListener("DOMContentLoaded", () => { let searchInputBoxSelector = document.querySelectorAll(".st-search-bar .st-search-bar-inner #st-search-box, .st-search-box input[name='st']"); searchInputBoxSelector.forEach((searchInputBox) => { if (searchInputBox) { searchInputBox.setAttribute("placeholder", ""); const placeHolderPhrases = [ "Search For Hair Care ", "Search For Sunscreens", "Search For Acne Management", "Search For Pigmentation", "Search For Lip Care" ]; let index = 0; let typingTimer; const updatePlaceHolder = function () { const phrase = placeHolderPhrases[index]; const length = phrase.length; let queryIndex = 0; typingTimer = setInterval(function () { if (queryIndex === length) { setTimeout(erasePlaceHolder, 1000); clearInterval(typingTimer); } else { const currentPlaceholderValue = searchInputBox.getAttribute("placeholder"); searchInputBox.setAttribute( "placeholder", currentPlaceholderValue + phrase.charAt(queryIndex) ); queryIndex++; } }, 100); }; const erasePlaceHolder = function () { const currentPlaceholderValue = searchInputBox.getAttribute("placeholder"); const length = currentPlaceholderValue.length; let queryIndex = length - 1; typingTimer = setInterval(function () { if (queryIndex === -1) { clearInterval(typingTimer); index++; if (index === placeHolderPhrases.length) { index = 0; } setTimeout(updatePlaceHolder, 1000); } else { const newPlaceholderValue = currentPlaceholderValue.slice( 0, queryIndex ); searchInputBox.setAttribute("placeholder", newPlaceholderValue); queryIndex--; } }, 50); }; updatePlaceHolder(); } }); }); //No search suggestion js document.addEventListener('DOMContentLoaded', () => { document.addEventListener('stSearchResultsEvent', (event) => { if ( event.detail.source === "autoCompleteTrendingSearchPage" && event.detail.type === "searchSuggestion" ) { const suggestionsPanel = document.querySelector('#st-autocomplete-container #st-after-search .st-row .st-left-panel'); const suggestionsPanelBottom = document.querySelector('#st-autocomplete-container #st-after-search .st-autocomplete-footer .st-row .st-left-panel'); const autocompleteContent = document.querySelector('#st-autocomplete-container #st-after-search .st-autocomplete-content'); const autocompleteFooter = document.querySelector('#st-autocomplete-container #st-after-search .st-autocomplete-footer'); if (suggestionsPanel && autocompleteContent) { if (event.detail.data.length === 0) { suggestionsPanel.style.display = 'none'; suggestionsPanelBottom.style.display = 'none'; autocompleteContent.classList.add('st-search-suggestions-hide'); autocompleteFooter.classList.add('st-search-suggestions-hide'); } else { suggestionsPanel.style.display = 'block'; suggestionsPanelBottom.style.display = 'block'; autocompleteContent.classList.remove('st-search-suggestions-hide'); autocompleteFooter.classList.remove('st-search-suggestions-hide'); } } } }); }); //Filter outside click document.addEventListener("DOMContentLoaded", () => { document.addEventListener('click', function (event) { const sidebar = document.querySelector('#st-filter-sidebar'); const closeBtn = document.querySelector('.st-btn.st-close-btn'); const filterbtn = document.querySelector('.st-filter-btn'); const isFilterOpen = document.body.classList.contains('st-filter-popup-is-open'); if (isFilterOpen && sidebar && closeBtn) { if (!sidebar.contains(event.target) && !filterbtn.contains(event.target)) { if (!closeBtn.contains(event.target)) { closeBtn.click(); } } } }); }); // Desktop filters (function () { // ========================= // CONFIG // ========================= const slideFrom = 'left'; // 'right' or 'left' const applyButtonLabel = 'Apply'; const desktopMinWidth = 820; // ========================= // 0. Inject CSS immediately // ========================= const style = document.createElement('style'); style.innerHTML = ` @media only screen and (min-width: 820px){ /* Skeleton overrides */ #st-loading-skeleton .st-column-25 { display: none; } #st-loading-skeleton .st-column-75 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } /* KEEP COLUMN BUT REMOVE WIDTH IMPACT */ .st-column-20.st-filter-animation { width:0 !important; flex:0 0 0 !important; overflow:visible !important; } .st-column-20.st-filter-animation+.st-column-80 { width:100% !important; flex:0 0 100% !important; max-width:100% !important; } /* SIDEBAR DRAWER */ #st-filter-sidebar { position: fixed !important; top: 0; ${slideFrom}: 0; height:100vh !important; width:36rem !important; ${slideFrom === 'right' ? 'left: unset !important;' : 'right: unset !important;'} background:#fff !important; z-index:9999 !important; transform: translate${slideFrom === 'right' ? 'X(100%)' : 'X(-100%)'}; transition: transform 0.35s ease; overflow-y:auto; padding:0 15px !important; box-shadow: ${slideFrom === 'right' ? '-4px 0 20px rgba(0,0,0,0.2)' : '4px 0 20px rgba(0,0,0,0.2)'}; } #st-filter-sidebar.open { transform: translateX(0); } /* OVERLAY */ #filter-overlay { display: block; position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:9998; opacity:0; visibility:hidden; transition:0.3s; } #filter-overlay.active { opacity:1; visibility:visible; } /* FILTER BUTTON */ #custom-filter-btn { margin-left:10px; padding:8px 14px; border:1px solid #ccc; background:#fff; color:#000; cursor:pointer; font-size:12px; line-height:1; min-height:fit-content; max-height:fit-content; float:right; } /* CLOSE BUTTON */ #filter-close-btn {position: absolute; top: 18px; right: 32px; font-size: 15px; border: 1px solid #000; cursor: pointer; font-weight: 600; padding: 15px; border-radius: 50%; line-height: 1; transition: transform var(--animation-primary); height: 45px; width: 45px; text-align: center; } /* APPLY BUTTON */ #filter-apply-btn { position: absolute; bottom: 24px; width: 84%; padding: 12px; background: #000; color: #fff; border: none; margin-top: 20px; z-index: 2; margin: 0 3rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; line-height: 1; font-weight: var(--font-medium); font-family: var(--font-navigation-family); font-size: var(--font-button-size); border-radius: var(--buttons-radius); box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) rgb(var(--color-shadow) / var(--shadow-opacity)); text-transform: uppercase; } `; document.head.appendChild(style); // ========================= // 1. Init function // ========================= function init() { if (window.innerWidth < desktopMinWidth) return; // desktop only const sidebar = document.querySelector('#st-filter-sidebar'); const sortContainer = document.querySelector('#st-sort'); if (!sidebar || !sortContainer) return; // FILTER BUTTON const btn = document.createElement('button'); btn.id = 'custom-filter-btn'; btn.innerText = 'Show Filters'; sortContainer.parentNode.appendChild(btn); // OVERLAY const overlay = document.createElement('div'); overlay.id = 'filter-overlay'; document.body.appendChild(overlay); // CLOSE BUTTON const closeBtn = document.createElement('div'); closeBtn.id = 'filter-close-btn'; closeBtn.innerHTML = '✕'; sidebar.appendChild(closeBtn); // APPLY BUTTON const applyBtn = document.createElement('button'); applyBtn.id = 'filter-apply-btn'; applyBtn.innerText = applyButtonLabel; sidebar.appendChild(applyBtn); // ========================= // EVENTS // ========================= function openDrawer() { sidebar.classList.add('open'); overlay.classList.add('active'); document.body.style.overflow = 'hidden'; } function closeDrawer() { sidebar.classList.remove('open'); overlay.classList.remove('active'); document.body.style.overflow = ''; } btn.addEventListener('click', openDrawer); overlay.addEventListener('click', closeDrawer); closeBtn.addEventListener('click', closeDrawer); applyBtn.addEventListener('click', closeDrawer); } // ========================= // 2. Wait for sidebar in DOM // ========================= const observer = new MutationObserver(() => { if (document.querySelector('#st-filter-sidebar')) { init(); observer.disconnect(); } }); observer.observe(document.body, { childList: true, subtree: true }); })(); // Move search container // document.addEventListener("DOMContentLoaded", () => { // setTimeout(() => { // const mainContent = document.querySelector('#MainContent'); // const searchContainer = document.querySelector("#st-search-container"); // if (mainContent && searchContainer) { // mainContent.prepend(searchContainer); // } // }, 100); // }); // image slider document.addEventListener("DOMContentLoaded", () => { document.addEventListener("stSearchResultsEvent", (event) => { event.detail.data.forEach(product => { setTimeout(() => { const productCards = document.querySelectorAll( `[data-st-product-id="${product.id}"]` ); if (!productCards.length) return; productCards.forEach(productCard => { const imageContainer = productCard.querySelector('.st-image-container'); if (!imageContainer) return; if (imageContainer.querySelector('.custom-slider')) return; const wrapper = imageContainer.querySelector('.st-image-wrapper'); if (!wrapper) return; wrapper.style.position = "relative"; wrapper.style.overflow = "hidden"; // ✅ Feature 1: Limit to max 3 images const images = (product.images || []).filter(img => img?.src).slice(0, 3); if (images.length <= 1) return; const slider = document.createElement('div'); slider.className = 'custom-slider'; slider.innerHTML = `

${images.map((img, i) => `

`).join('')}

${images.map((_, i) => ` `).join('')}

`; wrapper.innerHTML = ''; wrapper.appendChild(slider); const track = slider.querySelector('.slider-track'); const dots = slider.querySelectorAll('.dot'); let currentIndex = 0; let activeAnimation = null; // track running animation frame // 👉 Custom scroll animator — gives us speed control unlike behavior:'smooth' function animateScroll(targetLeft, duration) { if (activeAnimation) cancelAnimationFrame(activeAnimation); const startLeft = track.scrollLeft; const distance = targetLeft - startLeft; const startTime = performance.now(); function step(now) { const elapsed = now - startTime; const progress = Math.min(elapsed / duration, 1); // ease-in-out cubic const ease = progress < 0.5 ? 4 * progress * progress * progress : 1 - Math.pow(-2 * progress + 2, 3) / 2; track.scrollLeft = startLeft + distance * ease; if (progress < 1) { activeAnimation = requestAnimationFrame(step); } else { activeAnimation = null; } } activeAnimation = requestAnimationFrame(step); } // 👉 Detect active slide on scroll track.addEventListener('scroll', () => { const slideWidth = track.clientWidth; const index = Math.round(track.scrollLeft / slideWidth); if (index !== currentIndex) { currentIndex = index; dots.forEach(dot => dot.classList.remove('active')); if (dots[currentIndex]) { dots[currentIndex].classList.add('active'); } } }); // 👉 Click dots dots.forEach(dot => { dot.addEventListener('click', (e) => { const index = Number(e.target.dataset.index); const slideWidth = track.clientWidth; animateScroll(index * slideWidth, 300); // relaxed 300ms for intentional click }); }); // ✅ Feature 2: Hover zones — divide wrapper into N equal parts, // each zone scrolls to its corresponding image on mouseenter. // Zones are built dynamically based on actual image count (max 3). const zoneCount = images.length; // 2 or 3 const hoverZoneContainer = document.createElement('div'); hoverZoneContainer.className = 'slider-hover-zones'; hoverZoneContainer.style.cssText = ` position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; pointer-events: none; z-index: 10; `; for (let i = 0; i < zoneCount; i++) { const zone = document.createElement('div'); zone.className = 'slider-hover-zone'; zone.dataset.zoneIndex = i; zone.style.cssText = ` flex: 1; height: 100%; pointer-events: all; cursor: pointer; `; zone.addEventListener('mouseenter', () => { const slideWidth = track.clientWidth; animateScroll(i * slideWidth, 150); // fast 150ms for hover }); hoverZoneContainer.appendChild(zone); } // ✅ Feature 3: Reset to first image when hover leaves the zone container hoverZoneContainer.addEventListener('mouseleave', () => { currentIndex = 0; animateScroll(0, 150); // fast 150ms reset on mouse leave dots.forEach(dot => dot.classList.remove('active')); if (dots[0]) { dots[0].classList.add('active'); } }); // Append zones inside the slider (on top of slides, below dots) slider.style.position = 'relative'; slider.appendChild(hoverZoneContainer); }); }, 50); }); }); }); // for label classes document.addEventListener('DOMContentLoaded', () => { document.addEventListener('stSearchResultsEvent', (event) => { event.detail.data.forEach(product => { setTimeout(() => { const productCards = document.querySelectorAll( `[data-st-product-id="${product.id}"]` ); if (!productCards.length) return; productCards.forEach(card => { const offerBox = card.querySelector('.st-extra-field-box.product-card-offer-show'); if (!offerBox) return; const offerValueEl = offerBox.querySelector('.st-extra-field-value'); if (!offerValueEl) return; const offerValue = offerValueEl.textContent.trim().toLowerCase(); const classMap = { 'new launch': 'new-launch', 'bestseller': 'bestseller', 'trending': 'trending', }; const classToAdd = classMap[offerValue] ?? 'other'; // Remove any previously added classes to avoid duplicates offerBox.classList.remove('new-launch', 'bestseller', 'trending', 'other'); offerBox.classList.add(classToAdd); }); }, 0); }); }); }); // Rating average and count document.addEventListener('DOMContentLoaded', () => { document.addEventListener('stSearchResultsEvent', (event) => { setTimeout(() => { document.querySelectorAll(".st-rating-summary").forEach(el => { const avg = getComputedStyle(el).getPropertyValue("--rating-average").trim(); const count = getComputedStyle(el).getPropertyValue("--rating-count").trim(); if (avg) el.dataset.ratingAverage = avg; if (count) el.dataset.ratingCount = count; }); }, 0); }); }); // label animation function initTagAnimation() { document.querySelectorAll( ".st-extra-field-box.st-product-card-tags .st-extra-field-value" ).forEach((el) => { if (el.dataset.animated) return; el.dataset.animated = "true"; const items = el.querySelectorAll(".st_values"); // Nothing to animate if (items.length <= 1) return; // 36px for desktop, 32px for tablet/mobile const itemHeight = window.innerWidth > 768 ? 36 : 32; const total = items.length; // Clone the first item for a seamless loop const clone = items[0].cloneNode(true); el.appendChild(clone); let index = 0; setInterval(() => { index++; el.style.transition = "transform 0.4s ease-in-out"; el.style.transform = `translateY(-${index * itemHeight}px)`; // Reached the cloned first item if (index === total) { setTimeout(() => { el.style.transition = "none"; el.style.transform = "translateY(0)"; index = 0; // Force reflow void el.offsetHeight; }, 400); } }, 2100); }); } document.addEventListener("stSearchResultsEvent", () => { setTimeout(initTagAnimation, 100); }); document.addEventListener('DOMContentLoaded', () => { document.addEventListener('stSearchResultsEvent', (event) => { // if (event.detail.source !== "searchResultsPage") return; event.detail.data.forEach((product, index) => { setTimeout(() => { // Use querySelectorAll so we target every instance of this product card // (e.g. one in the suggestions dropdown AND one on the results page simultaneously) const productCards = document.querySelectorAll(`[data-st-product-id="${product.id}"]`); if (!productCards.length) return; const variantCount = Array.isArray(product.variants) ? product.variants.length : (product.variants || 0); if (!variantCount) return; let html = ''; const variant = product.variants?.[0]; const variantId = variant?.id; const priceInCents = Math.round(parseFloat(variant?.price || product.price || 0) * 100); if (variantCount === 1 && variantId) { html = `

`; } else { html = `

View product

`; } // Iterate every matched card (suggestions + results page) // Iterate every matched card (suggestions + results page) productCards.forEach((productCard) => { if (productCard.querySelector('.quick-add')) return; const innerBox = productCard.querySelector(".st-inner-box"); if (!innerBox) return; const placeButton = () => { // if (productCard.querySelector(".quick-add")) return; innerBox.insertAdjacentHTML("beforeend", html); // Prevent clicks inside quick-add from bubbling up to the product card link const quickAdd = innerBox.querySelector(".quick-add"); if (quickAdd) { quickAdd.addEventListener("click", (e) => e.stopPropagation()); } }; placeButton(); // Re-initialize quick-add handlers on dynamically inserted elements initQuickAdd(innerBox); }); }, 100); }); }); }); // Cross icon document.addEventListener('DOMContentLoaded', () => { document.addEventListener('stSearchResultsEvent', (event) => { document.addEventListener('click', (event) => { const crossIcon = event.target.closest('.st-input-close-btn'); if (crossIcon) { const body = document.querySelector("body"); body.classList.remove("st-autocomplete-focused"); // console.log("Sourabh"); const searchBox = body.querySelector(".st-search-box.hidden-mobile"); searchBox.classList.remove('st-open'); searchBox.classList.add('st-close'); } }); }) })

Reach out to us on hello@consciouschemist.com to shoot your queries and requests.