document.addEventListener("DOMContentLoaded", () => { document.addEventListener("stSearchResultsEvent", (event) => { if (event.detail.source !== "searchResultsPage") return; event.detail.data.forEach(product => { setTimeout(() => { const productCards = document.querySelectorAll( `[data-st-product-id="${product.id}"]` ); productCards.forEach(productCard => { const existingBtn = productCard.querySelector(".main_add_cc"); if (existingBtn) return; const variants = product.st_variants || []; const isActive = product.isActive; const hasMultipleVariants = variants.length > 1; const hasColor = product.color; const firstAvailableVariant = variants.find( v => v.inventory_quantity > 0 ); const defaultVariant = firstAvailableVariant || variants[0]; if (!defaultVariant) return; const modalId = `ProductCardQuickView-template--21080991498464__main-${product.id}`; const button = document.createElement("button"); button.className = "main_add_cc card__bottom-button button button--primary button--full-width"; button.setAttribute("data-id", defaultVariant.id); if (!isActive) { button.classList.add("disabled_soldoput"); button.textContent = "Soldout"; } else if (variants.length === 1) { button.classList.add("only_default_var"); button.textContent = "Add to bag"; } else if (hasMultipleVariants && hasColor) { button.setAttribute("is", "loess-button"); button.setAttribute("aria-controls", modalId); button.setAttribute("aria-expanded", "false"); button.setAttribute("aria-label", "Select Shades"); button.textContent = "Select Shades"; } else if (hasMultipleVariants && !hasColor) { button.setAttribute("is", "loess-button"); button.setAttribute("aria-controls", modalId); button.setAttribute("aria-expanded", "false"); button.setAttribute("aria-label", "Select Variants"); button.textContent = "Select Variants"; } const cardBottom = productCard.querySelector(".st-inner-box"); if (cardBottom) { cardBottom.appendChild(button); } if (product.isActive > 0 && product.st_variants.length > 1) { button.addEventListener("click", function () { const modal = document.getElementById(modalId); if (modal && typeof modal.show === "function") { modal.show(); } else if (modal) { modal.setAttribute("open", ""); } }); } if (hasMultipleVariants && !document.getElementById(modalId)) { document.body.insertAdjacentHTML( "beforeend", ` ` ); } }); }, 700); }); }); }); 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('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'); } } } }); }); document.addEventListener("click", function (e) { const filterAnimation = document.querySelector(".st-filter-animation"); const filterSidebar = document.querySelector("#st-filter-sidebar"); const filterBtn = document.querySelector(".st-filter-btn"); if (!filterAnimation || !filterSidebar) return; if (filterAnimation.contains(e.target) && !filterSidebar.contains(e.target)) { document.body.classList.remove("st-filter-popup-is-open"); } if (!filterBtn) return; filterBtn.addEventListener('click', () => { if(!document.body.classList.contains("st-filter-popup-is-open")) { document.body.classList.add("st-filter-popup-is-open"); } }) });

New Arrival

New Arrival