Customize Site Search Elements

Any themes created using these implementations include the ability to customize the Site Search button and input bar. We can customize our theme to locate the Site Search 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. The users must click this button to activate the Site Search input bar. We can locate this button in any template for desktop or mobile use with the following code:

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

The users rely on this input bar to search a site. We 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

Note:  The Site Search input bar can be made visible by default using the code below.

_.extend(SiteSearchView.prototype, {
                hideItemSearcher: function() {
                    this.$('[data-type="site-search"]').show();
                },
            })