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", function () { let st_searchIcon = document.querySelectorAll(".st-search-icon"); let st_searchCrossIcon = document.querySelectorAll(".st-search-close-btn"); let st_searchBoxDesktop = document.querySelector(".st-searchbox-visible"); 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); }); }); } function isDeviceMobile() { return window.matchMedia("only screen and (max-width: 768px)").matches; } setTimeout(() => { let st_clientsSearchIcon = document.querySelectorAll("li.search_link"); console.log(st_clientsSearchIcon); if (st_clientsSearchIcon) st_clientsSearchIcon.forEach((x) => { x.addEventListener("click", (e) => { let rootElement = document.documentElement; rootElement.scrollTo({ top: 0, behavior: "smooth", }); setTimeout(() => { toggleStSearchBar(true); }, 300); }); }); }, 300); }); window.addEventListener("DOMContentLoaded", () => { let searchInputBoxSelector = document.querySelectorAll( ".st-search-box input[name='st']" ); searchInputBoxSelector.forEach((searchInputBox) => { if (searchInputBox) { searchInputBox.setAttribute("placeholder", ""); const placeHolderPhrases = [ "Carrot Glow & De-tan Sunscreen", "Vitamin C MATTEFluid Sunscreen", "Ubtan Face Wash", ]; 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', () => { 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'); } } } }); });

Top Offers

AHA+BHA+PHA Range

Pineapple Gentle Resurfacing Serum with AHA, BHA and PHA

5 Ways to Use Hydra Boost Serum Every Day

5 Reasons Lotus Botanicals Beats Other Skin Brands

Why I Trust Lotus Botanicals Over Other Skincare Brands

POPULAR SEARCHES

CAUTION