<?xml version='1.0' encoding='UTF-8'?><uidget><metadata><name>Search box</name><description>Insert a field to search in your website</description><help><![CDATA[
		  This block displays a search bar allowing visitors to look for content within your pages, store products and categories, blog post and categories, forum posts and FAQ content.
    ]]></help><api_version>1.0</api_version><size height='40' width='255' /><server>local://SearchCptServer</server><blog en='1136' /></metadata><view><content>&lt;div class=&quot;ui27_search&quot;&gt;&lt;/div&gt;</content><properties><option default='&apos;pages,products,store_categories,articles,blog_categories&apos;' display='Pages|FAQ|Texts|Download blocks|Forum topics|Store products|Store categories|Blog articles|Blog categories' help='In which content do you want this block to search' name='search_types' prop_switch='true' separator=',' title='Search within' values='pages|faqs|texts|files|forum_topics|products|store_categories|articles|blog_categories' /><inputText default='&apos;Search...&apos;' name='placeholder' placeholder='Search...' title='Search placeholder' /></properties><design_properties><checkbox default='true' name='display_submit' value='Display submit button' /><inputText class='prop_submit' default='&apos;&apos;' name='submit_text' placeholder='Button text' title='Submit button text' /><checkbox class='prop_submit' default='true' help='Choose an icon to display in the submit button' name='display_icon' value='Display submit icon' /><icon_selector class='prop_submit prop_icon' default='{id: 2509, name: "search", service: "Google-material-icons", removable: false, tags: ""}' icon='folder' name='submit_icon' title='Icon' value='Button icon' /></design_properties></view><script>UI_Search={suggestions:{},clear_suggestions:function(){this.suggestions={}
},custom_cache:function(b,e,d){var a=this.suggestions[e.cache_key()];
var c=null;
if(a){if(d){a[b]=(d||{})
}else{c=a[b]
}}else{this.suggestions[e.cache_key()]={};
if(d){this.suggestions[e.cache_key()][b]=(d||{})
}}return c
}};
UI_List.UI_Search={initialize:function(a){this.cpt=a;
a.setOptions([&quot;locked&quot;,&quot;fixed&quot;,&quot;footer&quot;,&quot;sticky&quot;])
},onDisplay:function(a){$.extend(this,componentSearchBar);
this.n={node:a,size_getter_el:$(&quot;&lt;div&gt;&lt;/div&gt;&quot;).appendTo(a).css(&quot;clear&quot;,&quot;both&quot;),search:$(&quot;div.ui27_search&quot;,a)};
this._buildSearchBar();
this.n.node.css(&quot;overflow&quot;,&quot;visible&quot;);
this._setButton();
this._setAlignment()
},onSelect:function(){this._showProp()
},onPropertyChanged:function(a){if(a.include(&quot;search_types&quot;)){this._buildSearchBar();
this._setButton();
UI_Search.clear_suggestions()
}if(a.include(&quot;placeholder&quot;)){this._setPlaceholder()
}if(a.include(&quot;display_submit&quot;)||a.include(&quot;submit_text&quot;)||a.include(&quot;display_icon&quot;)||a.include(&quot;submit_icon&quot;)){this._showProp();
this._setButton()
}},onResizeStop:function(){this.cpt.setSize({h:Math.max(this.cpt.H(),20),w:Math.max(this.cpt.W(),255)});
this._searchBarSuggestionsDisplayed(true);
this._setAlignment()
},onMoveStop:function(){this._searchBarSuggestionsDisplayed(true);
this._setAlignment()
},_refreshNodes:function(){$.extend(this.n,{input:$(&quot;div.ui27_search input&quot;,this.n.node),search_btn:$(&quot;div.ui_btn.ui27_btn&quot;,this.n.node),search_close_btn:$(&quot;div.ui_close_search&quot;,this.n.node),search_counter:$(&quot;div.ui27_nbr_search_results&quot;,this.n.node),suggestions_list:$(&quot;div.ui_search_suggest&quot;,this.n.node)})
},_showProp:function(){if(v.mode==&quot;viewer&quot;){return
}var a=$(this.cpt.propertyNode).add(this.cpt.propertyDesignNode);
$(&quot;.prop_submit&quot;,a).toggle(this.cpt.data.display_submit);
$(&quot;.prop_icon&quot;,a).toggle(this.cpt.data.display_icon&amp;&amp;this.cpt.data.display_submit)
},_buildSearchBar:function(){var f={products:{product:&quot;Store products&quot;},articles:{article:&quot;Blog articles&quot;},forum_topics:{forum_topic:&quot;Forum topics&quot;},store_categories:{store_category:&quot;Store categories&quot;},blog_categories:{blog_category:&quot;Blog categories&quot;},pages:{page:&quot;Pages&quot;},faqs:{faq:&quot;FAQ&quot;},texts:{text:&quot;Texts&quot;},files:{file:&quot;Files to download&quot;},words:{word:&quot;Words&quot;}};
if(this.cpt.data.search_types.length==0){this.cpt.data.search_types=&quot;pages,products,store_categories,articles,blog_categories&quot;
}var g=this.cpt.data.search_types.split(&quot;,&quot;);
if(g.include(&quot;texts&quot;)&amp;&amp;!g.include(&quot;pages&quot;)){g=g.insertAt(&quot;pages&quot;,0)
}var i=g.collect(function(j){return f[j]
});
var a={};
$.each(i,function(j){$.extend(a,f[Object.keys(f)[Object.values(f).indexOf(Object.values(f).find(function(k){return Object.keys(k)[0]==Object.keys(i[j])[0]
}))]])
});
var c=[[&quot;words&quot;,&quot;files&quot;,&quot;faqs&quot;,&quot;texts&quot;,&quot;pages&quot;,&quot;blog_categories&quot;,&quot;store_categories&quot;],[&quot;forum_topics&quot;,&quot;articles&quot;,&quot;products&quot;]];
var b=g.collect(function(j){return[j,(c.indexOf(c.find(function(k){return k.include(j)
}))+1)*2,c[0].concat(c[1]).indexOf(j)]
}).sort(function(k,j){return k[2]&lt;j[2]
});
var h={};
b.forEach(function(j){h[j[1]]=(h[j[1]]||0)+1;
h.total=(h.total||0)+j[1]
});
if(h[2]%2&gt;0){if(h.total&lt;4){var d=0;
while(b.map(function(j){return j[1]
}).reduce(function(k,j){return k+j
})&lt;4){b[Math.min(d,b.length-1)][1]++;
d++
}}else{var e=b.find_all(function(j){return j[1]==2
}).map(function(j){return j.concat(c[0].length-c[0].indexOf(j[0]))
});
e=e.sort(function(k,j){return k[2]&gt;j[2]
}).slice(0,2);
e.each(function(j){b.find(function(k){return k[0]==j[0]
})[1]--
})
}}this.n.node.find(&quot;.ui27_search&quot;).html(&quot;&quot;).generateComponentSearchbar({type:&quot;search&quot;,placeholder:this.cpt.data.placeholder,types:a,sort:b.map(function(j){return[Object.keys(f[j[0]])[0],j[1]]
}),show_more_only:[&quot;article&quot;,&quot;product&quot;]});
this._refreshNodes();
this.bindSearch()
},_setPlaceholder:function(){this.n.input.attr(&quot;placeholder&quot;,this.cpt.data.placeholder)
},_setButton:function(){var a=this.cpt.data.display_submit&amp;&amp;(this.cpt.data.submit_text.length&gt;0||this.cpt.data.display_icon);
this.n.search_btn.toggle(a);
this.n.search.toggleClass(&quot;ui27_no_btn&quot;,!a);
this.n.search_close_btn.toggle(false);
this.n.search_btn.html(&quot;&quot;).append($(&apos;&lt;span class=&quot;fonticon&quot;&gt;&lt;/span&gt;&apos;).setIcon(this.cpt.data.submit_icon).toggle(this.cpt.data.display_icon)).append($(&quot;&lt;span&gt;&lt;/span&gt;&quot;).html(this.cpt.data.submit_text))
},_setAlignment:function(){if([&quot;mobile_tree&quot;,&quot;mobile&quot;].include(deviceController.device)){this.n.suggestions_list.css({left:&quot;auto&quot;,right:&quot;&quot;})
}var a=[this.cpt.X(),this.cpt.X()+this.cpt.W()];
if(a[0]&lt;=0&amp;&amp;a[1]&gt;0){this.n.suggestions_list.css({left:-(this.n.suggestions_list.width()-this.n.node.width())/2,right:&quot;&quot;})
}else{if(a[1]&lt;0){this.n.suggestions_list.css({right:&quot;&quot;,left:0})
}else{if(a[0]&gt;=0){this.n.suggestions_list.css({right:0,left:&quot;&quot;})
}}}},custom_suggestions_call:function(b){var a=this;
var c=[];
var d={texts:&quot;text&quot;,files:&quot;file&quot;,pages:&quot;page&quot;,faqs:&quot;faq&quot;,forum_topics:&quot;forum_topics&quot;,products:&quot;product&quot;,store_categories:&quot;store_category&quot;,articles:&quot;article&quot;,blog_categories:&quot;blog_category&quot;};
this.cpt.data.search_types.split(&quot;,&quot;).each(function(e){c.push(a.cpt.ask({request:&quot;search_suggest&quot;,query:b,version_id:v.id,only:[e],all:v.mode==&quot;editor&quot;},function(f){return f
}).then(function(g){var f=UI_Search.custom_cache(b,a);
if(!f){UI_Search.custom_cache(b,a,g)
}else{if([&quot;texts&quot;].includeOne([e])){g.results.each(function(h){if(!f.results.find(function(j){return j[1]==&quot;page&quot;&amp;&amp;j[2][1]==h[2][1]
})){var i=Math.max(0,f.results.findIndex(function(j){return j[1]==&quot;page&quot;
}));
f.results=f.results.insertAt(h,i)
}})
}else{f.results=f.results.concat(g.results)
}if(g.more){$.extend(f.more,g.more)
}}return g
}))
});
return c
},_searchBarSuggestionsDisplayed:function(a){var d={};
var h=[];
if(a){this.n.suggestions_list.show()
}var g=$(&quot;.ui_search_suggest &gt; div:visible&quot;,this.n.node);
g.each(function(k,l){$(l).removeClassMatch(/ui_suggest_length_(\d)/);
var j=$(l).data(&quot;sort&quot;);
d[j]=(d[j]||0)+1;
d.total=(d.total||0)+j;
h.push(j)
});
if(d[2]%2&gt;0&amp;&amp;!a){if(d.total&lt;4){var f=0;
while(h.reduce(function(j,i){return j+i
})&lt;4){h[Math.min(f,h.length-1)]++;
f++
}}else{while(h.reduce(function(j,i){return j+i
})%2&gt;0){h=h.slice().slice(0,h.length-2).concat(h.slice().slice(h.length-2,h.length).map(function(i){return Math.max(1,i-1)
}))
}}}g.each(function(j,k){$(k).addClass(&quot;ui_suggest_length_&quot;+h[j])
});
var c=Math.max(0,h.length&gt;0?Math.ceil(h.reduce(function(j,i){return j+i
})/4):0);
var b=this.cpt.W();
var e;
if(c==1){e=b
}else{if(b&lt;450){e=Math.max(c*Math.min(200,b),b)
}else{e=Math.max(c*200,b)
}}if([&quot;mobile_tree&quot;,&quot;mobile&quot;].include(deviceController.device)){this.n.node.find(&quot;.ui_search_suggest&quot;).css({width:&quot;100%&quot;,left:&quot;auto&quot;})
}else{this.n.node.find(&quot;.ui_search_suggest&quot;).css({width:e,gridTemplateColumns:&quot;repeat(&quot;+c+&quot;, 1fr)&quot;});
this._setAlignment()
}if(a){this.n.suggestions_list.hide()
}},cache_key:function(){return this.cpt.data.search_types.split(&quot;,&quot;).map(function(a){return a.slice(0,3)
}).sort().join(&quot;&quot;)
}};</script><style>.UI_Search .ui27_search div:first-child div:first-child{width:100%}
.UI_Search .ui27_search .ui_btn{float:none}
.UI_Search .ui27_search .ui_btn .ui27_btn{margin:8px}
.UI_Search input{width:100%;height:30px}
.UI_Search .ui_search_suggest&gt;div&gt;div{padding:10px 6px;background-color:#fff;transition:background-color .2s linear;position:relative;display:flex;align-items:center}
.UI_Search .ui_search_suggest&gt;div&gt;div:hover{background-color:#f4f4f4}
.UI_Search .ui_search_suggest{background-color:transparent;border-radius:0 0 5px 5px;display:grid;grid-template-rows:auto auto auto auto;grid-auto-flow:column}
.UI_Search .ui_search_suggest .ui_suggest_more{float:right;margin:2px;cursor:pointer}
.UI_Search .ui_search_suggest&gt;div{box-sizing:border-box}
.UI_Search .ui_suggest_length_4{grid-row-end:span 4}
.UI_Search .ui_suggest_length_2{grid-row-end:span 2}
.UI_Search .ui_suggest_length_1{grid-row-end:span 1}
.UI_Search .component_searchbar .ui_search_suggest h3{background-color:#f4f4f4;padding:10px 6px;cursor:default;font-size:16px;border-bottom:1px solid #dedede}
.UI_Search .component_searchbar .ui_search_suggest{border-color:transparent}
.UI_Search .component_searchbar .ui_suggest_product img,.UI_Search .component_searchbar .ui_suggest_article img{max-width:64px;max-height:64px;top:auto}
.UI_Search .component_searchbar .ui_search_suggest .highlight{color:#000}
.UI_Search .component_searchbar .ui27_price{font-weight:700}
.UI_Search .component_searchbar .ui_result_available{border-color:#f4f4f4;box-shadow:0 5px 25px rgba(175,175,175,.2);background:#fff}</style></uidget>