Skip to content

Instantly share code, notes, and snippets.

@Kayakbabe

Kayakbabe/miva-searchspring-notes.md

Forked from steveosoule/miva-searchspring-notes.md
Created October 7, 2019 17:04
Show Gist options
  • Save Kayakbabe/1e6db2295747db9a678287a5ac04eb5b to your computer and use it in GitHub Desktop.
Save Kayakbabe/1e6db2295747db9a678287a5ac04eb5b to your computer and use it in GitHub Desktop.
Download ZIP
Miva Search Spring Notes
Raw
miva-searchspring-notes.md

Miva Search Spring Notes

Quick Links

Main

Advanced

Overview

  • Search engine SaaS that offers:
    • Site Search
      • Standard Search
      • Autocomplete Search
    • Merchandising
    • Analytics
      • IntelliSuggest
    • Misc:
      • Advanced Site Search, Search Autocomplete, Category Navigation, Mobile Search, Merchandising, Facebook Integration, Advanced Reports, Product Comparison, Faceting & Filtering, Synonyms, Fuzzy Search, “Did You Mean?”, Redirects, and more.
  • Founded by Gareth Dismore & Scott Zielinski
  • Based out of Colorado Springs, CO
  • Miva Partner since 2008

Example Miva Stores using SearchSpring

Site Search Implimentation

Search Spring works is by providing them a product data feed file, configuring settings about the data within that file, and then adding JavaScript to the store to display results provided by Search Spring.

Generic Integration Instructions

  1. Develop out the Standard Miva Category & Search pages. SearchSpring will use existing HTML & CSS to prepare the results.

  2. Get access to a SearchSpring account

    • SearchSpring’s service is maintained through their Management Dashboard. That is where you will clarify where the data feed is and what kind of data is in the feed.
    • Either receive access from the client, or reach out to SearchSpring on behalf of the client. See their Design Requirements for a SearchSpring Mockup

  3. Prepare a Data Feed in Miva

    • Most of the time you can use SearchSpring’s Miva module to generate a text-file.
    • Download & install their module
    • Configure the store's Menu > Utilities > Search Spring module to include all of the data that will need to be displayed on included in the search matches.
    • If the client needs information that is not available through the Search Spring module, then we can generate the Search Spring feed with a custom Miva page
    • Determine the which data is needed:
      • To display in the Results
      • To be offered as a Facet
      • To be used for sorting
      • To be Searchable
    • Create a Feed Generator
      • Use the Miva module
      • OR use a customized Miva page template
      • OR Use Miva's Marketing > Feeds module
      • OR build your own Create a web-accessible endpoint that accepts a ?Offset=100 parameter and outputs the next offset number as Continue|200 to help SearchSpring's indexer paginate through all the products. Finally, just output Complete when there are no more products to regenerate.

  4. Configure the SearchSpring account

    • Point to the location of the feed file
    • Trigger an index
    • Configure the Field settings
    • Configure the Facet & Sorting options
    • Update the AJAX Display templates

  5. Create a new SEARCH page in Miva.

    • You can use the regular SRCH page template to get started, then just remove the search_results item and content.

  6. Add two DIVs to your search page:

<div class="searchspring-results_container"></div>
<div class="searchspring-facets_container"></div>

.searchspring-facets_container typically wraps-arround or is put in-place of the left-column category tree .searchspring-results_container typically is put in the main content section of the page where the search results go.

  1. Add SearchSpring.Catalog.init directly after our two DIVs are loaded on to the page:
<script type="text/javascript" src="//cdn.searchspring.net/ajax_search/js/searchspring-catalog.min.js"></script>
<script type="text/javascript" src="//cdn.searchspring.net/ajax_search/sites/[SITEID]/js/[SITEID].js"></script>

<script type="text/javascript">
	// More options at: https://searchspring.zendesk.com/hc/en-us/articles/201184849-SearchSpring-Catalog-init-function-and-options
    var options = {
        template: 'minimal'
    };

    SearchSpring.Catalog.init(options);
</script>

NOTE: The [SITEID] is specific to your SearchSpring management console account.

Various options can be passed into this init to trigger different features / callbacks during our API call. View the SearchSpring Catalog Init Function & Options api documentation for more information, and a Gist of Sample Catalog Init Options

  1. Category Page

Repeat the previous two-steps for the cateogry page and add a backgroundFilter to the SearchSpring.Catalog.init options

AutoComplete

  1. Update the existing global-header search form with the following:

    • Use method="get" on the search form tag itself
    • Use name="q" on the search form's input field
    • Add class="searchspring-query" on the search form's input field
    • Add autocomplete="off" on the search form's input field

  2. Add the following below the search form to trigger our AutoComplete suggestions:

<link rel="stylesheet" type="text/css" href="//cdn.searchspring.net/autocomplete/autocomplete-v2.css">
<script type="text/javascript" src="//cdn.searchspring.net/autocomplete/searchspring-autocomplete.min.js"></script>

<script type="text/javascript">
    SearchSpring.Autocomplete.init({
        siteId: '[SITEID]',
        queryClass: 'searchspring-query'
    });
</script>

This article lists out a few options that can be used for that AutoComplete init call. Add any CSS styling to overwrite our default AutoComplete styles

IntelliSuggest

FAQ

How do I update change a Facet’s HTML or layout?

Search Spring does not offer the source or template control of how the facets are displayed to the page. In order to change the look of how the facets are displayed, you need to do it through JavaScript within their SearchSpring.Catalog.init function and one of it’s options.

View this Gist for More Information

How do I add new fields to an existing SearchSpring setup?

  1. Prepare the Data Feed file contents Add all of the columns and prepare them with the proper data. This will be done in the Miva Admin’s Search Spring Module configuration or in the custom Miva page that is generating the feed file.
  2. “Check for New Fields” in the Search Spring Admin. In the Search Spring admin go to the “Data Feed” section and click the “Check for New Fields” link/button.
  3. Configure the “Fields > Field Settings” options After Search Spring discovers your new fields, they will display in the Fields > Fields Settings section of the Search Spring Admin panel. Configure the: Label, Type, Mutli-Valued, Display, Sort, Facet, Compare, Search, and Weight according to the site’s needs.
  4. Update “Fields > Core Fields” (if applicable)
  5. Update “Fields > Faceting” (if applicable)
  6. Update “Fields > Sorting” (if applicable)
  7. Manually trigger a re-index At the top right of the Search Spring admin, there is an “Index Status” link. Go there and click the “Update Index” link. Search Spring will begin interpreting your data feed file according to the Field Settings, and the Search Spring admin will display a message when it completes.
  8. Display the new fields in the AJAX Display templates (if applicable) Now that Search Spring has completed the index of the new fields. You can display them within the “AJAX Display > Item Templates” & “AJAX Display > Compare Templates”. Once you add the new data, Search Spring should display the changes within a minute or two.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment