24/7 Support: 800.608.6482

How To Guides

How To Guides

1. Overview

2. Setup and Installation

3. Search Settings

4. Search Preview Settings

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:

Product Search

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.

Search Field

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:

Searchable Fields

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:

UI Control

This template can be customized to support any layout and CSS used to style it. You can also display additional data such as:

Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept

Copyright © 1997 – 2024 Miva®, Miva Merchant®, MivaPay®, MivaCon®, Camp Miva®, Miva Connect®, Miva, Inc. All Rights Reserved.