fix to show product name on autocomplete options

.vscode/settings.json

@@ -21,4 +21,4 @@
       "changeProcessCWD": true
     }
   ]
-}
+}

CHANGELOG.md

@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [3.15.3] - 2024-06-10
 
+### Changed
+
+- Adjust autocomplete list to show product name rather than just the product sku name
+
 ## [3.15.2] - 2024-06-10
 
 ## [3.15.1] - 2024-05-27
@@ -587,4 +591,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 
-- Add css handles to selected sku on AutoComplete block.
+- Add css handles to selected sku on AutoComplete block.

manifest.json

@@ -90,7 +90,9 @@
     },
     "free": true,
     "type": "free",
-    "availableCountries": ["*"]
+    "availableCountries": [
+      "*"
+    ]
   },
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

react/components/QuickOrderAutocomplete.tsx

@@ -49,11 +49,9 @@ const CustomOption = (props: any) => {
     )
   }
 
-  const buttonClasses = `${
-    handles.customOptionButton
-  } bn w-100 tl pointer pa4 f6 ${roundedBottom ? 'br2 br--bottom' : ''} ${
-    highlightOption || selected ? 'bg-muted-5' : 'bg-base'
-  }`
+  const buttonClasses = `${handles.customOptionButton
+    } bn w-100 tl pointer pa4 f6 ${roundedBottom ? 'br2 br--bottom' : ''} ${highlightOption || selected ? 'bg-muted-5' : 'bg-base'
+    }`
 
   const thumb = value.thumb ? value.thumb : ''
 
@@ -116,17 +114,17 @@ const QuickOrderAutocomplete: FunctionComponent<
     value: !term.length
       ? []
       : optionsResult
-          .filter((item: any) => {
-            return !!item.items[0].images[0].imageUrl
-          })
-          .map((item: any) => {
-            return {
-              value: item.items[0].itemId,
-              label: item.items[0].name,
-              slug: item.linkText,
-              thumb: getImageSrc(item.items[0].images[0].imageUrl),
-            }
-          }),
+        .filter((item: any) => {
+          return !!item.items[0].images[0].imageUrl
+        })
+        .map((item: any) => {
+          return {
+            value: item.productId,
+            label: item.productName,
+            slug: item.linkText,
+            thumb: getImageSrc(item.items[0].images[0].imageUrl),
+          }
+        }),
     lastSearched: {
       value: lastSearched,
       label: 'Last searched products',
@@ -156,7 +154,7 @@ const QuickOrderAutocomplete: FunctionComponent<
         setTerm(nterm)
       }
     },
-    onSearch: () => () => {},
+    onSearch: () => () => { },
     onClear: () => setTerm(''),
     placeholder: intl.formatMessage(messages.placeholder),
     value: term,

react/queries/autocomplete.gql

@@ -2,6 +2,8 @@ query Autocomplete($inputValue: String!) {
   productSuggestions(fullText: $inputValue, hideUnavailableItems: true)
     @context(provider: "vtex.search-graphql") {
       products {
+        productName
+        productId
         items {
           itemId
           name