Go Button Functionality in SuiteCommerce Templates

The Go Button functionality is a critical component of SuiteCommerce, facilitating user interactions with site search features. Users typically depend on the Site Search input bar, which incorporates the Go Button, to perform searches across desktop or mobile templates.

Site Search Input Bar

The Site Search input bar can be found within any SuiteCommerce template. Below is a sample HTML structure required to implement the Site Search along with the Go Button:

1<div class="site-search" data-type="site-search">
2   <div class="site-search-content">
3      <form class="site-search-content-form" method="GET" action="/search" data-action="search">
4         <div class="site-search-content-input">
5            <div data-view="ItemsSeacher"></div>
6            <i class="site-search-input-icon"></i>
7            <a class="site-search-input-reset" data-type="search-reset"><i class="site-search-input-reset-icon"></i></a>
8         </div>
9         <button class="site-search-button-submit" type="submit">{{translate 'Go'}}</button>
10      </form>
11   </div>
12</div>

• Base Theme Module: SiteSearch
• Base Theme Template: site_search.tpl

By default, the input bar remains hidden in the SuiteCommerce Base Theme. To display the input bar visibly, customize your templates by adding the active class as demonstrated below:

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

Go Button

The Go Button is represented in your HTML as follows:

<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

When integrated properly, the Go Button enhances the search experience, providing users with a clear mechanism to submit their search queries conveniently.