https://renpho.com/cdn/shop/t/226/assets/predictive-search.js?v=58726917747049058381783653755

1import{Component}from"@theme/component";import{debounce,onAnimationEnd,prefersReducedMotion,onDocumentLoaded}from"@theme/utilities";import{sectionRenderer}from"@theme/section-renderer";import{morph}from"@theme/morph";import{DialogCloseEvent,DialogOpenEvent}from"@theme/dialog";class RecentlySearched{static#STORAGE_KEY="recentlySearchedTerms";static#MAX_TERMS=10;static addTerm(searchTerm){const normalizedTerm=searchTerm.trim().toLowerCase();if(!normalizedTerm)return;let searchedTerms=this.getTerms();searchedTerms=searchedTerms.filter(term=>term!==normalizedTerm),searchedTerms.unshift(normalizedTerm),searchedTerms=searchedTerms.slice(0,this.#MAX_TERMS),localStorage.setItem(this.#STORAGE_KEY,JSON.stringify(searchedTerms))}static clearTerms(){localStorage.removeItem(this.#STORAGE_KEY)}static getTerms(){return JSON.parse(localStorage.getItem(this.#STORAGE_KEY)||"[]")}}class PredictiveSearchComponent extends Component{requiredRefs=["searchInput","predictiveSearchResults"];#controller=new AbortController;#activeFetch=null;get dialog(){return this.closest("dialog-component")}connectedCallback(){super.connectedCallback();const{dialog}=this,{signal}=this.#controller;dialog&&(document.addEventListener("keydown",this.#handleKeyboardShortcut,{signal}),dialog.addEventListener(DialogCloseEvent.eventName,this.#handleDialogClose,{signal}),dialog.addEventListener(DialogOpenEvent.eventName,this.#handleDialogOpen,{signal}),this.addEventListener("click",this.#handleModalClick,{signal}),this.addEventListener("click",this.#handleResultClick,{signal})),onDocumentLoaded(()=>{this.resetSearch(!1)})}#handleModalClick=event=>{const target=event.target;!(target instanceof HTMLButtonElement||target instanceof HTMLAnchorElement||target instanceof HTMLInputElement||target.closest("button")||target.closest("a")||target.closest("input"))&&this.refs.searchInput&&this.refs.searchInput.focus()};#handleResultClick=event=>{const target=event.target,resultCard=target.closest(".predictive-search-results__card, .predictive-search-product-card"),viewAllButton=target.closest('[data-button-type="view-all"]');if(resultCard||viewAllButton){const searchTerm=this.refs.searchInput.value.trim();searchTerm&&RecentlySearched.addTerm(searchTerm)}};disconnectedCallback(){super.disconnectedCallback(),this.#controller.abort()}#handleKeyboardShortcut=event=>{event.metaKey&&event.key==="k"&&this.dialog?.toggleDialog()};#handleDialogOpen=()=>{const tryRender=()=>{this.refs.searchInput.value.trim()||(this.#renderRecentlySearchedTerms(),this.#renderRecommendedKeywords())};requestAnimationFrame(()=>{tryRender(),setTimeout(tryRender,100)})};#handleDialogClose=()=>{this.#resetSearch()};get#allResultsItems(){return Array.from(this.querySelectorAll(".predictive-search-results__wrapper-queries, .predictive-search-results__wrapper-products, .predictive-search-results__list")).flatMap(container=>container.classList.contains("predictive-search-results__wrapper-products")?Array.from(container.querySelectorAll(".predictive-search-results__card")):Array.from(container.querySelectorAll('[ref="resultsItems[]"], .predictive-search-results__card'))).filter(item=>item instanceof HTMLElement)}#isKeyboardNavigation=!1;get#currentIndex(){return this.#allResultsItems?.findIndex(item=>item.getAttribute("aria-selected")==="true")??-1}set#currentIndex(index){if(this.#allResultsItems?.length){this.#allResultsItems.forEach(item=>{item.classList.remove("keyboard-focus")});for(const[itemIndex,item]of this.#allResultsItems.entries())itemIndex===index?(item.setAttribute("aria-selected","true"),this.#isKeyboardNavigation&&item.classList.add("keyboard-focus"),item.scrollIntoView({behavior:prefersReducedMotion()?"instant":"smooth",block:"nearest"})):item.removeAttribute("aria-selected");this.refs.searchInput.focus()}}get#currentItem(){return this.#allResultsItems?.[this.#currentIndex]}onSearchKeyDown=event=>{if(event.key==="Escape"){this.#resetSearch();return}const autocompleteElement=this.querySelector('[ref="searchAutocomplete"]'),suggestion=autocompleteElement?.dataset.suggestion;if(suggestion&&this.#currentIndex===-1){if(event.key==="Tab"&&!event.shiftKey){event.preventDefault(),this.refs.searchInput.value=suggestion,autocompleteElement.textContent="",delete autocompleteElement.dataset.suggestion,this.#getSearchResults(suggestion);return}if(event.key==="ArrowRight"){const input=this.refs.searchInput;if(input.selectionStart===input.value.length){event.preventDefault(),this.refs.searchInput.value=suggestion,autocompleteElement.textContent="",delete autocompleteElement.dataset.suggestion,this.#getSearchResults(suggestion);return}}}if(!this.#allResultsItems?.length||event.key==="ArrowLeft"||event.key==="ArrowRight"&&this.#currentIndex===-1)return;const currentIndex=this.#currentIndex,totalItems=this.#allResultsItems.length;switch(event.key){case"ArrowDown":this.#isKeyboardNavigation=!0,event.preventDefault(),this.#currentIndex=currentIndex<totalItems-1?currentIndex+1:0;break;case"Tab":event.shiftKey?(this.#isKeyboardNavigation=!0,event.preventDefault(),this.#currentIndex=currentIndex>0?currentIndex-1:totalItems-1):(this.#isKeyboardNavigation=!0,event.preventDefault(),this.#currentIndex=currentIndex<totalItems-1?currentIndex+1:0);break;case"ArrowUp":this.#isKeyboardNavigation=!0,event.preventDefault(),this.#currentIndex=currentIndex>0?currentIndex-1:totalItems-1;break;case"Enter":{const singleResultContainer=this.refs.predictiveSearchResults.querySelector("[data-single-result-url]");if(singleResultContainer instanceof HTMLElement&&singleResultContainer.dataset.singleResultUrl){event.preventDefault();const searchTerm=this.refs.searchInput.value.trim();searchTerm&&RecentlySearched.addTerm(searchTerm),window.location.href=singleResultContainer.dataset.singleResultUrl;return}if(this.#currentIndex>=0){event.preventDefault();const searchTerm=this.refs.searchInput.value.trim();searchTerm&&RecentlySearched.addTerm(searchTerm),this.#currentItem?.querySelector("a")?.click()}else{const searchTerm=this.refs.searchInput.value.trim();searchTerm&&RecentlySearched.addTerm(searchTerm);const searchUrl=new URL(Theme.routes.search_url,location.origin);searchUrl.searchParams.set("q",searchTerm),window.location.href=searchUrl.toString()}break}}};clearRecentlySearched(event){event.stopPropagation(),RecentlySearched.clearTerms();const{recentlySearchedWrapper}=this.refs;recentlySearchedWrapper&&(recentlySearchedWrapper.classList.add("removing"),onAnimationEnd(recentlySearchedWrapper,()=>{recentlySearchedWrapper.remove()}))}resetSearch=debounce((keepFocus=!0)=>{keepFocus&&this.refs.searchInput.focus(),this.#resetSearch()},100);search=debounce(event=>{if(!event.inputType)return;const searchTerm=this.refs.searchInput.value.trim();if(this.#currentIndex=-1,!searchTerm.length){this.#resetSearch();const autocompleteElement=this.querySelector('[ref="searchAutocomplete"]');autocompleteElement&&(autocompleteElement.textContent="",delete autocompleteElement.dataset.suggestion);return}this.#getSearchResults(searchTerm)},150);#updateViewAllButton(searchTerm){const viewAllButton=this.querySelector('[data-button-type="view-all"]');

1if(viewAllButton instanceof HTMLElement&&searchTerm){const translationKey=Theme.translations?.search_results_view_all_for||'View all Search Results for "{{ query }}"',tempTextarea=document.createElement("textarea");tempTextarea.innerHTML=translationKey;const buttonText=(tempTextarea.value||translationKey).replace("{{ query }}",searchTerm),textSpan=viewAllButton.querySelector(".predictive-search__search-button-text");textSpan&&(textSpan.textContent=buttonText)}this.#updateCollectionButton(),this.#renderRecommendedKeywordsInSearch()}#updateCollectionButton(){const collectionButton=this.querySelector('[data-button-type="collection"]'),resultsInner=this.refs.predictiveSearchResults.querySelector(".predictive-search-results__inner");if(!collectionButton||!resultsInner)return;const collectionTitle=resultsInner.dataset.firstCollectionTitle,collectionUrl=resultsInner.dataset.firstCollectionUrl;if(collectionTitle&&collectionUrl){const textSpan=collectionButton.querySelector(".predictive-search__search-button-text");if(textSpan){const translationKey=Theme.translations?.view_collection||"View {{ collection }}",tempTextarea=document.createElement("textarea");tempTextarea.innerHTML=translationKey;const buttonText=(tempTextarea.value||translationKey).replace("{{ collection }}",collectionTitle);textSpan.textContent=buttonText}collectionButton.href=collectionUrl,collectionButton.style.display=""}else collectionButton.style.display="none"}#resetScrollPositions(){requestAnimationFrame(()=>{const resultsInner=this.refs.predictiveSearchResults.querySelector(".predictive-search-results__inner");resultsInner instanceof HTMLElement&&(resultsInner.scrollTop=0);const formContent=this.querySelector(".predictive-search-form__content");formContent instanceof HTMLElement&&(formContent.scrollTop=0)})}async#getSearchResults(searchTerm){if(!this.dataset.sectionId)return;const url=new URL(Theme.routes.predictive_search_url,location.origin);url.searchParams.set("q",searchTerm),url.searchParams.set("resources[limit_scope]","each");const{predictiveSearchResults}=this.refs,abortController=this.#createAbortController();sectionRenderer.getSectionHTML(this.dataset.sectionId,!1,url).then(resultsMarkup=>{resultsMarkup&&(abortController.signal.aborted||(this.#updateAutocomplete(searchTerm,resultsMarkup),morph(predictiveSearchResults,resultsMarkup),this.#highlightSearchTerm(searchTerm),this.#updateViewAllButton(searchTerm),this.#resetScrollPositions()))}).catch(error=>{if(!abortController.signal.aborted)throw error})}#updateAutocomplete(searchTerm,resultsMarkup){const autocompleteElement=this.querySelector('[ref="searchAutocomplete"]');if(!autocompleteElement)return;const tempDiv=document.createElement("div");tempDiv.innerHTML=resultsMarkup;const firstQuery=tempDiv.querySelector(".predictive-search-results__card--query a");if(!firstQuery){requestAnimationFrame(()=>{autocompleteElement.textContent="",delete autocompleteElement.dataset.suggestion});return}const fullSuggestion=firstQuery.getAttribute("aria-label")||firstQuery.textContent.trim(),searchTermLower=searchTerm.toLowerCase();if(fullSuggestion.toLowerCase().startsWith(searchTermLower)&&fullSuggestion.length>searchTerm.length){const typedPart=searchTerm,suggestionPart=fullSuggestion.substring(searchTerm.length);requestAnimationFrame(()=>{autocompleteElement.textContent="";const span=document.createElement("span");span.style.color="transparent",span.textContent=typedPart,autocompleteElement.appendChild(span),autocompleteElement.appendChild(document.createTextNode(suggestionPart)),autocompleteElement.dataset.suggestion=fullSuggestion})}else requestAnimationFrame(()=>{autocompleteElement.textContent="",delete autocompleteElement.dataset.suggestion})}#highlightSearchTerm(searchTerm){if(!searchTerm||searchTerm.length<2)return;const productCards=this.querySelectorAll(".predictive-search-product-card"),searchTermLower=searchTerm.toLowerCase();productCards.forEach(card=>{const title=card.querySelector(".predictive-search-product-card__title");if(title&&title.textContent){const originalText=title.textContent,index=originalText.toLowerCase().indexOf(searchTermLower);

1if(index!==-1){const before=originalText.substring(0,index),match=originalText.substring(index,index+searchTerm.length),after=originalText.substring(index+searchTerm.length);title.textContent="",title.appendChild(document.createTextNode(before));const span=document.createElement("span");span.style.fontWeight="700",span.textContent=match,title.appendChild(span),title.appendChild(document.createTextNode(after))}}const description=card.querySelector(".predictive-search-product-card__description");if(description&&description.textContent){const originalText=description.textContent,index=originalText.toLowerCase().indexOf(searchTermLower);if(index!==-1){const before=originalText.substring(0,index),match=originalText.substring(index,index+searchTerm.length),after=originalText.substring(index+searchTerm.length);description.textContent="",description.appendChild(document.createTextNode(before));const span=document.createElement("span");span.style.fontWeight="700",span.textContent=match,description.appendChild(span),description.appendChild(document.createTextNode(after))}}})}#renderRecentlySearchedTerms(){const recentlySearchedWrapper=this.querySelector('[ref="recentlySearchedWrapper"]'),recentlySearchedTerms=this.querySelector('[ref="recentlySearchedTerms"]');if(!recentlySearchedTerms||!recentlySearchedWrapper)return;const searchedTerms=RecentlySearched.getTerms();if(searchedTerms.length===0){recentlySearchedWrapper.style.display="none";return}recentlySearchedWrapper.style.display="block",recentlySearchedTerms.innerHTML="",searchedTerms.forEach(term=>{const pill=document.createElement("a");pill.className="recently-searched-terms__pill",pill.href=`${Theme.routes.search_url}?q=${encodeURIComponent(term)}`,pill.textContent=term.charAt(0).toUpperCase()+term.slice(1),recentlySearchedTerms.appendChild(pill)})}#renderRecommendedKeywords(){const recommendedProductsWrapper=this.querySelector('[ref="recommendedProductsWrapper"]'),recommendedProductsTerms=this.querySelector('[ref="recommendedProductsTerms"]');if(!recommendedProductsTerms||!recommendedProductsWrapper)return;const keywordsString=Theme.settings?.recommended_keywords||"";if(!keywordsString.trim()){recommendedProductsWrapper.style.display="none";return}const keywords=keywordsString.split(",").map(k=>k.trim()).filter(k=>k.length>0);if(keywords.length===0){recommendedProductsWrapper.style.display="none";return}recommendedProductsWrapper.style.display="block",recommendedProductsTerms.innerHTML="",keywords.forEach(keyword=>{const pill=document.createElement("a");pill.className="recommended-products-terms__pill",pill.href=`${Theme.routes.search_url}?q=${encodeURIComponent(keyword)}`,pill.textContent=keyword,recommendedProductsTerms.appendChild(pill)})}#renderRecommendedKeywordsInSearch(){const recommendedProductsWrapper=this.querySelector('[ref="recommendedProductsWrapperSearch"]'),recommendedProductsTerms=this.querySelector('[ref="recommendedProductsTermsSearch"]');if(!recommendedProductsTerms||!recommendedProductsWrapper)return;const queryResults=this.refs.predictiveSearchResults.querySelectorAll(".predictive-search-results__card--query a");if(queryResults.length>0)recommendedProductsWrapper.style.display="block",recommendedProductsTerms.innerHTML="",queryResults.forEach(queryLink=>{const keyword=queryLink.getAttribute("aria-label")||queryLink.textContent.trim(),href=queryLink.getAttribute("href")||"";if(keyword&&href){const pill=document.createElement("a");pill.className="recommended-products-terms__pill",pill.href=href,pill.textContent=keyword,recommendedProductsTerms.appendChild(pill)}});

