`; const stInnerBox = productCard.querySelector('.st-inner-box'); if (stInnerBox) { stInnerBox.appendChild(quickViewDrawer); } } document.querySelectorAll("quick-view-drawer").forEach(ele => {ele.mainDetailsToggle = ele.querySelector("details"); ele.bindEvents()}); } else { // If product has only one variant, append the st-atc-button inside the image container let atcButton = productCard.querySelector('.st-atc-btn'); if (atcButton) { } } }, 100); // You can adjust the timeout if needed }); } }); function extractSearchQuery(url) { let startIndex = url.indexOf('q='); if (startIndex === -1) { return null; } startIndex += 2; console.log("➡️ adjusted startIndex:", startIndex); let endIndex = url.indexOf('&', startIndex); console.log("🔚 endIndex:", endIndex); let rawQuery; if (endIndex === -1) { rawQuery = url.substring(startIndex); } else { rawQuery = url.substring(startIndex, endIndex); } const decoded = decodeURIComponent(rawQuery); return decoded; } document.addEventListener('stSearchResultsEvent', (event) => { const detail = event.detail; if (!detail) return; if ( detail.source !== "autoCompleteProductPage" || detail.type !== "searchSuggestion" ) { console.log("⛔ Condition not matched"); return; } const query = extractSearchQuery(window.location.href); if (!query) return; const keywords = query.toLowerCase().split(' ').filter(Boolean); setTimeout(() => { const items = document.querySelectorAll('.st-trending-search-text'); items.forEach((el, i) => { console.log(`➡️ Item ${i}:`, el.innerText); let text = el.innerText; let updated = text; keywords.forEach(keyword => { const regex = new RegExp(`(${keyword})`, 'gi'); updated = updated.replace(regex, `$1`); }); el.innerHTML = `${updated}`; }); }, 200); }); (function () { // ========================= // CONFIG // ========================= const slideFrom = 'left'; // 'right' or 'left' const applyButtonLabel = 'Apply Filters'; const desktopMinWidth = 1024; // ========================= // 0. Inject CSS immediately // ========================= const style = document.createElement('style'); style.innerHTML = ` /* 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:400px !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:10px; right:15px; font-size:20px; cursor:pointer; } /* APPLY BUTTON */ #filter-apply-btn { position:sticky; bottom:15px; width:100%; padding:12px; background:#000; color:#fff; border:none; cursor:pointer; margin-top:20px; line-height:1; z-index:2; } `; 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 = '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 }); })(); 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 Lipstick", "Search For Foundation", "Search For Mascara", ]; 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(); } }); }); document.addEventListener("DOMContentLoaded", function () { let st_searchIcon = document.querySelectorAll(".st-search-icon"); let st_searchCrossIcon = document.querySelectorAll(".st-search-close-btn"); let st_searchBoxDesktop = document.querySelector( ".st-search-box.hidden-mobile" ); let st_searchBoxMobile = document.querySelector( ".st-search-box.hidden-desktop" ); function toggleStSearchBar(showSearchBar) { if (!isDeviceMobile()) { if (st_searchBoxDesktop) st_searchBoxDesktop.style.display = showSearchBar ? "" : "none"; if (st_searchBoxMobile) st_searchBoxMobile.style.display = showSearchBar ? "" : "none"; if (st_searchIcon) { st_searchIcon.forEach((x) => { x.style.display = showSearchBar ? "none" : ""; }); } if (st_searchCrossIcon) { st_searchCrossIcon.forEach((x) => { x.style.display = showSearchBar ? "" : "none"; }); } } st_searchIcon.forEach((a) => { setTimeout(() => { document.querySelectorAll('input[name="st"]').forEach((x) => { x.focus(); }); }, 100); }); } if (st_searchIcon) { st_searchIcon.forEach((a) => { a.addEventListener("click", (e) => { setTimeout(() => { toggleStSearchBar(true); }, 300); }); }); } if (st_searchCrossIcon) { st_searchCrossIcon.forEach((a) => { a.addEventListener("click", (e) => { toggleStSearchBar(false); }); }); } const body = document.body; const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.attributeName === "class") { const hasFocusClass = body.classList.contains("st-autocomplete-focused"); if (!hasFocusClass && !isDeviceMobile()) { setTimeout(() => { toggleStSearchBar(false); }, 200); } } }); }); observer.observe(body, { attributes: true, attributeFilter: ["class"] }); function isDeviceMobile() { return window.matchMedia("only screen and (max-width: 768px)").matches; } setTimeout(() => { let st_clientsSearchIcon = document.querySelectorAll("li.search_link"); console.log(st_clientsSearchIcon); if (st_clientsSearchIcon) st_clientsSearchIcon.forEach((x) => { x.addEventListener("click", (e) => { let rootElement = document.documentElement; rootElement.scrollTo({ top: 0, behavior: "smooth", }); setTimeout(() => { toggleStSearchBar(true); }, 300); }); }); }, 300); }); function waitForDOMRendered(callback) { if (document.readyState === 'complete') { // If the DOM is already fully rendered, execute the callback immediately. callback(); } else { // Otherwise, schedule the callback to run on the next frame render. requestAnimationFrame(function() { waitForDOMRendered(callback); }); } } document.addEventListener("click", function (e) { const quickViewBtn = e.target.closest("quick-view-button"); if (quickViewBtn) { e.preventDefault(); // 🚫 stops anchor default navigation e.stopPropagation(); // 🚫 stops bubbling to console.log("Quick View Clicked - prevented PDP redirect"); } }); document.addEventListener("DOMContentLoaded", () => { document.addEventListener("stSearchResultsEvent", (event) => { event.detail.data.forEach((product) => { setTimeout(() => { if (product.isActive < 1) return; const productCard = document.querySelector( `[data-st-product-id="${product.id}"]` ); if (!productCard) return; const stCol = productCard.querySelector(".st-col"); if (!stCol) return; const variants = product.variants || []; if (variants.length > 1) { // Multiple variants → Select Shades / Quick View stCol.innerHTML = `

`; } else { // Single variant → Add to Cart const variantId = variants[0]?.id || ""; stCol.innerHTML = ` Add to cart `; } }, 100); }); }); });

Multichrome

Notify Me for