------------------------------------------------------------------------------------------------------------------------------
UPLOAD SEARCH CSS PREDICTIVE JS FILE IN ASSET FOLDER
<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
--------------------------------------------------------------------------------------------------------------------------------
FIND theme.FormStatus = (function() {
--------------------------------------------------------------------------------------------------------------------------------
/* ADD NEW SEARCH CODE IN MODULE */
window.theme=window.theme||{};theme.SearchResultsTemplate=(function(){function renderResults(products,isLoading,searchQuery){return['<div class="predictive-search">',renderHeader(products,isLoading),renderProducts(products,searchQuery),'</div>'].join('')}function renderHeader(products,isLoading){if(products.length===0){return''}return['<div class="predictive-search-title">','<h3 id="predictive-search" class="predictive-search-title__content">'+theme.strings.products+'</h3>','<span class="predictive-search-title__loading-spinner">'+(isLoading?'<span class= "icon-predictive-search-spinner" ></span >':'')+'</span>','</div>'].join('')}function loadingState(){return['<div class="predictive-search">','<div class="predictive-search-loading">','<span class="visually-hidden">'+theme.strings.loading+'</span>','<span class="predictive-search-loading__icon">','<span class="icon-predictive-search-spinner"></span>','</span>','</div>','</div>'].join('')}function renderViewAll(searchQuery){return['<button type="submit" class="predictive-search-view-all__button" tabindex="-1">',theme.strings.searchFor+'<span class="predictive-search-view-all__query"> “'+_htmlEscape(searchQuery)+'”</span>','</button>'].join('')}function renderProducts(products,searchQuery){var resultsCount=products.length;return['<ul id="predictive-search-results" class="predictive-search__list" role="listbox" aria-labelledby="predictive-search">',products.map(function(product,index){return renderProduct(normalizeProduct(product),index,resultsCount)}).join(''),'<li id="search-all" class="predictive-search-view-all" role="option" data-search-result>'+renderViewAll(searchQuery)+'</li>','</ul>'].join('')}function renderProduct(product,index,resultsCount){return['<li id="search-result-'+index+'" class="predictive-search-item" role="option" data-search-result>','<a class="predictive-search-item__link" href="'+product.url+'" tabindex="-1">','<div class="predictive-search__column predictive-search__column--image" data-image-with-placeholder-wrapper>',renderProductImage(product),'</div>','<div class="predictive-search__column predictive-search__column--content '+(getDetailsCount()?'':'predictive-search__column--center')+'">','<span class="predictive-search-item__title">','<span class="predictive-search-item__title-text">'+product.title+'</span>','</span>'+(getDetailsCount()?renderProductDetails(product):''),'<span class="visually-hidden">, </span>','<span class="visually-hidden">'+getNumberOfResultsString(index+1,resultsCount)+'</span>','</div>','</a>','</li>'].join('')}function renderProductImage(product){if(product.image===null){return''}return['<div class="placeholder-background placeholder-background--animation" data-image-placeholder aria-hidden="true"></div>','<img class="predictive-search-item__image lazyload" src="'+product.image.url+'" data-src="'+product.image.url+'" data-image alt="'+product.image.alt+'" />'].join('')}function renderProductDetails(product){return['<dl class="predictive-search-item__details price'+(product.isOnSale?' price--on-sale':'')+(!product.available?' price--sold-out':'')+(!product.isPriceVaries&&product.isCompareVaries?' price--compare-price-hidden':'')+'">','<div class="predictive-search-item__detail">',renderVendor(product),'</div>','<div class="predictive-search-item__detail predictive-search-item__detail--inline">'+renderProductPrice(product),'</div>','</dl>'].join('')}function renderProductPrice(product){if(!theme.settings.predictiveSearchShowPrice){return''}var accessibilityAnnounceComma='<span class="visually-hidden">, </span>';var priceMarkup='<div class="price__regular">'+renderPrice(product)+'</div>';var salePriceMarkup='<div class="price__sale">'+renderSalePrice(product)+'</div>';return(accessibilityAnnounceComma+'<div class="price__pricing-group">'+(product.isOnSale?salePriceMarkup:priceMarkup)+'</div>')}function renderSalePrice(product){return['<dt>','<span class="visually-hidden">'+theme.strings.salePrice+'</span>','</dt>','<dd>','<span class="predictive-search-item__price predictive-search-item__price--sale">'+(product.isPriceVaries?theme.strings.fromLowestPrice.replace('[price]',product.price):product.price)+'</span>','</dd>','<div class="price__compare">'+renderCompareAtPrice(product)+'</div>'].join('')}function renderCompareAtPrice(product){return['<dt>','<span class="visually-hidden">'+theme.strings.regularPrice+'</span> ','</dt>','<dd>','<span class="predictive-search-item__price predictive-search-item__price--compare">'+product.compareAtPrice+'</span>','</dd>'].join('')}function renderPrice(product){return['<dt>','<span class="visually-hidden">'+theme.strings.regularPrice+'</span>','</dt>','<dd>','<span class="predictive-search-item__price">'+(product.isPriceVaries?theme.strings.fromLowestPrice.replace('[price]',product.price):product.price)+'</span>','</dd>'].join('')}function renderVendor(product){if(!theme.settings.predictiveSearchShowVendor||product.vendor===''){return''}return['<dt>','<span class="visually-hidden">'+theme.strings.vendor+'</span>','</dt>','<dd class="predictive-search-item__vendor">'+product.vendor+'</dd>'].join('')}function normalizeProduct(product){var productOrVariant=product.variants.length>0?product.variants[0]:product;return{url:productOrVariant.url,image:getProductImage(product),title:product.title,vendor:product.vendor||'',price:theme.Currency.formatMoney(product.price_min,theme.moneyFormat),compareAtPrice:theme.Currency.formatMoney(product.compare_at_price_min,theme.moneyFormat),available:product.available,isOnSale:isOnSale(product),isPriceVaries:isPriceVaries(product),isCompareVaries:isCompareVaries(product)}}function getProductImage(product){var image;var featuredImage;if(product.variants.length>0&&product.variants[0].image!==null){featuredImage=product.variants[0].featured_image}else if(product.image){featuredImage=product.featured_image}else{image=null}if(image!==null){image={url:theme.Images.getSizedImageUrl(featuredImage.url,'100x'),alt:featuredImage.alt}}return image}function isOnSale(product){return(product.compare_at_price_min!==null&&parseInt(product.compare_at_price_min,10)>parseInt(product.price_min,10))}function isPriceVaries(product){return product.price_max!==product.price_min}function isCompareVaries(product){return product.compare_at_price_max!==product.compare_at_price_min}function getDetailsCount(){var detailsList=[theme.settings.predictiveSearchShowPrice,theme.settings.predictiveSearchShowVendor];var detailsCount=detailsList.reduce(function(acc,detail){return acc+(detail?1:0)},0);return detailsCount}function getNumberOfResultsString(resultNumber,resultsCount){return theme.strings.number_of_results.replace('[result_number]',resultNumber).replace('[results_count]',resultsCount)}function _htmlEscape(input){return input.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''')}return function(data){var products=data.products||[];var isLoading=data.isLoading;var searchQuery=data.searchQuery||'';if(isLoading&&products.length===0){return loadingState()}return renderResults(products,isLoading,searchQuery)}})();window.theme=window.theme||{};(function(){function numberOfResultsTemplateFct(data){if(data.products.length===1){return theme.strings.one_result_found}else{return theme.strings.number_of_results_found.replace('[results_count]',data.products.length)}}function loadingResultsMessageTemplateFct(){return theme.strings.loading}function isPredictiveSearchSupported(){var shopifyFeatures=JSON.parse($('#shopify-features').text());return shopifyFeatures.predictiveSearch}function isPredictiveSearchEnabled(){return window.theme.settings.predictiveSearchEnabled}function canInitializePredictiveSearch(){return isPredictiveSearchSupported()&&isPredictiveSearchEnabled()}function validateSearchHandler(searchEl,submitEl){submitEl.addEventListener('click',validateSearchInput.bind(this,searchEl))}function validateSearchInput(searchEl,evt){var isInputValueEmpty=searchEl.value.trim().length===0;if(!isInputValueEmpty){return}if(typeof evt!=='undefined'){evt.preventDefault()}searchEl.focus()}window.theme.SearchPage=(function(){var selectors={searchReset:'[data-search-page-predictive-search-clear]',searchInput:'[data-search-page-predictive-search-input]',searchSubmit:'[data-search-page-predictive-search-submit]',searchResults:'[data-predictive-search-mount="default"]'};var componentInstance;var searchInput=document.querySelector(selectors.searchInput);var searchSubmit=document.querySelector(selectors.searchSubmit);function init(config){componentInstance=new window.Shopify.theme.PredictiveSearchComponent({selectors:{input:selectors.searchInput,reset:selectors.searchReset,result:selectors.searchResults},resultTemplateFct:window.theme.SearchResultsTemplate,numberOfResultsTemplateFct:numberOfResultsTemplateFct,loadingResultsMessageTemplateFct:loadingResultsMessageTemplateFct,onOpen:function(nodes){if(config.isTabletAndUp){return}var searchInputBoundingRect=$(selectors.searchInput)[0].getBoundingClientRect();var bodyHeight=$('body').height();var offset=50;var resultsMaxHeight=bodyHeight-searchInputBoundingRect.bottom-offset;$(nodes.result).css({maxHeight:resultsMaxHeight})},onBeforeDestroy:function(nodes){$(nodes.result).css({maxHeight:''})}});validateSearchHandler(searchInput,searchSubmit)}function unload(){if(!componentInstance){return}componentInstance.destroy();componentInstance=null}return{init:init,unload:unload}})();window.theme.SearchHeader=(function(){var selectors={searchInput:'[data-predictive-search-drawer-input]',searchResults:'[data-predictive-search-mount="drawer"]',searchFormContainer:'[data-search-form-container]',searchSubmit:'[data-search-form-submit]'};var componentInstance;var searchInput=document.querySelector(selectors.searchInput);var searchSubmit=document.querySelector(selectors.searchSubmit);function init(config){componentInstance=new window.Shopify.theme.PredictiveSearchComponent({selectors:{input:selectors.searchInput,result:selectors.searchResults},resultTemplateFct:window.theme.SearchResultsTemplate,numberOfResultsTemplateFct:numberOfResultsTemplateFct,numberOfResults:config.numberOfResults,loadingResultsMessageTemplateFct:loadingResultsMessageTemplateFct,onInputBlur:function(){return false},onOpen:function(nodes){var searchInputBoundingRect=$(searchInput)[0].getBoundingClientRect();var maxHeight=window.innerHeight-searchInputBoundingRect.bottom-(config.isTabletAndUp?20:0);$(nodes.result).css({top:config.isTabletAndUp?'':searchInputBoundingRect.bottom,maxHeight:maxHeight})},onClose:function(nodes){$(nodes.result).css({maxHeight:''})},onBeforeDestroy:function(nodes){$(nodes.result).css({top:''})}});validateSearchHandler(searchInput,searchSubmit)}function unload(){if(!componentInstance){return}componentInstance.destroy();componentInstance=null}function clearAndClose(){if(!componentInstance){return}componentInstance.clearAndClose()}return{init:init,unload:unload,clearAndClose:clearAndClose}})();window.theme.Search=(function(){var classes={searchTemplate:'template-search'};var selectors={siteHeader:'.site-header'};var mediaQueryList={mobile:window.matchMedia('(max-width: 749px)'),tabletAndUp:window.matchMedia('(min-width: 750px)')};function init(){if(!$(selectors.siteHeader).length){return}if(!canInitializePredictiveSearch()){return}Object.keys(mediaQueryList).forEach(function(device){mediaQueryList[device].addListener(initSearchAccordingToViewport)});initSearchAccordingToViewport()}function initSearchAccordingToViewport(){theme.SearchDrawer.close();theme.SearchHeader.unload();theme.SearchPage.unload();if(mediaQueryList.mobile.matches){theme.SearchHeader.init({numberOfResults:4,isTabletAndUp:false});if(isSearchPage()){theme.SearchPage.init({isTabletAndUp:false})}}else{theme.SearchHeader.init({numberOfResults:4,isTabletAndUp:true});if(isSearchPage()){theme.SearchPage.init({isTabletAndUp:true})}}}function isSearchPage(){return $('body').hasClass(classes.searchTemplate)}function unload(){theme.SearchHeader.unload();theme.SearchPage.unload()}return{init:init,unload:unload}})()})();window.theme=window.theme||{};theme.SearchDrawer=(function(){var selectors={headerSection:'[data-header-section]',drawer:'[data-predictive-search-drawer]',drawerOpenButton:'[data-predictive-search-open-drawer]',headerSearchInput:'[data-predictive-search-drawer-input]',predictiveSearchWrapper:'[data-predictive-search-mount="drawer"]'};var drawerInstance;function init(){setAccessibilityProps();drawerInstance=new theme.Drawers('SearchDrawer','top',{onDrawerOpen:function(){setHeight();theme.MobileNav.closeMobileNav();lockBodyScroll()},onDrawerClose:function(){theme.SearchHeader.clearAndClose();$(selectors.drawerOpenButton).focus();unlockBodyScroll()},withPredictiveSearch:true,$elementToFocusOnOpen:$(selectors.headerSearchInput)})}function setAccessibilityProps(){$(selectors.drawerOpenButton).attr('aria-controls','SearchDrawer').attr('aria-expanded','false').attr('aria-haspopup','dialog')}function setHeight(){$(selectors.drawer).css({height:$(selectors.headerSection).outerHeight()})}function close(){drawerInstance.close()}function lockBodyScroll(){window.bodyScrollLock.disableBodyScroll(document.querySelector(selectors.predictiveSearchWrapper),{allowTouchMove:function(element){return($(element).parents(selectors.predictiveSearchWrapper).length===1)}})}function unlockBodyScroll(){window.bodyScrollLock.clearAllBodyScrollLocks()}return{init:init,close:close}})();theme.Disclosure=(function(){var selectors={disclosureList:'[data-disclosure-list]',disclosureToggle:'[data-disclosure-toggle]',disclosureInput:'[data-disclosure-input]',disclosureOptions:'[data-disclosure-option]'};var classes={listVisible:'disclosure-list--visible'};function Disclosure($disclosure){this.$container=$disclosure;this.cache={};this._cacheSelectors();this._connectOptions();this._connectToggle();this._onFocusOut()}Disclosure.prototype=_.assignIn({},Disclosure.prototype,{_cacheSelectors:function(){this.cache={$disclosureList:this.$container.find(selectors.disclosureList),$disclosureToggle:this.$container.find(selectors.disclosureToggle),$disclosureInput:this.$container.find(selectors.disclosureInput),$disclosureOptions:this.$container.find(selectors.disclosureOptions)}},_connectToggle:function(){this.cache.$disclosureToggle.on('click',function(evt){var ariaExpanded=$(evt.currentTarget).attr('aria-expanded')==='true';$(evt.currentTarget).attr('aria-expanded',!ariaExpanded);this.cache.$disclosureList.toggleClass(classes.listVisible)}.bind(this))},_connectOptions:function(){this.cache.$disclosureOptions.on('click',function(evt){this._submitForm($(evt.currentTarget).data('value'))}.bind(this))},_onFocusOut:function(){this.cache.$disclosureToggle.on('focusout',function(evt){var disclosureLostFocus=this.$container.has(evt.relatedTarget).length===0;if(disclosureLostFocus){this._hideList()}}.bind(this));this.cache.$disclosureList.on('focusout',function(evt){var childInFocus=$(evt.currentTarget).has(evt.relatedTarget).length>0;var isVisible=this.cache.$disclosureList.hasClass(classes.listVisible);if(isVisible&&!childInFocus){this._hideList()}}.bind(this));this.$container.on('keyup',function(evt){if(evt.which!==slate.utils.keyboardKeys.ESCAPE)return;this._hideList();this.cache.$disclosureToggle.focus()}.bind(this));$('body').on('click',function(evt){var isOption=this.$container.has(evt.target).length>0;var isVisible=this.cache.$disclosureList.hasClass(classes.listVisible);if(isVisible&&!isOption){this._hideList()}}.bind(this))},_submitForm:function(value){this.cache.$disclosureInput.val(value);this.$container.parents('form').submit()},_hideList:function(){this.cache.$disclosureList.removeClass(classes.listVisible);this.cache.$disclosureToggle.attr('aria-expanded',false)},unload:function(){this.cache.$disclosureOptions.off();this.cache.$disclosureToggle.off();this.cache.$disclosureList.off();this.$container.off()}});return Disclosure})();
/*FINISH SEARCH SEARCH CODE */
--------------------------------------------------------------------------------------------------------------------------------
Comments
Post a Comment