How To Guides
Search Preview & Improved Search Overview
9.0007 includes some improvements to the native site search for customers. Historically when someone performed a search on a Miva store, it only searched product code, product sku, product name and product description fields.
Now, you have the ability to select which field you want searchable and these fields have been expanded to include attributes, options and custom product fields.
Example:
Setup and Installation
To add this feature to your store you need to assign the searchfield item to each page (or all pages) you want the search preview to appear on.
Assigning this item to any page will automatically cause Miva to add the required JavaScript needed to make this feature work. This code gets output in the head tag:
Add Item to page
There is now a new searchfield item which outputs the search input field and HTML needed for the search preview:
However you can use your own inputs as long as you have the required data elements:
Required elements:
Search Settings
The layout of the search preview can be customized to any UI you like. This is done under the new Search Settings section:
User Interface -> Search Settings
Here you can control which fields are searchable:
Customizing Number of Results Returned
By default the number of products returned in the Search Preview will be 5. However this value can be overwritten. There is a built in function you can call:
MMSearchField.prototype.SetLoadCount( count )
Calling this function will update the count to whatever you want. You have access to the MMSearchField instantiated class via mm_searchfields[ id ], where id is the unique id set up in the data-mm_searchfield_id tag attribute. That means you'll have to output your own HTLML form elements vs using the Item tag to do it for you so you can control the output id.
Example:
AddEvent( window, 'load', function() { mm_searchfields['ca1c7f68f37b0ac84afe0a056ddabd4a'].SetLoadCount(20); } );
Note: It's important to call the SetLoadCount() function on load event as the core search JS does not run until the load event fires. This will ensure the mm_searchfields object is instantiated before you call the SetLoadCount() function.
Search Preview Settings
This area gives you UI control over the search preview layout. You first need to switch to Advanced Mode to see the template:
This template can be customized to support any layout and CSS used to style it. You can also display additional data such as:
- SKU
- Weight
- Description
- Inventory
- Image Types
- Inventory
- Custom fields