async function stCustomAddToCart(productId) { const productForm = new FormData(); productForm.append("sections", ["mini-cart"]); productForm.append("form_type", "product"); productForm.append("quantity", "1"); productForm.append("id", productId); productForm.append("utf8", "✓"); const response = await fetch( `${window.themeVariables.routes.cartAddUrl}.js`, { body: productForm, method: "POST", headers: { "X-Requested-With": "XMLHttpRequest", }, } ); const responseJson = await response.json(); if (response.ok) { this.dispatchEvent( new CustomEvent("variant:added", { bubbles: true, detail: { variant: responseJson.hasOwnProperty("items") ? responseJson["items"][0] : responseJson, }, }) ); fetch(`${window.themeVariables.routes.cartUrl}.js`).then( async (response2) => { const cartContent = await response2.json(); document.documentElement.dispatchEvent( new CustomEvent("cart:updated", { bubbles: true, detail: { cart: cartContent, }, }) ); cartContent["sections"] = responseJson["sections"]; document.documentElement.dispatchEvent( new CustomEvent("cart:refresh", { bubbles: true, detail: { cart: cartContent, openMiniCart: window.themeVariables.settings.cartType === "drawer", }, }) ); } ); } //Code to handle error of ATC i.e. to show the error notification else { console.log("Desc is: ", responseJson["description"]); let closeButtonHtml = ""; closeButtonHtml = ` `; let cartNotification = document.querySelector('cart-notification') cartNotification.classList.add("cart-notification--error"); cartNotification.innerHTML = `

${responseJson["description"]}

${closeButtonHtml}

`; document.querySelector('cart-notification').removeAttribute('hidden'); setTimeout(() => { document.querySelector('cart-notification').setAttribute('hidden', ''); }, 3000); } }; 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'); const autocompleteFooter = document.querySelector('#st-autocomplete-container #st-after-search .st-autocomplete-footer'); const autocompleteFooterLeftPanel = document.querySelector('#st-autocomplete-container #st-after-search .st-autocomplete-footer .st-left-panel'); if (suggestionsPanel && autocompleteContent && autocompleteFooter && autocompleteFooterLeftPanel) { if (event.detail.data.length === 0) { suggestionsPanel.style.display = 'none'; autocompleteFooterLeftPanel.style.display = 'none'; autocompleteContent.classList.add('st-search-suggestions-hide'); autocompleteFooter.classList.add('st-search-suggestions-hide'); } else { suggestionsPanel.style.display = 'block'; autocompleteContent.classList.remove('st-search-suggestions-hide'); autocompleteFooterLeftPanel.style.display = 'block'; autocompleteFooter.classList.remove('st-search-suggestions-hide'); } } } }); }); window.addEventListener("DOMContentLoaded", () => { let searchInputBoxSelector = document.querySelectorAll( ".st-search-bar .st-search-bar-inner #st-search-box, .st-search-bar input[name='q'], .st-search-box input[name='q'], #st-search-mobile" ); searchInputBoxSelector.forEach((searchInputBox) => { if (searchInputBox) { if (searchInputBox.tagName.toLowerCase() === 'input') { searchInputBox.setAttribute("placeholder", ""); } else { searchInputBox.textContent = ""; } const placeHolderPhrases = [ "Search For Wall Clock", "Search For Wall Art", "Search For Photo Frame" ]; 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 { if (searchInputBox.tagName.toLowerCase() === 'input') { const currentPlaceholderValue = searchInputBox.getAttribute("placeholder"); searchInputBox.setAttribute( "placeholder", currentPlaceholderValue + phrase.charAt(queryIndex) ); } else { const currentText = searchInputBox.textContent; searchInputBox.textContent = currentText + phrase.charAt(queryIndex); } queryIndex++; } }, 100); }; const erasePlaceHolder = function () { if (searchInputBox.tagName.toLowerCase() === 'input') { 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); } else { const currentText = searchInputBox.textContent; const length = currentText.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 newText = currentText.slice(0, queryIndex); searchInputBox.textContent = newText; queryIndex--; } }, 50); } }; updatePlaceHolder(); } }); }); document.addEventListener("DOMContentLoaded", () => { document.addEventListener("stSearchResultsEvent", (event) => { event.detail.data.forEach((product) => { setTimeout(() => { let productElement = document.querySelector(`.st-search-container [data-st-product-id="${product.id}"]`); if (!productElement) return; let imageContainer = productElement.querySelector('.st-image-container'); let addToCartBtn = productElement.querySelector('.st-add-to-cart-root'); if(!addToCartBtn) return; if (!imageContainer || !addToCartBtn) return; imageContainer.appendChild(addToCartBtn); const anchor = imageContainer.closest("a"); const atc = imageContainer.querySelector(".st-add-to-cart-root"); if (!anchor || !atc) return; if (!anchor.contains(imageContainer)) return; anchor.appendChild( imageContainer.querySelector(".st-link") || imageContainer.firstElementChild ); anchor.parentNode.insertBefore(atc, anchor.nextSibling); anchor.parentNode.insertBefore(imageContainer, anchor); imageContainer.appendChild(anchor); imageContainer.appendChild(atc); }, 1000); }); }); });