Site Search Input Bar Customization in SuiteCommerce

The Site Search Input Bar is a crucial feature that allows users to search for items on a site easily. It's integrated into both desktop and mobile templates of SuiteCommerce. This input bar is implemented using specific HTML code, making it easy to add to your existing design.

How to Implement the Site Search Input Bar

To add the Site Search Input Bar to your template, you can use the following HTML structure:

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>

Customizing Visibility

By default, the Site Search input bar is hidden in the SuiteCommerce Base Theme. To make this input bar visible by default, add the active class to your code as follows:

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

Adding a Go Button

You can also implement a button that users can click to initiate a search. Use the following HTML snippet for the Go button:

<button class="site-search-button-link" data-action="show-itemsearcher" title="{{translate 'Search'}}">
    <i class="site-search-button-icon"></i>
</button>

This button can be a standalone call-to-action for users looking to perform a search, enhancing the overall user experience.

Key Takeaways

• The Site Search Input Bar allows site-wide searches for users.
• Customize its visibility by adding an active class.
• The Go button enhances user interaction with the search functionality.
• Implementing these features improves the site's usability and efficiency.