Customize Site Search Elements

This topic applies to

Applies to

SuiteCommerce Web Stores

This topic applies to SuiteCommerce and the 2018.2 release of SuiteCommerce Advanced only.

Any themes created using the SuiteCommerce and the 2018.2 release of SuiteCommerce Advanced and later include the ability to customize the site search button and input bar. You can customize your theme to locate the site search button (magnifying glass button) and input bar in any location within any template or independently within different templates.

  1. Site Search Button

  2. Site Search Input Bar and Go Button

Site Search Button

The site search button is visible by default in the SuiteCommerce Base Theme. Site users must click this button to activate the site search input bar. You can locate this button in any template for desktop or mobile use with the following code:

Note

The code displayed in this topic is backward compatible with SuiteCommerce themes created prior to the 2018.2 release.


Desktop

<div class="header-menu-search" data-view="SiteSearch.Button"></div>
  • Base Theme Module: Header

  • Base Theme Template: header_menu.tpl

Mobile

<div class="header-menu-searchmobile" data-view="SiteSearch.Button"></div>
  • Base Theme Module: Header

  • Base Theme Template: header.tpl

Site Search Input Bar

Site users rely on this input bar to search a site. You can locate the site search input bar and Go button in any template for desktop or mobile use with the following code:

Site Search

<div class="site-search" data-type="site-search">
   <div class="site-search-content">
      <form class="site-search-content-form" method="GET" action="/search" data-action="search">
         <div class="site-search-content-input">
            <div data-view="ItemsSeacher"></div>
            <i class="site-search-input-icon"></i>
            <a class="site-search-input-reset" data-type="search-reset"><i class="site-search-input-reset-icon"></i></a>
         </div>
         <button class="site-search-button-submit" type="submit">{{translate 'Go'}}</button>
      </form>
   </div>
</div>
  • Base Theme Module: SiteSearch

  • Base Theme Template: site_search.tpl

The site search input bar is hidden by default in the SuiteCommerce Base Theme. However, you can customize your templates to make this input bar visible by default. To do so, add the active class to site-search as shown in the following example:

<div class="site-search active" data-type="site-search">

Go Button

<button class="site-search-button-link" data-action="show-itemsearcher" title="{{translate 'Search'}}">
    <i class="site-search-button-icon"></i>
</button>
  • Base Theme Module: SiteSearch

  • Base Theme Template: site_search_button.tpl