The auto correct function is enabled at the MDEX level, and it is “on” by default. If a search is auto-corrected, the shopper sees a message, for example:
Auto Correct
Using this example, when we search for “sheo,” it is auto corrected to “shoe”. In the response JSON, we can see:
"MainContent": [ { "enabled": true, "originalTerms": ["sheo"], "@type": "SearchAdjustments", "name": "Search Adjustments", "adjustedSearches": {"sheo": [{ "adjustedTerms": "shoe", "autoPhrased": false, "class": "com.endeca.infront.cartridge.model.AdjustedSearch", "spellCorrected": true }]} },
If we examine:
/Storefront/j2ee/store.war/mobile/cartridges/SearchAdjustments/SearchAdjustments.jsp
We can see that Commerce Reference Store checks contentItem
’s adjustedSearches
property, contentItem.adjustedSearches
, and if it is not empty, it displays a message in the format of: “Your search for X was adjusted to Y”:
<c:if test="${not empty contentItem.adjustedSearches || not empty contentItem.suggestedSearches}"> <div class="SearchAdjustments"> <%-- Search adjustments --%> <c:forEach var="originalTerm" items="${contentItem.originalTerms}" varStatus="status"> <c:if test="${not empty contentItem.adjustedSearches[originalTerm]}"> <fmt:message key="mobile.search.adjust.description"><fmt:param><span>${originalTerm}</span></fmt:param></fmt:message> <c:forEach var="adjustment" items="${contentItem.adjustedSearches[originalTerm]}" varStatus="status"> <span class="autoCorrect">${adjustment.adjustedTerms}</span> <c:if test="${!status.last}">, </c:if> </c:forEach> </c:if>
In the second half of SearchAdjustments.jsp
, we can see how the “Did you mean?” feature is implemented:
<%-- "Did You Mean?" --%> <c:if test="${not empty contentItem.suggestedSearches[originalTerm]}"> <div class="DYM"> <fmt:message key="mobile.search.adjust.didYouMean"> <fmt:param> <c:forEach var="suggestion" items="${contentItem.suggestedSearches[originalTerm]}" varStatus="status"> <a href="${siteBaseURL}${suggestion.contentPath}${suggestion.navigationState}">${suggestion.label}</a> <c:if test="${!status.last}">, </c:if> </c:forEach> </fmt:param> </fmt:message> </div> </c:if> </c:forEach> </div> </c:if>