// 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 Shirts ", "Search For Polos", "Search For Joggers", "Search For Backpacks" ]; 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'); } } } }); }); // Wishlist 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('.product-card__wishlist')) return; const isMobile = window.innerWidth <= 769; // Pick the target container based on screen size const targetContainer = isMobile ? productCard.querySelector(".st-inner-box .st-name") : productCard.querySelector(".st-image-wrapper"); if (!targetContainer) return; const wishlist = ` `; targetContainer.insertAdjacentHTML("beforeend", wishlist); const wishlistBtn = targetContainer.querySelector( `.product_${product.id}.product-card__wishlist` ); if (wishlistBtn && !wishlistBtn.dataset.bound) { wishlistBtn.dataset.bound = "true"; wishlistBtn.addEventListener("click", function (e) { // Prevent the parent from navigating e.stopPropagation(); }); wishlistBtn.addEventListener("mousedown", function (e) { e.stopPropagation(); }); wishlistBtn.addEventListener("touchstart", function (e) { e.stopPropagation(); }); } if (isMobile && event.detail.source !== "searchResultsPage") { const nameEl = productCard.querySelector(".st-inner-box .st-name"); if (nameEl && !nameEl.querySelector('.st-name-text')) { [...nameEl.childNodes] .filter(n => n.nodeType === Node.TEXT_NODE && n.textContent.trim()) .forEach(node => { const span = document.createElement('span'); span.className = 'st-name-text'; node.parentNode.insertBefore(span, node); span.appendChild(node); }); } } }); }, 100); }); }); }); // Currency Switcher document.addEventListener('DOMContentLoaded', () => { document.addEventListener('stSearchResultsEvent', (event) => { event.detail.data.forEach(product => { setTimeout(() => { const productCards = document.querySelectorAll( `[data-st-product-id="${product.id}"]` ); if (!productCards.length) return; productCards.forEach(productCard => { productCard.querySelectorAll('.st-sale-price, .st-main-price') .forEach(el => { // Store raw USD price before doing anything if (!el.dataset.rawPrice) { el.dataset.rawPrice = el.textContent.trim().replace(/[^0-9.]/g, ''); } // Reset text to the raw USD amount so FutureBlink // sees a clean USD value and converts it correctly if (el.dataset.rawPrice) { el.textContent = '$' + parseFloat(el.dataset.rawPrice).toFixed(2); } // Add the .money class — FutureBlink will detect this // and apply its own conversion (no double-conversion) el.classList.add('money'); }); }); // ✅ Trigger FutureBlink's own observer/converter instead of ours if (typeof window.futureBlink_convertAll === 'function') { window.futureBlink_convertAll(); } else if (typeof window.Currency !== 'undefined' && typeof window.Currency.convertAll === 'function') { window.Currency.convertAll(); } }, 100); }); }); }); // outside click document.addEventListener("DOMContentLoaded", () => { document.addEventListener('click', function (event) { const searchBar = document.querySelector('#st-search-desktop'); const closeBtn = document.querySelector('.st-search-icon-wrapper'); const autocomplete = document.querySelector('.st-autocomplete-container'); const isBarOpen = searchBar.classList.contains('st-open'); if (isBarOpen && searchBar && closeBtn) { if (!searchBar.contains(event.target) && !autocomplete.contains(event.target)) { if (!closeBtn.contains(event.target)) { closeBtn.click(); } } } }); }); // Size filter in mobile (function() { const initMobileFilters = () => { // We attach the listener to the document or a stable parent to handle dynamic content document.addEventListener('click', function (e) { // 1. Check if we are on mobile/tablet if (window.innerWidth > 769) return; // 2. Find the clicked filter title const clickedLi = e.target.closest('.st-mobile-filter-title-list li'); if (!clickedLi) return; const span = clickedLi.querySelector('span'); // Use querySelectorAll if there's any chance multiple lists exist, // but usually the first one is the active one in mobile views. const mobileFilterList = document.querySelector('.st-mobile-filter-values-list'); if (mobileFilterList && span) { const text = span.textContent.trim().toLowerCase(); // 3. Use 'includes' for safer matching or '===' for exact if (text === 'size') { mobileFilterList.classList.add('st-size-filters'); } else { mobileFilterList.classList.remove('st-size-filters'); } } }); }; // Run immediately if DOM is ready, otherwise wait for DOMContentLoaded if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initMobileFilters); } else { initMobileFilters(); } })(); function getFormatedPrice(price) { const formatPrice = (val) => { if (typeof t_moneyFormat !== 'undefined') { const moneyFormat = t_moneyFormat; let formattedMoney = moneyFormat .replace('{{amount}}', val) .replace('{{amount_with_comma_separator}}', val) .replace('{{amount_no_decimals}}', val) .replace('{{amount_no_decimals_with_comma_separator}}', val); formattedMoney = `${formattedMoney}`; return formattedMoney; } else { return `$${val}`; } }; if (Shopify.currency && Shopify.currency.active !== undefined) { let convertedPrice = price; if (convertedPrice !== undefined) { let formattedPrice = formatPrice(Number(convertedPrice).toFixed(2)); return formattedPrice; } else { return `$${val}`; } } else { return `$${val}`; } } document.addEventListener('DOMContentLoaded', () => { document.addEventListener('stSearchResultsEvent', (event) => { event.detail.data.forEach(product => { setTimeout(() => { const productCards = document.querySelectorAll( `[data-st-product-id="${product.id}"]` ); if (!productCards.length) return; productCards.forEach(productCard => { let discountedPrice = getFormatedPrice(product.discounted_price); let price = getFormatedPrice(product.price); if (price && productCard.querySelector('.st-main-price')) { productCard.querySelector('.st-main-price').innerHTML = price; } if (discountedPrice && productCard.querySelector('.st-sale-price')) { productCard.querySelector('.st-sale-price').innerHTML = discountedPrice; } }); // if (typeof window.futureBlink_convertAll === 'function') { // window.futureBlink_convertAll(); // } else if (typeof window.Currency !== 'undefined' && typeof window.Currency.convertAll === 'function') { // window.Currency.convertAll(); // } }, 100); }); }); }); window.stGetSearchFilter = function (defaultFilter) { const country = window.Shopify?.country?.toUpperCase(); if (country !== 'AE') { const countryCondition = "st_country_visibility = 'ip'"; const updatedFilter = defaultFilter ? `${defaultFilter} AND NOT ${countryCondition}` : countryCondition; return updatedFilter; } return defaultFilter; };

Filter and sort

Filter

backpacks