Site Search Button Implementation in SuiteCommerce

The Site Search button is an integral feature available by default in the SuiteCommerce Base Theme. Users can click this button to access the Site Search input bar, allowing for a seamless search experience on both desktop and mobile platforms. Proper implementation ensures users can quickly locate desired content on the site, enhancing navigation and usability.

How to Implement the Site Search Button

To incorporate the Site Search button into your SuiteCommerce theme, use the following HTML code. This implementation is backward compatible with themes developed prior to the 2018.2 release.

Desktop Implementation

<div class="header-menu-search" data-view="SiteSearch.Button"></div>

• Base Theme Module: Header
• Base Theme Template: header_menu.tpl

Mobile Implementation

<div class="header-menu-searchmobile" data-view="SiteSearch.Button"></div>

• Base Theme Module: Header
• Base Theme Template: header.tpl

Site Search Input Bar

The Site Search input bar is essential for users looking to perform searches on the site. It typically relies on the following implementation:

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

Customizing the Input Bar

By default, the Site Search input bar is hidden. However, to ensure users can access it immediately, you may add the active class to make it visible:

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

Go Button

The Go button leads users to execute their site search action. Here’s how it is coded:

<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

Implementing and customizing these elements effectively can significantly improve user experience and facilitate easier site navigation.