`; imageContainer.appendChild(quickViewModal); } }, 300); }); } }); }); window.stCustomAddToCart = (id, quantity) => { let baseUrl = `${window.location.protocol}//${window.location.host}`; let addToCartUrl = `${baseUrl}/cart/add.js`; let cartUrl = `${baseUrl}/cart`; let data = `id=${id}&quantity=${quantity}`; fetch(addToCartUrl, { method: "POST", headers: { Accept: "application/json, text/javascript, */*; q=0.01", "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8", "X-Requested-With": "XMLHttpRequest", }, body: encodeURI(data), }) .then((response) => { if (!response.ok) { throw new Error("Something went wrong"); } return response.json(); }) .then((result) => { console.log("Product added to cart:", result); }) .catch((error) => { console.error("Error adding to cart:", error); }); }; function bindBucksCC() { document.querySelectorAll(".st-product-card").forEach(card => { const salePrice = card.querySelector(".st-sale-price"); const mainPrice = card.querySelector(".st-main-price"); if (salePrice && !salePrice.classList.contains("buckscc-money")) { salePrice.classList.add("money", "buckscc-money"); } if (mainPrice && !mainPrice.classList.contains("buckscc-money")) { mainPrice.classList.add("money", "buckscc-money"); } }); } document.addEventListener("stSearchResultsEvent", () => { setTimeout(() => { bindBucksCC(); }, 200); }); document.addEventListener("stSearchResultsEvent", () => { setTimeout(() => { window.bucksCC?.reConvert(); window.bucksCC?.rerender(); }, 300); }); document.addEventListener("click", function(event){ const btn = event.target.closest(".st-atc-btn"); if(!btn) return; event.preventDefault(); event.stopPropagation(); const productCard = btn.closest(".st-product-card"); const variantId = productCard?.dataset.stProductActivevariantId; if(variantId){ window.stCustomAddToCart(variantId,1); } }, true); document.addEventListener('DOMContentLoaded', function () { function moveSectionsBelowSearch() { const searchContainer = document.querySelector('#st-search-container'); const newsletterSection = document.querySelector( '#shopify-section-sections--21703506559173__newsletter_ttEBT8' ); const footerSection = document.querySelector( '#shopify-section-sections--21703506559173__footer' ); if (!searchContainer) return; // Move Newsletter if ( newsletterSection && newsletterSection.dataset.moved !== 'true' ) { searchContainer.insertAdjacentElement( 'afterend', newsletterSection ); newsletterSection.dataset.moved = 'true'; } // Move Footer if ( footerSection && footerSection.dataset.moved !== 'true' ) { if (newsletterSection) { newsletterSection.insertAdjacentElement( 'afterend', footerSection ); } else { searchContainer.insertAdjacentElement( 'afterend', footerSection ); } footerSection.dataset.moved = 'true'; } console.log('[Sections] Newsletter + Footer moved below search'); } moveSectionsBelowSearch(); }); (function () { // ========================= // CONFIG // ========================= const slideFrom = 'right'; const applyButtonLabel = 'Apply Filters'; // Tablet only const tabletMinWidth = 768; const tabletMaxWidth = 1023; // ========================= // 0. Inject CSS immediately // ========================= const style = document.createElement('style'); style.innerHTML = ` /* Apply only on tablet */ @media (min-width:${tabletMinWidth}px) and (max-width:${tabletMaxWidth}px) { /* Skeleton overrides */ #st-loading-skeleton .st-column-25 { display: none; } #st-loading-skeleton .st-column-75 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } /* KEEP COLUMN BUT REMOVE WIDTH IMPACT */ .st-column-20.st-filter-animation { width: 0 !important; flex: 0 0 0 !important; overflow: visible !important; } .st-column-20.st-filter-animation + .st-column-80 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } .st-column-25.st-filter-animation { width: 0 !important; flex: 0 0 0 !important; overflow: visible !important; } .st-column-25.st-filter-animation + .st-column-75 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } /* SIDEBAR DRAWER */ #st-filter-sidebar { position: fixed !important; top: 0; ${slideFrom}: 0; height: 100vh !important; width: 400px !important; ${slideFrom === 'right' ? 'left: unset !important;' : 'right: unset !important;' } background: #fff !important; z-index: 9999 !important; transform: translate${slideFrom === 'right' ? 'X(100%)' : 'X(-100%)' }; transition: transform 0.35s ease; overflow-y: auto; padding: 0 15px !important; box-shadow: ${ slideFrom === 'right' ? '-4px 0 20px rgba(0,0,0,0.2)' : '4px 0 20px rgba(0,0,0,0.2)' }; } #st-filter-sidebar.open { transform: translateX(0); } /* OVERLAY */ #filter-overlay { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 9998; opacity: 0; visibility: hidden; transition: 0.3s; } #filter-overlay.active { opacity: 1; visibility: visible; } /* FILTER BUTTON */ #custom-filter-btn { margin-left: 10px; padding: 8px 14px; border: 1px solid #ccc; background: #fff; color: #000; cursor: pointer; font-size: 12px; line-height: 1; min-height: fit-content; max-height: fit-content; float: right; } /* CLOSE BUTTON */ #filter-close-btn { position: absolute; top: 10px; right: 15px; font-size: 20px; cursor: pointer; } /* APPLY BUTTON */ #filter-apply-btn { position: sticky; bottom: 15px; width: 100%; padding: 12px; background: #000; color: #fff; border: none; cursor: pointer; margin-top: 20px; line-height: 1; z-index: 2; } } `; document.head.appendChild(style); // ========================= // 1. Init function // ========================= function init() { const width = window.innerWidth; // Tablet only if (width < tabletMinWidth || width > tabletMaxWidth) { return; } const sidebar = document.querySelector('#st-filter-sidebar'); const sortContainer = document.querySelector('#st-sort'); if (!sidebar || !sortContainer) return; // Prevent duplicate init if (document.getElementById('custom-filter-btn')) return; // FILTER BUTTON const btn = document.createElement('button'); btn.id = 'custom-filter-btn'; btn.innerText = 'Filters'; sortContainer.parentNode.appendChild(btn); // OVERLAY const overlay = document.createElement('div'); overlay.id = 'filter-overlay'; document.body.appendChild(overlay); // CLOSE BUTTON const closeBtn = document.createElement('div'); closeBtn.id = 'filter-close-btn'; closeBtn.innerHTML = '✕'; sidebar.appendChild(closeBtn); // APPLY BUTTON const applyBtn = document.createElement('button'); applyBtn.id = 'filter-apply-btn'; applyBtn.innerText = applyButtonLabel; sidebar.appendChild(applyBtn); // ========================= // EVENTS // ========================= function openDrawer() { sidebar.classList.add('open'); overlay.classList.add('active'); document.body.style.overflow = 'hidden'; } function closeDrawer() { sidebar.classList.remove('open'); overlay.classList.remove('active'); document.body.style.overflow = ''; } btn.addEventListener('click', openDrawer); overlay.addEventListener('click', closeDrawer); closeBtn.addEventListener('click', closeDrawer); applyBtn.addEventListener('click', closeDrawer); } // ========================= // 2. Wait for sidebar in DOM // ========================= const observer = new MutationObserver(() => { if (document.querySelector('#st-filter-sidebar')) { init(); observer.disconnect(); } }); observer.observe(document.body, { childList: true, subtree: true }); })(); document.addEventListener('stSearchResultsEvent', (event) => { console.log('[GridSwitcher] Event fired:', event); if (event.detail.source === "searchResultsPage") { setTimeout(() => { if (document.getElementById('st-no-results')) { console.log('[GridSwitcher] No results page detected → skipping'); return; } const width = window.innerWidth; const isMobile = width < 768; const resultsHeaderRow = document.querySelector('#st-results-header .st-row .st-flex-wrap'); const resultsList = document.querySelector('#st-results-list .st-row'); console.log('[GridSwitcher] Header Row:', resultsHeaderRow); console.log('[GridSwitcher] Results List:', resultsList); if (!resultsHeaderRow || !resultsList) { console.warn('[GridSwitcher] Missing header or results list. Aborting.'); return; } // Prevent duplicate if (document.getElementById('grid-switcher')) return; // ✅ Create UI const switcher = document.createElement('div'); switcher.id = 'grid-switcher'; switcher.style.display = 'flex'; switcher.style.gap = '8px'; switcher.style.marginLeft = 'auto'; // ✅ Mobile Layout if (isMobile) { switcher.innerHTML = ` `; resultsList.classList.add('st-grid-2'); } else { // ✅ Desktop Layout switcher.innerHTML = ` `; resultsList.classList.add('st-grid-4'); } resultsHeaderRow.appendChild(switcher); // ✅ Click Logic switcher.addEventListener('click', (e) => { const btn = e.target.closest('.toolbar-icon'); if (!btn) return; const cols = btn.dataset.grid; // Active toggle switcher.querySelectorAll('.toolbar-icon').forEach(b => { b.classList.remove('active'); }); btn.classList.add('active'); // Remove all grid classes resultsList.classList.remove( 'st-grid-1', 'st-grid-2', 'st-grid-3', 'st-grid-4', 'st-grid-6' ); // Apply selected grid resultsList.classList.add(`st-grid-${cols}`); }); }, 100); } }); document.addEventListener("DOMContentLoaded", () => { document.addEventListener("click", function (event) { const sidebar = document.querySelector('#st-filter-sidebar'); const closeBtn = document.querySelector('.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 || !filterbtn) { return; } // Ignore clicks INSIDE filter sidebar if (sidebar.contains(event.target)) { return; } // Ignore clicks on filter button if (filterbtn.contains(event.target)) { return; } // Ignore filter option clicks if ( event.target.closest('.st-filter-option') || event.target.closest('.st-filter-item') || event.target.closest('.st-filter-block') || event.target.closest('.st-checkbox') || event.target.closest('.st-facet') ) { return; } // Close only genuine outside clicks closeBtn.click(); }); }); window.addEventListener("DOMContentLoaded", () => { let searchInputBoxSelector = document.querySelectorAll(".st-search-bar input"); searchInputBoxSelector.forEach((searchInputBox) => { if (searchInputBox) { searchInputBox.setAttribute("placeholder", ""); const placeHolderPhrases = [ "Search For Pantsuits", "Search For Blazers", "Search For Jacket", "Search For Trousers" ]; 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(); } }); });

Blog

Newsletter