// 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 Knives ", "Search For Tawa", "Search For Kadai", "Search For Cookware" ]; 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(); } } } }); }); // Move clear button document.addEventListener('DOMContentLoaded', () => { setTimeout(() => { const clearButton = document.querySelector(`#st-filter-main-header .st-column-50.st-align-right`); const filterBus = document.querySelector(`#st-selected-filter-bus .st-row`); if (clearButton && filterBus) { filterBus.append(clearButton); } }, 500); }); // Move all labels document.addEventListener('DOMContentLoaded', () => { document.addEventListener('stSearchResultsEvent', (event) => { event.detail.data.forEach((product) => { setTimeout(() => { // HANDLE MULTIPLE INSTANCES const productCards = document.querySelectorAll( `[data-st-product-id="${product.id}"]` ); productCards.forEach((productCard) => { const imageWrapper = productCard.querySelector('.st-image-wrapper'); const innerBox = productCard.querySelector('.st-inner-box'); if (!imageWrapper || !innerBox) return; // PREVENT DUPLICATE MOVES if (productCard.dataset.extraFieldsMoved) return; const extraFields = innerBox.querySelectorAll( '.st-extra-field-box:not(.st-description):not(.st-short-description):not(.st-save)' ); extraFields.forEach((field) => { imageWrapper.appendChild(field); }); productCard.dataset.extraFieldsMoved = 'true'; }); }, 100); }); }); }); // Quick view 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('.card__quick-add')) return; const imageWrapper = productCard.querySelector(".st-inner-box"); if (!imageWrapper) return; const quickViewHTML = `

View details

`; imageWrapper.insertAdjacentHTML('afterbegin', quickViewHTML); // const atcBtn = productCard.querySelector('.js-quick-add'); // if (atcBtn) { // atcBtn.addEventListener('click', (e) => { // e.stopPropagation(); // }); // } }, 200); }); }); }); // document.addEventListener("click", (event) => { // console.log(event.target); // }) // Toggle button document.addEventListener('DOMContentLoaded', () => { document.addEventListener('stSearchResultsEvent', (event) => { if (event.detail.source != "searchResultsPage") return; setTimeout(() => { const header = document.querySelector(`#st-filter-main-header .st-column-50`); if (!header) return; const duplicate = document.querySelector(`#st-filter-main-header .st-column-50 svg`); if(duplicate) return; const svg = ` `; header.insertAdjacentHTML('beforeend', svg); }, 200); }); }); // Toggle functionality document.addEventListener('DOMContentLoaded', () => { document.addEventListener('stSearchResultsEvent', (event) => { if (event.detail.source != "searchResultsPage") return; setTimeout(() => { const toggleBtn = document.querySelector( '.st-search-root .st-search-container #st-filter-sidebar #st-filter-main-header .st-column-50' ); const filterBody = document.querySelector( '.st-search-root .st-search-container #st-filter-sidebar #st-filter-main-body' ); const resultsList = document.querySelector( '.st-search-root .st-search-container #st-main-content .st-row .st-column-80 div#st-results-list' ); const resultsListTablet = document.querySelector( '.st-search-root .st-row .st-column-75 div#st-results-list' ); const selectedFilterBus = document.querySelector( '.st-search-root .st-search-container #st-main-content #st-results-header #st-selected-filter-bus' ); const productCards = document.querySelectorAll( '.st-search-root .st-search-container #st-main-content #st-results-list .st-product-card.st-column-33' ); if (!toggleBtn) return; // APPLY STYLES AGAIN ON INFINITE SCROLL const isActive = toggleBtn.classList.contains('active'); if (isActive) { productCards.forEach((card) => { card.style.maxWidth = '25%'; card.style.flex = '25%'; }); if (selectedFilterBus) { selectedFilterBus.style.padding = '0 0 0 35px'; selectedFilterBus.style.marginLeft = '-32%'; } } // PREVENT MULTIPLE CLICK BINDINGS if (toggleBtn.dataset.layoutBound) return; toggleBtn.dataset.layoutBound = 'true'; toggleBtn.addEventListener('click', () => { toggleBtn.classList.toggle('active'); const isActive = toggleBtn.classList.contains('active'); if (filterBody) { filterBody.style.display = isActive ? 'none' : ''; } if (resultsList) { resultsList.style.margin = isActive ? '0' : '0 -16px'; resultsList.style.marginLeft = isActive ? '-32%' : ''; } if (resultsListTablet) { resultsListTablet.style.margin = isActive ? '0' : '0 -16px'; resultsListTablet.style.marginLeft = isActive ? '-32%' : ''; } if (selectedFilterBus) { selectedFilterBus.style.padding = isActive ? '0 0 0 35px' : ''; selectedFilterBus.style.marginLeft = isActive ? '-32%' : ''; } const updatedCards = document.querySelectorAll( '.st-search-root .st-search-container #st-main-content #st-results-list .st-product-card.st-column-33' ); updatedCards.forEach((card) => { card.style.maxWidth = isActive ? '25%' : ''; card.style.flex = isActive ? '25%' : ''; }); }); }, 100); }); }); document.addEventListener('DOMContentLoaded', () => { document.addEventListener('stSearchResultsEvent', (event) => { console.log("event=", event); }) });