Predictive Search JS IN THMEJS SLATE PART AFTER VARIANT CODE

- 



 ------------------------------------------------------------------------------------------------------------------------------
UPLOAD SEARCH CSS PREDICTIVE JS FILE IN ASSET FOLDER
<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
--------------------------------------------------------------------------------------------------------------------------------
FIND  slate.Variants = (function() {
--------------------------------------------------------------------------------------------------------------------------------
/* ADD NEW SEARCH CODE IN SLATE */
this.Shopify=this.Shopify||{},this.Shopify.theme=this.Shopify.theme||{},this.Shopify.theme.PredictiveSearch=function(){"use strict";function l(){var e=Error.call(this);return e.name="Server error",e.message="Something went wrong on the server",e.status=500,e}function h(e){var t=Error.call(this);return t.name="Not found",t.message="Not found",t.status=e,t}function p(){var e=Error.call(this);return e.name="Server error",e.message="Something went wrong on the server",e.status=500,e}function d(e){var t=Error.call(this);return t.name="Content-Type error",t.message="Content-Type was not provided or is of wrong type",t.status=e,t}function y(e){var t=Error.call(this);return t.name="JSON parse error",t.message="JSON syntax error",t.status=e,t}function f(e,t,s,i){var n=Error.call(this);return n.name=t,n.message=s,n.status=e,n.retryAfter=i,n}function v(e,t,s){var i=Error.call(this);return i.name=t,i.message=s,i.status=e,i}function b(e,t,s){var i=Error.call(this);return i.name=t,i.message=s,i.status=e,i}function t(e){this._store={},this._keys=[],e&&e.bucketSize?this.bucketSize=e.bucketSize:this.bucketSize=20}function s(){this.events={}}function i(e){this.eventName=e,this.callbacks=[]}function o(i,n){var r="";return n=n||null,Object.keys(i).forEach(function(e){var t,s=n?n+"["+e+"]":e+"=";switch(t=i[e],Object.prototype.toString.call(t).slice(8,-1).toLowerCase()){case"object":r+=o(i[e],n?s:e);break;case"array":r+=s+"="+i[e].join(",")+"&";break;default:n&&(s+="="),r+=s+encodeURIComponent(i[e])+"&"}}),r}t.prototype.set=function(e,t){var s;return this.count()>=this.bucketSize&&(s=this._keys.splice(0,1),this.delete(s)),this._keys.push(e),this._store[e]=t,this._store},t.prototype.get=function(e){return this._store[e]},t.prototype.has=function(e){return Boolean(this._store[e])},t.prototype.count=function(){return Object.keys(this._store).length},t.prototype.delete=function(e){var t=Boolean(this._store[e]);return delete this._store[e],t&&!this._store[e]},s.prototype.on=function(e,t){var s=this.events[e];s||(s=new i(e),this.events[e]=s),s.registerCallback(t)},s.prototype.off=function(e,t){var s=this.events[e];s&&-1<s.callbacks.indexOf(t)&&(s.unregisterCallback(t),0===s.callbacks.length&&delete this.events[e])},s.prototype.dispatch=function(e,t){e=this.events[e];e&&e.fire(t)},i.prototype.registerCallback=function(e){this.callbacks.push(e)},i.prototype.unregisterCallback=function(e){e=this.callbacks.indexOf(e);-1<e&&this.callbacks.splice(e,1)},i.prototype.fire=function(t){this.callbacks.slice(0).forEach(function(e){e(t)})};var n,r,a,u=(n=function(e,o,a,u){var c=new XMLHttpRequest;c.onreadystatechange=function(){if(c.readyState===XMLHttpRequest.DONE){var e=c.getResponseHeader("Content-Type");if(500<=c.status)u(new p);else if(404!==c.status)if("string"==typeof e&&null!==e.toLowerCase().match("application/json"))if(417!==c.status)if(422!==c.status)if(429!==c.status)if(200!==c.status)try{var t=JSON.parse(c.responseText);u(new l(c.status,t.message,t.description))}catch(e){u(new y(c.status))}else try{var s=JSON.parse(c.responseText);s.query=o,a(s)}catch(e){u(new y(c.status))}else try{var i=JSON.parse(c.responseText);u(new f(c.status,i.message,i.description,c.getResponseHeader("Retry-After")))}catch(e){u(new y(c.status))}else try{var n=JSON.parse(c.responseText);u(new b(c.status,n.message,n.description))}catch(e){u(new y(c.status))}else try{var r=JSON.parse(c.responseText);u(new v(c.status,r.message,r.description))}catch(e){u(new y(c.status))}else u(new d(c.status));else u(new h(c.status))}},c.open("get","/search/suggest.json?q="+encodeURIComponent(o)+"&"+e),c.setRequestHeader("Content-Type","application/json"),c.send()},r=10,a=null,function(){var e=this,t=arguments;clearTimeout(a),a=setTimeout(function(){a=null,n.apply(e,t)},r||0)});function e(e){if(!e)throw new TypeError("No config object was specified");this._retryAfter=null,this._currentQuery=null,this.dispatcher=new s,this.cache=new t({bucketSize:40}),this.configParams=o(e)}function c(e){return"string"!=typeof e?null:e.trim().replace(" ","-").toLowerCase()}return e.TYPES={PRODUCT:"product",PAGE:"page",ARTICLE:"article"},e.FIELDS={AUTHOR:"author",BODY:"body",PRODUCT_TYPE:"product_type",TAG:"tag",TITLE:"title",VARIANTS_BARCODE:"variants.barcode",VARIANTS_SKU:"variants.sku",VARIANTS_TITLE:"variants.title",VENDOR:"vendor"},e.UNAVAILABLE_PRODUCTS={SHOW:"show",HIDE:"hide",LAST:"last"},e.prototype.query=function(e){try{!function(e){var t;if(null==e)throw(t=new TypeError("'query' is missing")).type="argument",t;if("string"!=typeof e)throw(t=new TypeError("'query' is not a string")).type="argument",t}(e)}catch(e){return void this.dispatcher.dispatch("error",e)}if(""===e)return this;this._currentQuery=c(e);var t=this.cache.get(this._currentQuery);return t?this.dispatcher.dispatch("success",t):u(this.configParams,e,function(e){this.cache.set(c(e.query),e),c(e.query)===this._currentQuery&&(this._retryAfter=null,this.dispatcher.dispatch("success",e))}.bind(this),function(e){e.retryAfter&&(this._retryAfter=e.retryAfter),this.dispatcher.dispatch("error",e)}.bind(this)),this},e.prototype.on=function(e,t){return this.dispatcher.on(e,t),this},e.prototype.off=function(e,t){return this.dispatcher.off(e,t),this},e}(),this.Shopify=this.Shopify||{},this.Shopify.theme=this.Shopify.theme||{},this.Shopify.theme.PredictiveSearchComponent=function(s){"use strict";var i={resources:{type:[(s=s&&s.hasOwnProperty("default")?s.default:s).TYPES.PRODUCT],options:{unavailable_products:s.UNAVAILABLE_PRODUCTS.LAST,fields:[s.FIELDS.TITLE,s.FIELDS.VENDOR,s.FIELDS.PRODUCT_TYPE,s.FIELDS.VARIANTS_TITLE]}}};function e(e){if(!(e&&e.selectors&&e.selectors.input&&n(e.selectors.input)&&e.selectors.result&&n(e.selectors.result)&&e.resultTemplateFct&&o(e.resultTemplateFct)&&e.numberOfResultsTemplateFct&&o(e.numberOfResultsTemplateFct)&&e.loadingResultsMessageTemplateFct&&o(e.loadingResultsMessageTemplateFct))){var t=new TypeError("PredictiveSearchComponent config is not valid");throw t.type="argument",t}this.nodes=(t=e.selectors,{input:document.querySelector(t.input),reset:document.querySelector(t.reset),result:document.querySelector(t.result)}),(t=this.nodes)&&t.input&&t.result&&"INPUT"===t.input.tagName?(this._searchKeyword="",this.resultTemplateFct=e.resultTemplateFct,this.numberOfResultsTemplateFct=e.numberOfResultsTemplateFct,this.loadingResultsMessageTemplateFct=e.loadingResultsMessageTemplateFct,this.numberOfResults=e.numberOfResults||4,this.classes={visibleVariant:e.visibleVariant||"predictive-search-wrapper--visible",itemSelected:e.itemSelectedClass||"predictive-search-item--selected",clearButtonVisible:e.clearButtonVisibleClass||"predictive-search__clear-button--visible"},this.selectors={searchResult:e.searchResult||"[data-search-result]"},this.callbacks={onBodyMousedown:(t=e).onBodyMousedown,onBeforeOpen:t.onBeforeOpen,onOpen:t.onOpen,onBeforeClose:t.onBeforeClose,onClose:t.onClose,onInputFocus:t.onInputFocus,onInputKeyup:t.onInputKeyup,onInputBlur:t.onInputBlur,onInputReset:t.onInputReset,onBeforeDestroy:t.onBeforeDestroy,onDestroy:t.onDestroy},(t=this.nodes.input).setAttribute("autocorrect","off"),t.setAttribute("autocomplete","off"),t.setAttribute("autocapitalize","off"),t.setAttribute("spellcheck","false"),this._addInputEventListeners(),this._addBodyEventListener(),this._addAccessibilityAnnouncer(),this._toggleClearButtonVisibility(),this.predictiveSearch=new s(e.PredictiveSearchAPIConfig||i),this.predictiveSearch.on("success",this._handlePredictiveSearchSuccess.bind(this)),this.predictiveSearch.on("error",this._handlePredictiveSearchError.bind(this))):console.warn("Could not find valid nodes")}function t(e){return Object.prototype.toString.call(e)}function n(e){return"[object String]"===t(e)}function r(e){return"[object Boolean]"===t(e)}function o(e){return"[object Function]"===t(e)}return e.prototype.isResultVisible=!1,e.prototype.results={},e.prototype._latencyTimer=null,e.prototype._resultNodeClicked=!1,e.prototype._addInputEventListeners=function(){var e=this.nodes.input,t=this.nodes.reset;e&&(this._handleInputFocus=this._handleInputFocus.bind(this),this._handleInputBlur=this._handleInputBlur.bind(this),this._handleInputKeyup=this._handleInputKeyup.bind(this),this._handleInputKeydown=this._handleInputKeydown.bind(this),e.addEventListener("focus",this._handleInputFocus),e.addEventListener("blur",this._handleInputBlur),e.addEventListener("keyup",this._handleInputKeyup),e.addEventListener("keydown",this._handleInputKeydown),t&&(this._handleInputReset=this._handleInputReset.bind(this),t.addEventListener("click",this._handleInputReset)))},e.prototype._removeInputEventListeners=function(){var e=this.nodes.input;e.removeEventListener("focus",this._handleInputFocus),e.removeEventListener("blur",this._handleInputBlur),e.removeEventListener("keyup",this._handleInputKeyup),e.removeEventListener("keydown",this._handleInputKeydown)},e.prototype._addBodyEventListener=function(){this._handleBodyMousedown=this._handleBodyMousedown.bind(this),document.querySelector("body").addEventListener("mousedown",this._handleBodyMousedown)},e.prototype._removeBodyEventListener=function(){document.querySelector("body").removeEventListener("mousedown",this._handleBodyMousedown)},e.prototype._removeClearButtonEventListener=function(){var e=this.nodes.reset;e&&e.removeEventListener("click",this._handleInputReset)},e.prototype._handleBodyMousedown=function(e){this.isResultVisible&&null!==this.nodes&&(e.target.isEqualNode(this.nodes.input)||this.nodes.input.contains(e.target)||e.target.isEqualNode(this.nodes.result)||this.nodes.result.contains(e.target)?this._resultNodeClicked=!0:(!o(this.callbacks.onBodyMousedown)||r(e=this.callbacks.onBodyMousedown(this.nodes))&&e)&&this.close())},e.prototype._handleInputFocus=function(e){if(o(this.callbacks.onInputFocus)){var t=this.callbacks.onInputFocus(this.nodes);if(r(t)&&!t)return!1}return 0<e.target.value.length&&this._search(),!0},e.prototype._handleInputBlur=function(){return setTimeout(function(){if(o(this.callbacks.onInputBlur)){var e=this.callbacks.onInputBlur(this.nodes);if(r(e)&&!e)return!1}return!document.activeElement.isEqualNode(this.nodes.reset)&&(this._resultNodeClicked?this._resultNodeClicked=!1:void this.close())}.bind(this)),!0},e.prototype._addAccessibilityAnnouncer=function(){this._accessibilityAnnouncerDiv=window.document.createElement("div"),this._accessibilityAnnouncerDiv.setAttribute("style","position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0;"),this._accessibilityAnnouncerDiv.setAttribute("data-search-announcer",""),this._accessibilityAnnouncerDiv.setAttribute("aria-live","polite"),this._accessibilityAnnouncerDiv.setAttribute("aria-atomic","true"),this.nodes.result.parentElement.appendChild(this._accessibilityAnnouncerDiv)},e.prototype._removeAccessibilityAnnouncer=function(){this.nodes.result.parentElement.removeChild(this._accessibilityAnnouncerDiv)},e.prototype._updateAccessibilityAttributesAfterSelectingElement=function(e,t){this.nodes.input.setAttribute("aria-activedescendant",t.id),e&&e.removeAttribute("aria-selected"),t.setAttribute("aria-selected",!0)},e.prototype._clearAriaActiveDescendant=function(){this.nodes.input.setAttribute("aria-activedescendant","")},e.prototype._announceNumberOfResultsFound=function(e){var t=this._accessibilityAnnouncerDiv.innerHTML,e=this.numberOfResultsTemplateFct(e);t===e&&(e+="&nbsp;"),this._accessibilityAnnouncerDiv.innerHTML=e},e.prototype._announceLoadingState=function(){this._accessibilityAnnouncerDiv.innerHTML=this.loadingResultsMessageTemplateFct()},e.prototype._handleInputKeyup=function(e){if(o(this.callbacks.onInputKeyup)){var t=this.callbacks.onInputKeyup(this.nodes);if(r(t)&&!t)return!1}if(this._toggleClearButtonVisibility(),this.isResultVisible&&null!==this.nodes){if(38===e.keyCode)return this._navigateOption(e,"UP"),!0;if(40===e.keyCode)return this._navigateOption(e,"DOWN"),!0;if(13===e.keyCode)return this._selectOption(),!0;27===e.keyCode&&this.close()}return e.target.value.length<=0?(this.close(),this._setKeyword("")):0<e.target.value.length&&this._search(),!0},e.prototype._handleInputKeydown=function(e){13===e.keyCode&&null!==this._getSelectedOption()&&e.preventDefault(),38!==e.keyCode&&40!==e.keyCode||e.preventDefault()},e.prototype._handleInputReset=function(e){if(e.preventDefault(),o(this.callbacks.onInputReset)){e=this.callbacks.onInputReset(this.nodes);if(r(e)&&!e)return!1}return this.nodes.input.value="",this.nodes.input.focus(),this._toggleClearButtonVisibility(),this.close(),!0},e.prototype._navigateOption=function(e,t){var s,i=this._getSelectedOption();i?"DOWN"===t?(t=i.nextElementSibling)&&(i.classList.remove(this.classes.itemSelected),t.classList.add(this.classes.itemSelected),this._updateAccessibilityAttributesAfterSelectingElement(i,t)):(s=i.previousElementSibling)&&(i.classList.remove(this.classes.itemSelected),s.classList.add(this.classes.itemSelected),this._updateAccessibilityAttributesAfterSelectingElement(i,s)):((s=this.nodes.result.querySelector(this.selectors.searchResult)).classList.add(this.classes.itemSelected),this._updateAccessibilityAttributesAfterSelectingElement(null,s))},e.prototype._getSelectedOption=function(){return this.nodes.result.querySelector("."+this.classes.itemSelected)},e.prototype._selectOption=function(){var e=this._getSelectedOption();e&&e.querySelector("a, button").click()},e.prototype._search=function(){var e=this.nodes.input.value;this._searchKeyword!==e&&(clearTimeout(this._latencyTimer),this._latencyTimer=setTimeout(function(){this.results.isLoading=!0,this._announceLoadingState(),this.nodes.result.classList.add(this.classes.visibleVariant),this.nodes.result.innerHTML=this.resultTemplateFct(this.results)}.bind(this),500),this.predictiveSearch.query(e),this._setKeyword(e))},e.prototype._handlePredictiveSearchSuccess=function(e){clearTimeout(this._latencyTimer),this.results=e.resources.results,this.results.isLoading=!1,this.results.products=this.results.products.slice(0,this.numberOfResults),this.results.canLoadMore=this.numberOfResults<=this.results.products.length,this.results.searchQuery=this.nodes.input.value,0<this.results.products.length||this.results.searchQuery?(this.nodes.result.innerHTML=this.resultTemplateFct(this.results),this._announceNumberOfResultsFound(this.results),this.open()):(this.nodes.result.innerHTML="",this._closeOnNoResults())},e.prototype._handlePredictiveSearchError=function(){clearTimeout(this._latencyTimer),this.nodes.result.innerHTML="",this._closeOnNoResults()},e.prototype._closeOnNoResults=function(){this.nodes&&this.nodes.result.classList.remove(this.classes.visibleVariant),this.isResultVisible=!1},e.prototype._setKeyword=function(e){this._searchKeyword=e},e.prototype._toggleClearButtonVisibility=function(){this.nodes.reset&&(0<this.nodes.input.value.length?this.nodes.reset.classList.add(this.classes.clearButtonVisible):this.nodes.reset.classList.remove(this.classes.clearButtonVisible))},e.prototype.open=function(){if(!this.isResultVisible){if(o(this.callbacks.onBeforeOpen)){var e=this.callbacks.onBeforeOpen(this.nodes);if(r(e)&&!e)return!1}return this.nodes.result.classList.add(this.classes.visibleVariant),this.nodes.input.setAttribute("aria-expanded",!0),this.isResultVisible=!0,o(this.callbacks.onOpen)&&this.callbacks.onOpen(this.nodes)||!0}},e.prototype.close=function(){if(!this.isResultVisible)return!0;if(o(this.callbacks.onBeforeClose)){var e=this.callbacks.onBeforeClose(this.nodes);if(r(e)&&!e)return!1}return this.nodes&&this.nodes.result.classList.remove(this.classes.visibleVariant),this.nodes.input.setAttribute("aria-expanded",!1),this._clearAriaActiveDescendant(),this._setKeyword(""),o(this.callbacks.onClose)&&this.callbacks.onClose(this.nodes),this.isResultVisible=!1,this.results={},!0},e.prototype.destroy=function(){if(this.close(),o(this.callbacks.onBeforeDestroy)){var e=this.callbacks.onBeforeDestroy(this.nodes);if(r(e)&&!e)return!1}return this.nodes.result.classList.remove(this.classes.visibleVariant),(e=this.nodes.input).removeAttribute("autocorrect","off"),e.removeAttribute("autocomplete","off"),e.removeAttribute("autocapitalize","off"),e.removeAttribute("spellcheck","false"),this._removeInputEventListeners(),this._removeBodyEventListener(),this._removeAccessibilityAnnouncer(),this._removeClearButtonEventListener(),o(this.callbacks.onDestroy)&&this.callbacks.onDestroy(this.nodes),!0},e.prototype.clearAndClose=function(){this.nodes.input.value="",this.close()},e}(Shopify.theme.PredictiveSearch);
/*FINISH SEARCH SEARCH CODE */
--------------------------------------------------------------------------------------------------------------------------------














































Comments











Post a Comment



















Popular posts from this blog









ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY DEBUT THEME 5️⃣






-














Image







  ------------------------------------------------------------------------------------------------------------------------ ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY READ MORE https://youtu.be/acTT5_lkrCg https://stackoverflow.com/questions/45477730/ajax-jquery-autocomplete-in-search-box-shopify https://stackoverflow.com/questions/39593169/sorting-json-results-by-10-max-results DOWNLOAD: https://fbgadgets.myshopify.com/admin/files/0e841afc73cd3152ebf447feabe7abfa/theme_export__fbgadgets-myshopify-com-shopify-debut-theme__05JUL2022-0654am.zip/download ------------------------------------------------------------------------------------------------------------------------ 1) NEEDS JQUERY FILE WITHOUT ASYNC OR DEFFER IN LINK LIKE <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> --> OR CHANGE VENDOR JS FILE LINK IN  LAYOUT>THEME LIQUID FILE <script src="{{ 'vendor.js' | asset_url }}"></script> ...








Read more