Customize Site Search Elements

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

Any themes created using these implementations 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 Commerce 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

Related Topics

Do More With Themes

Override Active Extension Files

Enable Customization from Site Management Tools

Include Translations in Themes

General Notices