Skip to content

Commit 7dd4dc4

Browse files
sf-madhuri-uppusf-madhuri-uppu
committed
Add einstein suggestions
1 parent 22a2191 commit 7dd4dc4

3 files changed

Lines changed: 247 additions & 12 deletions

File tree

‎packages/template-retail-react-app/app/components/search/index.jsx‎

Lines changed: 186 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,27 @@ const formatSuggestions = (searchSuggestions) => {
9898
}
9999
}
100100
),
101+
// Einstein suggestions for popular and recent searches
102+
popularSearchSuggestions: searchSuggestions?.einsteinSuggestions?.popularSearchPhrases?.map(
103+
(phrase) => {
104+
return {
105+
type: 'popular',
106+
name: phrase.phrase,
107+
link: searchUrlBuilder(phrase.phrase),
108+
exactMatch: phrase.exactMatch
109+
}
110+
}
111+
),
112+
recentSearchSuggestions: searchSuggestions?.einsteinSuggestions?.recentSearchPhrases?.map(
113+
(phrase) => {
114+
return {
115+
type: 'recent',
116+
name: phrase.phrase,
117+
link: searchUrlBuilder(phrase.phrase),
118+
exactMatch: phrase.exactMatch
119+
}
120+
}
121+
),
101122
searchPhrase: searchSuggestions?.searchPhrase
102123
}
103124
}
@@ -130,17 +151,169 @@ const Search = (props) => {
130151
const [searchQuery, setSearchQuery] = useState('')
131152
const navigate = useNavigation()
132153

133-
const searchSuggestion = useSearchSuggestions(
134-
{
135-
parameters: {
136-
q: searchQuery,
137-
expand: 'images,prices'
138-
}
154+
// Mock Einstein suggestions data
155+
const mockEinsteinSuggestions = {
156+
"brandSuggestions": {
157+
"suggestedTerms": [
158+
{
159+
"originalTerm": "dress"
160+
}
161+
]
139162
},
140-
{
141-
enabled: searchQuery?.length >= RECENT_SEARCH_MIN_LENGTH
142-
}
143-
)
163+
"einsteinSuggestions": {
164+
"popularSearchPhrases": [
165+
{
166+
"exactMatch": false,
167+
"phrase": "Dresses"
168+
}
169+
],
170+
"recentSearchPhrases": [
171+
{
172+
"exactMatch": false,
173+
"phrase": "Dresses"
174+
}
175+
]
176+
},
177+
"categorySuggestions": {
178+
"categories": [
179+
{
180+
"id": "womens-clothing-dresses",
181+
"name": "Dresses",
182+
"parentCategoryName": "Clothing"
183+
}
184+
],
185+
"suggestedPhrases": [
186+
{
187+
"exactMatch": false,
188+
"phrase": "Dresses"
189+
}
190+
],
191+
"suggestedTerms": [
192+
{
193+
"originalTerm": "dress",
194+
"terms": [
195+
{
196+
"completed": false,
197+
"corrected": false,
198+
"exactMatch": true,
199+
"value": "dress"
200+
}
201+
]
202+
}
203+
]
204+
},
205+
"contentSuggestions": {
206+
"suggestedTerms": [
207+
{
208+
"originalTerm": "dress"
209+
}
210+
]
211+
},
212+
"customSuggestions": {
213+
"suggestedPhrases": [
214+
{
215+
"exactMatch": false,
216+
"phrase": "Dresses"
217+
}
218+
],
219+
"suggestedTerms": [
220+
{
221+
"originalTerm": "dress",
222+
"terms": [
223+
{
224+
"completed": false,
225+
"corrected": false,
226+
"exactMatch": true,
227+
"value": "dress"
228+
}
229+
]
230+
}
231+
]
232+
},
233+
"productSuggestions": {
234+
"products": [
235+
{
236+
"currency": "GBP",
237+
"productId": "A Standard Dress-1",
238+
"productName": "A Standard Dress"
239+
},
240+
{
241+
"currency": "GBP",
242+
"image": {
243+
"alt": "Floral Dress, , small",
244+
"disBaseLink": "https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw17dc4593/images/small/PG.10237222.JJB52A0.PZ.jpg",
245+
"link": "https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw17dc4593/images/small/PG.10237222.JJB52A0.PZ.jpg",
246+
"title": "Floral Dress, "
247+
},
248+
"price": 82.56,
249+
"productId": "25592581M",
250+
"productName": "Floral Dress"
251+
},
252+
{
253+
"currency": "GBP",
254+
"image": {
255+
"alt": "Pack-And-Go Dress, , small",
256+
"disBaseLink": "https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwb331c78d/images/small/PG.10239018.JJ3WCXX.PZ.jpg",
257+
"link": "https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dwb331c78d/images/small/PG.10239018.JJ3WCXX.PZ.jpg",
258+
"title": "Pack-And-Go Dress, "
259+
},
260+
"price": 82.56,
261+
"productId": "25589753M",
262+
"productName": "Pack-And-Go Dress"
263+
},
264+
{
265+
"currency": "GBP",
266+
"image": {
267+
"alt": "V-Neck Dress, , small",
268+
"disBaseLink": "https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dwf295eccb/images/small/PG.10229762.JJ169XX.PZ.jpg",
269+
"link": "https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dwf295eccb/images/small/PG.10229762.JJ169XX.PZ.jpg",
270+
"title": "V-Neck Dress, "
271+
},
272+
"price": 75.52,
273+
"productId": "25593727M",
274+
"productName": "V-Neck Dress"
275+
},
276+
{
277+
"currency": "GBP",
278+
"image": {
279+
"alt": "Neutral Floral Dress, , small",
280+
"disBaseLink": "https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/ZZRF_001/on/demandware.static/-/Sites-apparel-m-catalog/default/dw0db45f1c/images/small/PG.10227905.JJ0KMXX.PZ.jpg",
281+
"link": "https://zzrf-001.dx.commercecloud.salesforce.com/on/demandware.static/-/Sites-apparel-m-catalog/default/dw0db45f1c/images/small/PG.10227905.JJ0KMXX.PZ.jpg",
282+
"title": "Neutral Floral Dress, "
283+
},
284+
"price": 82.56,
285+
"productId": "25592479M",
286+
"productName": "Neutral Floral Dress"
287+
}
288+
],
289+
"suggestedPhrases": [
290+
{
291+
"exactMatch": true,
292+
"phrase": "dress"
293+
}
294+
],
295+
"suggestedTerms": [
296+
{
297+
"originalTerm": "dress",
298+
"terms": [
299+
{
300+
"completed": false,
301+
"corrected": false,
302+
"exactMatch": true,
303+
"value": "dress"
304+
}
305+
]
306+
}
307+
]
308+
},
309+
"searchPhrase": "dress"
310+
}
311+
312+
const searchSuggestion = {
313+
data: mockEinsteinSuggestions,
314+
isLoading: false,
315+
error: null
316+
}
144317
const searchInputRef = useRef()
145318
const miawChatRef = useRef({
146319
newChatLaunched: false,
@@ -160,7 +333,9 @@ const Search = (props) => {
160333
const searchSuggestionsAvailable =
161334
searchSuggestions &&
162335
(searchSuggestions?.categorySuggestions?.length ||
163-
searchSuggestions?.phraseSuggestions?.length)
336+
searchSuggestions?.phraseSuggestions?.length ||
337+
searchSuggestions?.popularSearchSuggestions?.length ||
338+
searchSuggestions?.recentSearchSuggestions?.length)
164339

165340
const saveRecentSearch = (searchText) => {
166341
// Get recent searches or an empty array if undefined.

‎packages/template-retail-react-app/app/components/search/partials/search-suggestions-section.jsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ const SuggestionSection = ({searchSuggestions, closeAndNavigate, styles}) => {
1818
const hasCategories = searchSuggestions?.categorySuggestions?.length
1919
const hasProducts = searchSuggestions?.productSuggestions?.length
2020
const hasPhraseSuggestions = searchSuggestions?.phraseSuggestions?.length
21+
const hasPopularSearches = searchSuggestions?.popularSearchSuggestions?.length
22+
const hasRecentSearches = searchSuggestions?.recentSearchSuggestions?.length
2123

2224
return (
2325
<Fragment>
@@ -65,6 +67,34 @@ const SuggestionSection = ({searchSuggestions, closeAndNavigate, styles}) => {
6567
/>
6668
</Fragment>
6769
)}
70+
{hasPopularSearches && (
71+
<Fragment>
72+
<Box {...styles.sectionHeader}>
73+
<FormattedMessage
74+
defaultMessage="Popular Searches"
75+
id="search.suggestions.popular"
76+
/>
77+
</Box>
78+
<Suggestions
79+
closeAndNavigate={closeAndNavigate}
80+
suggestions={searchSuggestions?.popularSearchSuggestions}
81+
/>
82+
</Fragment>
83+
)}
84+
{hasRecentSearches && (
85+
<Fragment>
86+
<Box {...styles.sectionHeader}>
87+
<FormattedMessage
88+
defaultMessage="Recent Searches"
89+
id="search.suggestions.recent"
90+
/>
91+
</Box>
92+
<Suggestions
93+
closeAndNavigate={closeAndNavigate}
94+
suggestions={searchSuggestions?.recentSearchSuggestions}
95+
/>
96+
</Fragment>
97+
)}
6898
</HideOnDesktop>
6999
{/* Desktop - Vertical and Horizontal alignment */}
70100
<HideOnMobile>
@@ -100,6 +130,34 @@ const SuggestionSection = ({searchSuggestions, closeAndNavigate, styles}) => {
100130
/>
101131
</Fragment>
102132
)}
133+
{hasPopularSearches && (
134+
<Fragment>
135+
<Box {...styles.sectionHeader}>
136+
<FormattedMessage
137+
defaultMessage="Popular Searches"
138+
id="search.suggestions.popular"
139+
/>
140+
</Box>
141+
<Suggestions
142+
closeAndNavigate={closeAndNavigate}
143+
suggestions={searchSuggestions?.popularSearchSuggestions}
144+
/>
145+
</Fragment>
146+
)}
147+
{hasRecentSearches && (
148+
<Fragment>
149+
<Box {...styles.sectionHeader}>
150+
<FormattedMessage
151+
defaultMessage="Recent Searches"
152+
id="search.suggestions.recent"
153+
/>
154+
</Box>
155+
<Suggestions
156+
closeAndNavigate={closeAndNavigate}
157+
suggestions={searchSuggestions?.recentSearchSuggestions}
158+
/>
159+
</Fragment>
160+
)}
103161
</Box>
104162
<Box flex="3">
105163
{hasProducts && (

‎packages/template-retail-react-app/app/components/search/partials/search-suggestions.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ const SearchSuggestions = ({recentSearches, searchSuggestions, closeAndNavigate}
1515
const hasCategories = searchSuggestions?.categorySuggestions?.length
1616
const hasProducts = searchSuggestions?.productSuggestions?.length
1717
const hasBrands = searchSuggestions?.brandSuggestions?.length
18-
const hasSuggestions = hasCategories || hasProducts || hasBrands
18+
const hasPopularSearches = searchSuggestions?.popularSearchSuggestions?.length
19+
const hasRecentSearches = searchSuggestions?.recentSearchSuggestions?.length
20+
const hasSuggestions = hasCategories || hasProducts || hasBrands || hasPopularSearches || hasRecentSearches
1921

2022
return (
2123
<Stack {...styles.container}>

0 commit comments

Comments
 (0)