window.addEventListener("DOMContentLoaded", () => { const main_content = document.querySelector("main#main-content"); if (main_content) { main_content.parentNode.insertBefore(document.querySelector("#st-search-container"), main_content); } let searchInputBoxSelector = document.querySelectorAll(".st-search-bar .st-search-bar-inner #st-search-box, .st-search-box input[name='q']"); searchInputBoxSelector.forEach((searchInputBox) => { if (searchInputBox) { searchInputBox.setAttribute("placeholder", ""); const placeHolderPhrases = [ "Search For Vitamins", "Search For Omega", "Search For Protein" ]; 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('stSearchResultsEvent', (event) => { if (event.detail.source === "searchResultsPage") { event.detail.data.forEach((product) => { setTimeout(() => { // Find the product card based on the product ID let productCard = document.querySelector(`[data-st-product-id="${product.id}"]`); let innerbox = productCard ? productCard.querySelector('.st-inner-box') : null; // Extract the variant ID from the product card let variantId = productCard ? productCard.getAttribute('data-st-product-activevariant-id') : null; // Proceed only if the product card and innerbox are found if (productCard && innerbox) { // Check if the quick add div is already appended if (!innerbox.querySelector('.st-add-to-cart-wrap')) { // Create the outer div with the necessary classes let quickAddDiv = document.createElement('div'); quickAddDiv.className = 'card__quick-add mob:card__quick-add--below desktop:card__quick-add--below st-add-to-cart-wrap'; let noJsHiddenDiv = document.createElement('div'); noJsHiddenDiv.className = 'no-js-hidden'; noJsHiddenDiv.style = 'display: flex; align-items: center; justify-content: center;'; noJsHiddenDiv.setAttribute('data-handle', product.handle); const wishlistDiv = document.createElement("div") wishlistDiv.className = "st-wishlist"; const wishlistInnerDiv = document.createElement("div") wishlistInnerDiv.className = "flits-collection-page-wishlist-button" wishlistInnerDiv.setAttribute("data-flits-product-handle", `${product.handle}`); wishlistInnerDiv.setAttribute("data-flits-product-id", `${product.id}`); wishlistInnerDiv.setAttribute("data-flits-product-title", `${product.title}`); wishlistInnerDiv.setAttribute("data-flits-product-image", `${product.images[0].src}`); wishlistInnerDiv.addEventListener("click", function (event) { event.stopPropagation(); event.preventDefault(); }); wishlistDiv.appendChild(wishlistInnerDiv); // Determine the correct collection handle let collectionHandle = product.collections && product.collections.length > 0 ? product.collections[0] : 'default-collection'; // Create the "Add To Cart" button with dynamic URL binding let addToCartButton = document.createElement('button'); addToCartButton.type = 'button'; addToCartButton.className = 'btn btn--primary w-full js-quick-add'; addToCartButton.setAttribute('aria-haspopup', 'dialog'); addToCartButton.setAttribute('data-product-url', `/collections/${collectionHandle}/products/${product.handle}`); addToCartButton.setAttribute('data-product-default-variant', 'false'); addToCartButton.setAttribute('data-quick-add-listener-added', 'true'); addToCartButton.innerHTML = ` Add To Cart`; // Create the "View Details" link with dynamic URL binding let viewDetailsLink = document.createElement('a'); viewDetailsLink.href = `/collections/${collectionHandle}/products/${product.handle}`; viewDetailsLink.className = 'btn btn--secondary quick-add-view-btn'; viewDetailsLink.setAttribute('data-bss-pl', 'active'); viewDetailsLink.textContent = 'View details'; // Append the created elements in the correct order noJsHiddenDiv.appendChild(wishlistDiv); noJsHiddenDiv.appendChild(addToCartButton); noJsHiddenDiv.appendChild(viewDetailsLink); quickAddDiv.appendChild(noJsHiddenDiv); // Append the complete structure to the product card innerbox.appendChild(quickAddDiv); document.dispatchEvent(new CustomEvent("Flits:AjaxCollection:CollectionUpdated", { bubbles: true })); } } }, 500); }); } }); 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 autocompleteContent = document.querySelector('#st-autocomplete-container #st-after-search .st-autocomplete-content'); if (suggestionsPanel && autocompleteContent) { if (event.detail.data.length === 0) { suggestionsPanel.style.display = 'none'; autocompleteContent.classList.add('st-search-suggestions-hide'); } else { suggestionsPanel.style.display = 'block'; autocompleteContent.classList.remove('st-search-suggestions-hide'); } } } }); });

×

×

×

×

×