Site Search Button Functionality in SuiteCommerce

The Site Search button is a crucial feature of the SuiteCommerce Base Theme, enabling users to initiate searches on a website easily. When clicked, this button activates the Site Search input bar, allowing users to enter search queries effectively. Below is a breakdown of how to implement and customize this feature for both desktop and mobile platforms.

How Does the Site Search Button Work?

The button is included by default within the theme but requires user interaction to reveal the search input. It can be placed in any template for both desktop and mobile with specific HTML code snippets.

Implementation for Desktop

To add the Site Search button to your desktop template, use the following HTML snippet:

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

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

Implementation for Mobile

For mobile templates, the HTML code slightly differs:

<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 allows users to enter their search queries. By default, this input bar is hidden, but you can customize your templates to make it visible.

HTML Structure for the Site Search Input Bar

To implement the Site Search input and the accompanying Go button, use the following code snippet:

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

To make the search input bar visible by default, add the active class as follows:

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

Go Button Implementation

The Go button is an essential part of the search functionality, allowing users to submit their search requests easily. Here’s how to include it in your template:

<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

Key Points to Remember

• The Site Search button is essential for user navigation and engagement on SuiteCommerce sites.
• Customizing the input bar to be visible can enhance the user experience significantly.
• Ensure compatibility with previous theme versions if your site predates the 2018.2 release.