Instructions for using the platform

☰

← Back

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}/en/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}/en/shop/?search={search}) specifies the en 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.

About the search page markup (data-hotengine-marking) — in the Microdata section.

Search logic ([AND] and [OR] conditions)


By default, search looks for products that contain the whole search phrase. To refine the query, use logical operators:
  • [AND] — "AND": the product must contain all conditions at once.
  • [OR] — "OR": matching at least one condition is enough.
Priority: all [AND] are processed first, then [OR]. The query Hat[AND]blue[OR]universal means "(Hat AND blue) OR universal".

Nested logic (brackets): for complex conditions use groups [AND ...] and [OR ...]. Words inside a group separated by spaces are combined by its operator. Brackets are processed from inside out.

Examples:
  • BMW[AND]X6[AND]G06 — products containing BMW, X6 and G06.
  • BMW[OR]Audi — BMW or Audi products.
  • [AND BMW [OR] X6] [AND] [OR Audi [AND] Q7] — (BMW OR X6) AND (Audi AND Q7).
  • [OR [AND bag leather] [AND backpack fabric]] — (bag AND leather) OR (backpack AND fabric).
Limit: up to 20 conditions per query. With unbalanced brackets or an operator without an operand no results are shown (protection against invalid queries).

Example: a custom search filter for cars
Operators can be used not only to refine, but also to build your own search filter. Store the values in the product «Meta keywords» separated by commas — for example, make, model and production years:

Product meta keywords
,AUDI,A6,C7 2011-2018,

Then search by these values, separating them with a comma and linking them with operators:

Search query
,AUDI,[AND],A6,[AND],C7 2011-2018,

Such a query finds AUDI A6, generation C7, 2011–2018.

Universal condition via [OR]: add a common value to the keywords (e.g. «universal») and use it as an alternative — then universal products will also appear in the results:

Search query
,AUDI,[AND],A6,[OR],universal,

This query means «(AUDI AND A6) OR universal».

Dynamic multi-level filters
Keywords can be used not only for a search filter, but also to build multi-level filters with linked lists. For example, for cars: «Make → Model → Years» — each next list appears only after a value is selected on the previous level. The linked lists are built with JavaScript from the values in the product «Meta keywords». This way you can even create a dedicated car-make search.

Example: linked lists (JavaScript)
const cars = {
  AUDI: ["A6", "Q7", "A3"],
  BMW:  ["X6", "X5", "3 Series"]
};
// when a make is selected, fill the model list
brand.addEventListener("change", function () {
  model.innerHTML = "";
  (cars[brand.value] || []).forEach(function (m) {
    var o = document.createElement("option");
    o.textContent = m;
    model.appendChild(o);
  });
});

Insert the selected values into the search query using the [AND] operators (or [OR] for universal values).

It is convenient to keep the values in the value base — in the product «Meta keywords» and on the «Product types and feature values» page.

See more about operators in «Settings», «Search» tab.


← Back