Usability improvements for search widget

PrestaShop · Dec 20, 2023 · c08fd4c · c08fd4c
1 parent 6fe6641
commit c08fd4c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 2 deletions.
diff --git a/modules/ps_searchbar/ps_searchbar.tpl b/modules/ps_searchbar/ps_searchbar.tpl
@@ -27,8 +27,8 @@
   <div id="search_widget" class="search-widgets js-search-widget" data-search-controller-url="{$search_controller_url}">
     <form method="get" action="{$search_controller_url}">
       <input type="hidden" name="controller" value="search">
-      <i class="material-icons search" aria-hidden="true">search</i>
-      <input class="js-search-input" type="text" name="s" value="{$search_string}" placeholder="{l s='Search our catalog' d='Shop.Theme.Catalog'}" aria-label="{l s='Search' d='Shop.Theme.Catalog'}">
+      <i class="material-icons search js-search-icon" aria-hidden="true">search</i>
+      <input class="js-search-input" type="search" name="s" value="{$search_string}" placeholder="{l s='Search our catalog' d='Shop.Theme.Catalog'}" aria-label="{l s='Search' d='Shop.Theme.Catalog'}">
       <i class="material-icons clear" aria-hidden="true">clear</i>
     </form>
 

diff --git a/src/js/constants/selectors-map.ts b/src/js/constants/selectors-map.ts
@@ -57,6 +57,7 @@ export const searchBar = {
   searchResults: '.js-search-results',
   searchTemplate: '.js-search-template',
   searchInput: '.js-search-input',
+  searchIcon: '.js-search-icon',
 };
 
 export const checkout = {

diff --git a/src/js/modules/ps_searchbar.ts b/src/js/modules/ps_searchbar.ts
@@ -16,8 +16,23 @@ const initSearchbar = () => {
   const searchResults = document.querySelector<HTMLElement>(SearchBarMap.searchResults);
   const searchTemplate = document.querySelector<HTMLTemplateElement>(SearchBarMap.searchTemplate);
   const searchInput = document.querySelector<HTMLInputElement>(SearchBarMap.searchInput);
+  const searchIcon = document.querySelector<HTMLElement>(SearchBarMap.searchIcon);
   const searchUrl = searchWidget?.dataset.searchControllerUrl;
 
+  // focus on the input field when clicking on the widget area
+  // helps to have a larger "area" for touch devices
+  searchWidget?.addEventListener('click', () => {
+    searchInput?.focus();
+  });
+
+  // if input has text then submit search when clicking on the icon
+  // usability for people without "enter" key
+  searchIcon?.addEventListener('click', () => {
+    if(searchInput?.value) {
+      searchInput?.form?.submit();
+    }
+  });
+
   searchCanvas?.addEventListener('hidden.bs.offcanvas', () => {
     if (searchDropdown) {
       searchDropdown.innerHTML = '';

diff --git a/types/selectors.d.ts b/types/selectors.d.ts
@@ -57,6 +57,7 @@ declare type searchBar = {
   searchResults: string,
   searchTemplate: string,
   searchInput: string,
+  searchIcon: string,
 };
 
 declare type checkout = {