SITES-30879: Unlocalized strings in Sites > Page Editor > Search component

bundles/core/src/main/java/com/adobe/cq/wcm/core/components/internal/models/v1/SearchImpl.java

@@ -18,8 +18,10 @@
 import javax.annotation.PostConstruct;
 
 import com.adobe.cq.wcm.core.components.util.AbstractComponentImpl;
+import com.day.cq.i18n.I18n;
 import com.day.cq.wcm.api.LanguageManager;
 import com.day.cq.wcm.msm.api.LiveRelationshipManager;
+import com.fasterxml.jackson.databind.ObjectMapper;
 import org.apache.commons.lang3.StringUtils;
 import org.apache.sling.api.SlingHttpServletRequest;
 import org.apache.sling.api.resource.Resource;
@@ -37,7 +39,11 @@
 import com.day.cq.wcm.api.Page;
 import com.day.cq.wcm.api.designer.Style;
 
+import java.util.HashMap;
+import java.util.Locale;
+import java.util.Map;
 import java.util.Optional;
+import java.util.ResourceBundle;
 
 /**
  * Search model implementation.
@@ -113,6 +119,12 @@ public class SearchImpl extends AbstractComponentImpl implements Search {
      */
     private String searchRootPagePath;
 
+    /**
+     * The localized messages.
+     */
+    private final Map<String, String> i18nMessagesMap = new HashMap<>();
+
+
     /**
      * Initialize the model.
      */
@@ -161,4 +173,18 @@ public String getExportedType() {
         return request.getResource().getResourceType();
     }
 
+    public String getI18nMessages() {
+        Locale pageLocale = currentPage.getLanguage(false);
+        ResourceBundle resourceBundle = request.getResourceBundle(pageLocale);
+        I18n i18n = new I18n(resourceBundle);
+        i18nMessagesMap.put("{0} result", i18n.get("{0} result"));
+        i18nMessagesMap.put("{0} results", i18n.get("{0} results"));
+        i18nMessagesMap.put("No results", i18n.get("No results"));
+        try {
+            ObjectMapper mapper = new ObjectMapper();
+            return mapper.writeValueAsString(i18nMessagesMap);
+        } catch (Exception e) {
+            return "{}"; 
+        }
+    }
 }

content/src/content/jcr_root/apps/core/wcm/components/search/v2/search/clientlibs/site/js/search.js

@@ -151,12 +151,24 @@
         }
     }
 
+    function localizeMessage(searchElementId, message, values = []) {
+        const i18nMessages = JSON.parse(document.querySelector("#" + searchElementId).getAttribute("data-i18n-messages"));
+        let translation = i18nMessages[message];
+        // Insert values
+        if (values.length > 0) {
+            translation = translation.replace(/{(\d+)}/g, function(match, index) {
+                return typeof values[index] !== "undefined" ? values[index] : match;
+            });
+        }
+        return translation;
+    }
+
     // useful for Accessibility, helping users with low vision and users with cognitive disabilities to identify the change in results
     function updateSearchResultsStatusMessageElement(searchElementId, totalResults) {
         var searchResultsStatusMessage = document.querySelector("#" + searchElementId + "> .cmp_search__info");
         searchResultsStatusMessage.style.visibility = "visible";
-        var searchResultsFoundMessage = totalResults === 1 ? totalResults + " result" : totalResults + " results";
-        var searchResultsNotFoundMessage = "No results";
+        var searchResultsFoundMessage = localizeMessage(searchElementId, totalResults === 1 ? "{0} result" : "{0} results", [totalResults]);
+        var searchResultsNotFoundMessage = localizeMessage(searchElementId, "No results");
         searchResultsStatusMessage.innerText = totalResults > 0 ? searchResultsFoundMessage : searchResultsNotFoundMessage;
     }
 

content/src/content/jcr_root/apps/core/wcm/components/search/v2/search/search.html

@@ -19,7 +19,8 @@
          role="search"
          data-cmp-is="search"
          data-cmp-min-length="${search.searchTermMinimumLength}"
-         data-cmp-results-size="${search.resultsSize}">
+         data-cmp-results-size="${search.resultsSize}"
+         data-i18n-messages='${search.i18nMessages}'>
     <div class="cmp_search__info" aria-live="polite" role="status"></div>
     <form class="cmp-search__form" data-cmp-hook-search="form"
           method="get" action="${currentPage.path @ addSelectors=['searchresults'], extension='json', suffix = search.relativePath}"