1else{const keywordsString=Theme.settings?.recommended_keywords||"";if(!keywordsString.trim()){recommendedProductsWrapper.style.display="none";return}const keywords=keywordsString.split(",").map(k=>k.trim()).filter(k=>k.length>0);if(keywords.length===0){recommendedProductsWrapper.style.display="none";return}recommendedProductsWrapper.style.display="block",recommendedProductsTerms.innerHTML="",keywords.forEach(keyword=>{const pill=document.createElement("a");pill.className="recommended-products-terms__pill",pill.href=`${Theme.routes.search_url}?q=${encodeURIComponent(keyword)}`,pill.textContent=keyword,recommendedProductsTerms.appendChild(pill)})}}#createAbortController(){const abortController=new AbortController;return this.#activeFetch&&this.#activeFetch.abort(),this.#activeFetch=abortController,abortController}#resetSearch=async()=>{const{predictiveSearchResults,searchInput}=this.refs,emptySectionId="predictive-search-empty";this.#currentIndex=-1,searchInput.value="";const autocompleteElement=this.querySelector('[ref="searchAutocomplete"]');autocompleteElement&&(autocompleteElement.textContent="",delete autocompleteElement.dataset.suggestion);const abortController=this.#createAbortController(),url=new URL(window.location.href);url.searchParams.delete("page");const emptySectionMarkup=await sectionRenderer.getSectionHTML(emptySectionId,!1,url),parsedEmptySectionMarkup=new DOMParser().parseFromString(emptySectionMarkup,"text/html").querySelector(".predictive-search-empty-section");if(!parsedEmptySectionMarkup)throw new Error("No empty section markup found");if(abortController.signal.aborted)return;morph(predictiveSearchResults,parsedEmptySectionMarkup);const collectionButton=this.querySelector('[data-button-type="collection"]');collectionButton&&(collectionButton.style.display="none");const recommendedSearchWrapper=this.querySelector('[ref="recommendedProductsWrapperSearch"]');recommendedSearchWrapper&&(recommendedSearchWrapper.style.display="none"),this.#renderRecentlySearchedTerms(),this.#renderRecommendedKeywords(),this.#resetScrollPositions()}}customElements.get("predictive-search-component")||customElements.define("predictive-search-component",PredictiveSearchComponent);
2//# sourceMappingURL=/cdn/shop/t/226/assets/predictive-search.js.map?v=58726917747049058381783653755