window.addEventListener("DOMContentLoaded", () => { 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'; // Create the inner div with data attributes and styles 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); // Create the wishlist-engine div with dynamically bound data attributes let wishlistEngineDiv = document.createElement('div'); wishlistEngineDiv.className = 'wishlist-engine'; wishlistEngineDiv.setAttribute('data-product_id', product.id); wishlistEngineDiv.setAttribute('data-variant_id', variantId); wishlistEngineDiv.setAttribute('data-full_button', 'true'); wishlistEngineDiv.setAttribute('data-css', 'true'); // Add the wishlist button inside wishlist-engine div let wishlistButton = document.createElement('div'); wishlistButton.className = 'wishlist-engine-button'; wishlistButton.style = 'background:transparent;'; wishlistButton.innerHTML = ` `; // Append wishlist button to wishlist engine div wishlistEngineDiv.appendChild(wishlistButton); // 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(wishlistEngineDiv); noJsHiddenDiv.appendChild(addToCartButton); noJsHiddenDiv.appendChild(viewDetailsLink); quickAddDiv.appendChild(noJsHiddenDiv); // Append the complete structure to the product card innerbox.appendChild(quickAddDiv); } } }, 500); }); } });

Demo Page By Prem

Image banner

Popular Categories

SHOP BY BRAND

×

×

×

×

×