Site Search Customization in SuiteCommerce

The Site Search feature allows users to easily search for items across the site. This functionality is crucial for enhancing user experience, enabling quick access to products and information on eCommerce sites. This article details how to implement and customize the Site Search input bar in SuiteCommerce.

How to Implement the Site Search Input Bar

To enable the Site Search input bar, you can utilize the following HTML structure within your templates for both desktop and mobile views:

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 of the Search Bar

By default, the Site Search input bar is hidden in the SuiteCommerce Base Theme. If you want this input bar to be visible by default, you can modify your template to include the active class as illustrated below:

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

Integrating the Go Button

The Go button facilitates the search action, allowing users to submit their queries. Here’s the HTML code required 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 code should be added to your templates where you want the button to appear. It enhances usability by providing a clickable element for search execution.

Key Considerations

• Ensure that the Site Search input bar's visibility is consistent and user-friendly, leading to enhanced customer satisfaction.
• Customize the designs and placements of the Go button to align with the overall aesthetics of your eCommerce site.

Who This Affects

• Developers: Those customizing the SuiteCommerce platform will need to implement the input bar and Go button.
• Site Administrators: Administrators configuring site aesthetics and functionality.

Key Takeaways

• The Site Search functionality is pivotal for improving user navigation on eCommerce sites.
• The active class is essential for making the search bar visible.
• Developers can easily customize the search button and input bar using the provided HTML code.