Marfeel Docs

# Implement a search bar

If a website's search functionality works with a ?s= query parameter, enabling the lateralMenuSearch definition flag is enough to make it work.

You can customize its placeholder text and styles in SASS.

This guide focuses on how to customize the search behavior.

# Step 1: Definition flag

Enable the search bar with the lateralMenuSearch definition flag.

# Step 2: JSP creation

This step requires to add a new JSP to the tenant. Depending on how the search is integrated, follow one path or the other:

TIP

Make sure to import any Marfeel tag you use in the JSP.

# Step 2A: JSP for search with query parameters

Follow this path for search implementations that use query parameters in the URL (other than ?s=), such as www.example.com?customSearch=1234.

  • Create a controlBars folder in the tenant's theme folder: example.com/themes/mediaBlog/controlBars.

  • Create a new folder inside of the controlBars folder named lateralMenu.

  • Create a file named topLateralMenu.jsp.

  • In the topLateralMenu.jsp file, write the logic for the tenant's search feature according to the parameters identified in their desktop site.

Example:

<%@taglib prefix="/WEB-INF/tags/vhosts/marfeel/tags/ui" %>

<form action="http://www.google.com/cse" method="get" class="mrf-searchForm" accept-charset="UTF-8">
    <input id="mrf-input-search" class="mrf-searchText" type="text" size="15" maxlength="128" name="q" onfocus="this.placeholder='Enter your keywords'" onblur="this.placeholder=''">
    <input type="hidden" name="cx" value="partner-pub-9899107896408954:nfenwg-bza1">
    <label id="mrf-searchForm-opener" class="mrf-icon icon-loupe"></label>
    <ui:button id="mrf-searchForm-closener" type="TOBLACK" iconId="close" iconClass="mrf-Icon--s" buttonClass="mrf-ButtonIcon mrf-closeButton" buttonType="reset" />
</form>

# Step 2B: JSP for search with a path segment

Follow this path for search implementations that use path segments in the URL, such as www.example.com/customSearch/1234.

  • Create a lateralMenu folder in the tenant's theme folder: example.com/themes/default/controlBars/lateralMenu.

  • Create a new folder inside of the lateralMenu folder named top.

  • Create a file named searchForm.jsp.

  • In the searchForm.jsp file, write the logic for the tenant's search feature according to the parameters identified in their desktop site.

Example for a tenant with the pattern www.tenant.com/search/WORD_TO_SEARCH/:

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="dali" uri="http://dev.marfeel.com/jsp/mrf/dali" %>
<%@taglib prefix="ui" tagdir="/WEB-INF/tags/vhosts/marfeel/tags/ui" %>

<%@page pageEncoding="UTF-8" %>

<c:set var="searchMessage"> <dali:message code="search.placeholder" /> </c:set>
<c:set var="action">//${marfeel.uri}</c:set>

<c:if test="${uIFeatures.get('lateralMenuSearch') == true}">
	<ui:searchForm
		searchInputName="${not empty uIFeatures.get('searchInputName') ? uIFeatures.get('searchInputName') : 's'}"
		action="${not empty uIFeatures.get('searchAction') ? uIFeatures.get('searchAction') : action }"
		placeholder="${not empty uIFeatures.get('searchPlaceholder')? uIFeatures.get('searchPlaceholder') : searchMessage }" />
</c:if>

← Create a new Layout →