// 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 Saree ", "Search For Dresses", "Search For Blouse", "Search For Kurta sets" ]; 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(); } } } }); }); // document.addEventListener('DOMContentLoaded', () => { // document.addEventListener('stSearchResultsEvent', (event) => { // if (event.detail.source !== "searchResultsPage") return; // console.log('event=', event); // }) // }); // Wishlist // document.addEventListener('DOMContentLoaded', () => { // document.addEventListener('stSearchResultsEvent', (event) => { // if (event.detail.source !== "searchResultsPage") return; // event.detail.data.forEach(product => { // setTimeout(() => { // const productCard = document.querySelector( // `[data-st-product-id="${product.id}"]` // ); // if (!productCard) return; // if (productCard.querySelector('.wishlist_plp')) return; // const imageWrapper = productCard.querySelector(".st-image-wrapper"); // if (!imageWrapper) return; // const wishlist = `

// `; // imageWrapper.insertAdjacentHTML("beforeend", wishlist); // const wishlistEl = imageWrapper.querySelector(".wishlist_plp"); // wishlistEl?.addEventListener("click", (e) => { // e.preventDefault(); // e.stopPropagation(); // }); // }, 100); // }); // }); // }); 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}"]` ); if (!productCards.length) return; productCards.forEach(productCard => { if (productCard.querySelector('.wishlist_plp')) return; const imageWrapper = productCard.querySelector(".st-image-wrapper"); if (!imageWrapper) return; const wishlist = `

`; imageWrapper.insertAdjacentHTML("beforeend", wishlist); const wishlistEl = imageWrapper.querySelector(".wishlist_plp"); wishlistEl?.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); }); }); }, 100); }); }); }); // Atc document.addEventListener('DOMContentLoaded', () => { document.addEventListener('stSearchResultsEvent', (event) => { if (event.detail.source !== "searchResultsPage") return; event.detail.data.forEach((product, index) => { setTimeout(() => { const productCard = document.querySelector(`[data-st-product-id="${product.id}"]`); if (!productCard || productCard.querySelector('.product-item__quick-form')) return; const imageWrapper = productCard.querySelector(".st-image-wrapper"); const innerBox = productCard.querySelector(".st-inner-box"); if (!imageWrapper) return; const imageContainer = productCard.querySelector(".st-image-container"); if (!imageContainer) return; const variantCount = Array.isArray(product.variants) ? product.variants.length : (product.variants || 0); if (!variantCount) return; // const wrapper = document.createElement('div'); // wrapper.className = "custom-atc w-full"; let html = ''; let divs = ' '; if (variantCount === 1 && product.variants[0]?.id) { const variantId = product.variants[0].id; // Cleaned up version of your Live Theme HTML html = ` `; } else { html = `

`; divs = ` `; } // --- Placement Logic --- const placeButton = () => { if (window.innerWidth < 768) { imageContainer.insertAdjacentHTML("beforeend", html); } else { imageWrapper.insertAdjacentHTML("beforeend", html); } document.body.insertAdjacentHTML("beforeend",divs); }; placeButton(); // --- CRITICAL STEP: Initialize Alpine on the new HTML --- // if (window.Alpine) { // window.Alpine.initTree(wrapper); // } // {% comment %} window.addEventListener("resize", () => placeButton()); {% endcomment %} const button = productCard.querySelector('.product-item__quick-form,.product-item__quick-buy-button'); if (button) { button.addEventListener('click', (e) => { e.stopPropagation(); }); } const buttonsQV = productCard.querySelectorAll('.quick-view-button'); buttonsQV.forEach((buttonQV) => { buttonQV.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); }); }); }, 100); }); }); });

Flow

Flow