SaaS platform for e-commerce

Site search. Search form, JSON and suggestions.

☰

← Zurück

Site Search


Search is performed after submitting the form with the "search" variable. The data type for the search is set using the path (page) to which the form is submitted. To search the "Product Catalog", the submission must be made to the "/shop/" page.

How to add a search form to the Site Header?

In the Block/Menu located in the Site Header, you can add the following code:

Code: html
<div align="center" id="hotengine-search_form_block" itemscope itemtype="https://schema.org/WebSite">
<link itemprop="url" href="//{HOTENGINE-SC:site_url}/"/>
<form id="hotengine-search-searchinput" name="hotengine-search-searchinput" method="post" action="/en/shop/" itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
<meta itemprop="target" content="//{HOTENGINE-SC:site_url}/de/shop/?search={search}"/>
<label>
<input class="input" name="search" type="text" placeholder="Search..." id="hotengine-smart_search_input" value="" itemprop="query-input">
</label>
<label>
<button type="submit" class="search-button">Search</button>
</label></form>
</div>


The code immediately includes Microformats for Google. The form submission path (//{HOTENGINE-SC:site_url}/de/shop/?search={search}) specifies the de language, you can change it.

Example:


CSS style of the block, with replacing the submit button with an image:

Code: Css
#hotengine-search_form_block{
position: relative;
width:300px;
float: right;
z-index:2;
height: 41px;
margin:33px 0px 33px 10px;
}

#hotengine-search_form_block input{   
height: 20px;
vertical-align: middle;
border: 1px solid #e5e5e5;
padding: 0.15em;
width: 20.0em;
color:#9c9b9b;
height: 20px;
background: #fff;
padding: 0 13px;
height: 41px;
}
#hotengine-search_form_block input[type="text"]{
text-indent:4px;height: 39px;
}
#hotengine-search_form_block .search-button{
background:#41474c;
border-radius:0px;
vertical-align:middle;
display:block;
position:absolute;
top:0px;
right:0px;
border:none;
color:#fff;
width:41px; height:41px;
text-align:center;
font-size:12px;
line-height:25px; 
cursor:pointer; overflow:hidden; 
}
#hotengine-search_form_block .search-button:after{
content:""; width:41px; height:41px; display:block; position: absolute; right:0px; top:0px; 
background:none; background-color:#d6d6d6;
-webkit-mask:url("data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIj4KDTxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIi8+Cg08ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KDTxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4KDTxwYXRoIGZpbGw9IiMwMDAwMDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTcuMjUgMmE1LjI1IDUuMjUgMCAxMDMuMTQ0IDkuNDU1bDIuMzI2IDIuMzI1YS43NS43NSAwIDEwMS4wNi0xLjA2bC0yLjMyNS0yLjMyNkE1LjI1IDUuMjUgMCAwMDcuMjUgMnpNMy41IDcuMjVhMy43NSAzLjc1IDAgMTE3LjUgMCAzLjc1IDMuNzUgMCAwMS03LjUgMHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgoNPC9nPgoNPC9zdmc+") center center no-repeat; 
-webkit-mask-size:20px;
}
#hotengine-search_form_block .search-button:hover:after{
	background-color:#fff;
}
#hotengine-search_form_block .search-button:active:after{transform: translateY(1px);}

If you replace the path /shop/ with /blog/, the search will be performed in the article catalog.
Overwriting the value of the input name="search" field happens automatically.




← Zurück