window.addEventListener("DOMContentLoaded", () => { let searchInputBoxSelector = document.querySelectorAll(".st-search-bar .st-search-bar-inner #st-search-box, input[name='q']"); searchInputBoxSelector.forEach((searchInputBox) => { if (searchInputBox) { searchInputBox.setAttribute("placeholder", ""); const placeHolderPhrases = [ "Search For Pipe Cleaner", "Search For Moulds", "Search For markers", "Search For sticker" ]; 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("DOMContentLoaded", function () { // let st_searchIcon = document.querySelectorAll(".st-search-icon"); // let st_searchCrossIcon = document.querySelectorAll(".st-search-close-btn"); // let st_searchBoxDesktop = document.querySelector( // ".st-search-box.hidden-mobile" // ); // let st_searchBoxMobile = document.querySelector( // ".st-search-box.hidden-desktop" // ); // function toggleStSearchBar(showSearchBar) { // if (!isDeviceMobile()) { // if (st_searchBoxDesktop) // st_searchBoxDesktop.style.display = showSearchBar ? "" : "none"; // if (st_searchBoxMobile) // st_searchBoxMobile.style.display = showSearchBar ? "" : "none"; // if (st_searchIcon) { // st_searchIcon.forEach((x) => { // x.style.display = showSearchBar ? "none" : ""; // }); // } // if (st_searchCrossIcon) { // st_searchCrossIcon.forEach((x) => { // x.style.display = showSearchBar ? "" : "none"; // }); // } // } // st_searchIcon.forEach((a) => { // setTimeout(() => { // document.querySelectorAll('input[name="q"]').forEach((x) => { // x.focus(); // }); // }, 100); // }); // } // if (st_searchIcon) { // st_searchIcon.forEach((a) => { // a.addEventListener("click", (e) => { // setTimeout(() => { // toggleStSearchBar(true); // }, 300); // }); // }); // } // if (st_searchCrossIcon) { // st_searchCrossIcon.forEach((a) => { // a.addEventListener("click", (e) => { // toggleStSearchBar(false); // }); // }); // } // const body = document.body; // const observer = new MutationObserver((mutations) => { // mutations.forEach((mutation) => { // if (mutation.attributeName === "class") { // const hasFocusClass = body.classList.contains("st-autocomplete-focused"); // if (!hasFocusClass && !isDeviceMobile()) { // setTimeout(() => { // toggleStSearchBar(false); // }, 200); // } // } // }); // }); // observer.observe(body, { // attributes: true, // attributeFilter: ["class"] // }); // function isDeviceMobile() { // return window.matchMedia("only screen and (max-width: 768px)").matches; // } // }); function initSearchScript() { let st_searchIcon = document.querySelectorAll(".st-search-icon"); let st_searchCrossIcon = document.querySelectorAll(".st-search-close-btn"); let st_searchBoxDesktop = document.querySelector(".st-search-box.hidden-mobile"); let st_searchBoxMobile = document.querySelector(".st-search-box.hidden-desktop"); function toggleStSearchBar(showSearchBar) { if (!isDeviceMobile()) { if (st_searchBoxDesktop) st_searchBoxDesktop.style.display = showSearchBar ? "" : "none"; if (st_searchBoxMobile) st_searchBoxMobile.style.display = showSearchBar ? "" : "none"; st_searchIcon.forEach((x) => { x.style.display = showSearchBar ? "none" : ""; }); st_searchCrossIcon.forEach((x) => { x.style.display = showSearchBar ? "" : "none"; }); } setTimeout(() => { document.querySelectorAll('input[name="q"]').forEach((x) => x.focus()); }, 100); } st_searchIcon.forEach((a) => { a.addEventListener("click", () => { setTimeout(() => toggleStSearchBar(true), 300); }); }); st_searchCrossIcon.forEach((a) => { a.addEventListener("click", () => { toggleStSearchBar(false); }); }); const body = document.body; const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.attributeName === "class") { const hasFocusClass = body.classList.contains("st-autocomplete-focused"); if (!hasFocusClass && !isDeviceMobile()) { setTimeout(() => toggleStSearchBar(false), 200); } } }); }); observer.observe(body, { attributes: true, attributeFilter: ["class"] }); function isDeviceMobile() { return window.matchMedia("(max-width: 768px)").matches; } } // ✅ Run safely in all cases if (document.readyState === "complete" || document.readyState === 'interactive') { document.addEventListener("DOMContentLoaded", initSearchScript); } else { initSearchScript(); } document.addEventListener("DOMContentLoaded", () => { document.addEventListener("stSearchResultsEvent", (event) => { event.detail.data.forEach(product => { setTimeout(() => { let productCard = document.querySelector(`[data-st-product-id="${product.id}"]`); if (!productCard) return; let imageContainer = productCard.querySelector('.st-image-container'); let discountLabel = productCard.querySelector('.st-discount-label'); if (imageContainer && discountLabel){ imageContainer.appendChild(discountLabel); } if (imageContainer && !imageContainer.querySelector(".st-wishlist")) { const wishlistDiv = document.createElement("div") wishlistDiv.className = "st-wishlist m-product-card__action"; const wishlistButton = document.createElement("button") wishlistButton.className = "m-tooltip m-button--icon m-wishlist-button m-tooltip--left m-tooltip--style-1" wishlistButton.setAttribute("type","button"); wishlistButton.setAttribute("data-product-handle",`${product.handle}`); wishlistButton.setAttribute("aria-label", "Add to wishlist"); wishlistButton.innerHTML = ` `; wishlistButton.addEventListener("click", function (event) { event.stopPropagation(); event.preventDefault(); }); wishlistDiv.appendChild(wishlistButton); imageContainer.appendChild(wishlistDiv); } if (imageContainer && imageContainer.querySelector(".st-wishlist")) { imageContainer.querySelector(".st-wishlist").outerHTML = imageContainer.querySelector(".st-wishlist").outerHTML; } }, 1000); }); }); }); document.addEventListener("DOMContentLoaded", () => { document.addEventListener("stSearchResultsEvent", (event) => { event.detail.data.forEach(product => { setTimeout(async () => { const productCard = document.querySelector( `[data-st-product-id="${product.id}"]` ); if (!productCard) return; const handle = product.handle; if (!handle) return; const nameEl = productCard.querySelector(".st-name"); if (!nameEl) return; try { // 🔹 Fetch PDP HTML const res = await fetch(`/products/${handle}`); if (!res.ok) return; const html = await res.text(); const parser = new DOMParser(); const doc = parser.parseFromString(html, "text/html"); // ⭐ Get rating element from PDP const ratingEl = doc.querySelector(".alireviews-review-star-rating"); if (!ratingEl) return; // 🔹 Wrapper if (!productCard.querySelector(".st-product-rating-wrapper")) { const ratingWrapper = document.createElement("div"); ratingWrapper.className = "st-product-rating-wrapper"; // Clone node to avoid DOM issues ratingWrapper.appendChild(ratingEl.cloneNode(true)); // Insert AFTER product name nameEl.insertAdjacentElement("afterend", ratingWrapper); } } catch (err) { console.error("Rating fetch failed:", err); } }, 1000); }); }); }); document.addEventListener("DOMContentLoaded", () => { document.addEventListener("stSearchResultsEvent", (event) => { event.detail.data.forEach(product => { setTimeout(() => { const productCard = document.querySelector( `[data-st-product-id="${product.id}"]` ); if (!productCard) return; const imageContainer = productCard.querySelector('.st-image-container'); if (!imageContainer) return; // Prevent duplicate insertion if (imageContainer.querySelector('.m-product-card__action.st-atc-wrapper')) return; const actionDiv = document.createElement('div'); actionDiv.className = 'm-product-card__action st-atc-wrapper m-product-card__addons m:flex'; actionDiv.innerHTML = ` `; imageContainer.appendChild(actionDiv); }, 500); }); }); }); document.addEventListener("click", function (e) { const filterAnimation = document.querySelector(".st-filter-animation"); const filterSidebar = document.querySelector("#st-filter-sidebar"); const filterBtn = document.querySelector(".st-filter-btn"); if (!filterAnimation || !filterSidebar) return; if (filterAnimation.contains(e.target) && !filterSidebar.contains(e.target)) { document.body.classList.remove("st-filter-popup-is-open"); } if (!filterBtn) return; filterBtn.addEventListener('click', () => { if(!document.body.classList.contains("st-filter-popup-is-open")) { document.body.classList.add("st-filter-popup-is-open"); } }) });

Search our store

Packaging Supplies under one roof!

Filters

Recently Viewed Products

Let’s get in touch

Quick link

Company

Connect with us

Confirm your age

Come back when you're older