diff --git a/src/adapter/adapter.ts b/src/adapter/adapter.ts index d83818b9..de39d3a5 100644 --- a/src/adapter/adapter.ts +++ b/src/adapter/adapter.ts @@ -6,7 +6,8 @@ import { recommendationsRequestSchema, resultSchema, semanticQueriesRequestSchema, - experienceControlsResponseSchema + experienceControlsResponseSchema, + relatedPromptsEndpointAdapter } from '@empathyco/x-adapter-platform'; import { ExperienceControlsResponse, @@ -73,3 +74,9 @@ experienceControlsResponseSchema.$override< } } }); + +adapter.relatedPrompts = relatedPromptsEndpointAdapter.extends({ + endpoint: + 'https://api.empathy.co/relatedprompts/mymotivemarketplace?store=Labstore+London&lang=en', + requestMapper: ({ query }) => ({ query }) +}); diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue index d7152b5a..c0e58994 100644 --- a/src/components/desktop/desktop.vue +++ b/src/components/desktop/desktop.vue @@ -9,7 +9,11 @@ - + @@ -52,9 +56,14 @@ diff --git a/src/components/main.vue b/src/components/main.vue index 7d550512..4f0dc4d7 100644 --- a/src/components/main.vue +++ b/src/components/main.vue @@ -4,10 +4,16 @@ - + + + + - + @@ -17,33 +23,62 @@ diff --git a/src/components/related-prompts/custom-related-prompts.vue b/src/components/related-prompts/custom-related-prompts.vue new file mode 100644 index 00000000..8d80668f --- /dev/null +++ b/src/components/related-prompts/custom-related-prompts.vue @@ -0,0 +1,71 @@ + + + + + {{ x.query.search }} + + + + + + + + + + diff --git a/src/components/related-prompts/related-prompts-tag-list.vue b/src/components/related-prompts/related-prompts-tag-list.vue new file mode 100644 index 00000000..393fcf42 --- /dev/null +++ b/src/components/related-prompts/related-prompts-tag-list.vue @@ -0,0 +1,224 @@ + + + + + + + + + {{ suggestion.suggestionText }} + + + + + + + + + + + + + {{ query }} + + + + + + + + + + + + diff --git a/src/components/search/results/custom-query-preview.vue b/src/components/search/results/custom-query-preview.vue new file mode 100644 index 00000000..04c5e7e2 --- /dev/null +++ b/src/components/search/results/custom-query-preview.vue @@ -0,0 +1,74 @@ + + + + + {{ queryPreviewInfo.title }} + + + + + {{ queryPreviewInfo.query }} + ({{ totalResults }}) + + + + + + + + + + + + + + diff --git a/src/components/search/results/results.vue b/src/components/search/results/results.vue index 7be3b1d6..c110839b 100644 --- a/src/components/search/results/results.vue +++ b/src/components/search/results/results.vue @@ -6,12 +6,7 @@ > - + - - + + + - + @@ -46,7 +47,8 @@ BaseVariableColumnGrid, infiniteScroll, StaggeredFadeAndSlide, - use$x + use$x, + useState } from '@empathyco/x-components'; import { MainScrollItem } from '@empathyco/x-components/scroll'; import { @@ -56,23 +58,26 @@ PromotedsList, ResultsList } from '@empathyco/x-components/search'; - import { defineComponent } from 'vue'; - import { NextQueriesList } from '@empathyco/x-components/next-queries'; + import { computed, ComputedRef, defineComponent } from 'vue'; + import { RelatedPromptsList } from '@empathyco/x-components/related-prompts'; + import { SemanticQueriesConfig } from '@empathyco/x-components/semantic-queries'; import { useDevice } from '../../../composables/use-device.composable'; import Result from '../../results/result.vue'; import { useExperienceControls } from '../../../composables/use-experience-controls.composable'; - import NextQueryPreview from './custom-next-query-preview.vue'; + import RelatedPromptsTagList from '../../related-prompts/related-prompts-tag-list.vue'; + import CustomQueryPreview from './custom-query-preview.vue'; export default defineComponent({ components: { Banner, BannersList, BaseVariableColumnGrid, + CustomQueryPreview, MainScrollItem, - NextQueryPreview, - NextQueriesList, Promoted, PromotedsList, + RelatedPromptsList, + RelatedPromptsTagList, Result, ResultsList }, @@ -80,14 +85,42 @@ 'infinite-scroll': infiniteScroll }, setup() { + const x = use$x(); const { isMobile } = useDevice(); const { getControlFromPath } = useExperienceControls(); + const semanticQueriesConfig = useState('semanticQueries', ['config']) + .config as ComputedRef; + + const { relatedPrompts, selectedPrompt, selectedQuery } = useState('relatedPrompts', [ + 'relatedPrompts', + 'selectedPrompt', + 'selectedQuery' + ]); + + const columns = computed(() => (isMobile.value ? 2 : 4)); + + const isLowResult = computed( + () => 0 < x.totalResults && x.totalResults < semanticQueriesConfig.value.threshold + ); + + const queriesPreviewInfo = computed(() => { + const queries = relatedPrompts.value[selectedPrompt.value]?.nextQueries as string[]; + if (selectedQuery.value === -1) { + return queries.map(query => ({ query })); + } else { + return [{ query: queries[selectedQuery.value] }]; + } + }); + return { - staggeredFadeAndSlide: StaggeredFadeAndSlide, - columns: isMobile.value ? 2 : 4, + columns, + isLowResult, maxNextQueriesPerGroup: getControlFromPath('nextQueries.maxItems', 1), - x: use$x() + queriesPreviewInfo, + selectedPrompt, + staggeredFadeAndSlide: StaggeredFadeAndSlide, + x }; } }); diff --git a/src/i18n/messages.types.ts b/src/i18n/messages.types.ts index 67ff08f1..34451f19 100644 --- a/src/i18n/messages.types.ts +++ b/src/i18n/messages.types.ts @@ -128,4 +128,7 @@ export interface Messages { accept: string; reject: string; }; + relatedPrompts: { + title: string; + }; } diff --git a/src/i18n/messages/de.messages.json b/src/i18n/messages/de.messages.json index 6e2e9bba..42ecdb59 100644 --- a/src/i18n/messages/de.messages.json +++ b/src/i18n/messages/de.messages.json @@ -1,145 +1,148 @@ { - "base": { - "searchBox": { - "clear": "Löschen", - "placeholder": "Wonach suchen Sie?" - }, - "popularSearches": { - "title": "Beliebte Suchanfragen" - }, - "historyQueries": { - "clear": "Alle löschen", - "removeLabel": "{suggestion} aus Verlauf löschen", - "title": "Verlaufsanfragen" - }, - "myHistory": { - "title": "Mein Verlauf", - "subtitle": "Dies ist die vollständige Liste der Verlaufsanfragen", - "message": { - "header": "Diese Daten werden lokal gespeichert. Nur auf Ihrem Gerät und verlassen es nie.", - "body": "Sie können die Verlaufsanfragen jederzeit deaktivieren.", - "footer": "Ihre Privatsphäre unter Ihrer Kontrolle." - }, - "noHistory": "Keine Verlaufaktivität vorhanden", - "openButton": "Mein Verlauf", - "suggestionResults": "({totalResults} Ergebnisse)", - "switch": { - "title": "Verlaufsanfragen", - "enable": "Aktivieren", - "disable": "Deaktivieren und löschen" - }, - "confirmDisableModal": { - "title": "Verlaufsanfragen deaktivieren?", - "message": "Durch Deaktivieren der Verlaufsanfragen löschen Sie auch die gesamte Verlaufsliste.", - "dismiss": "Abbrechen", - "confirm": "Deaktivieren" - } - }, - "nextQueries": { - "title": "Was kommt als Nächstes" - }, - "nextQueriesGroup": { - "message": "Diejenigen, die nach {query} gesucht haben, haben auch angesehen:" - }, - "nextQueryPreview": { - "message": "Diejenigen, die nach {query} gesucht haben, haben auch angesehen:", - "query": "{query}", - "totalResults": "({totalResults})", - "viewResults": "Alle Ergebnisse anzeigen" - }, - "identifierResults": { - "title": "SKU-Suche" - }, - "recommendations": { - "title": "Top-Klicks" - }, - "facets": { - "gender": "Geschlecht", - "categoryPaths": "Kategorien", - "price": "Preis", - "brand": "Marke", - "fit": "Passform", - "collection": "Kollektion", - "genres": "Geschlechter", - "isAdult": "Inhalt für", - "type": "Kerl", - "runtimeMinutes": "Dauer in Minuten" - }, - "facetsPanel": { - "title": "SORTIEREN & FILTERN", - "viewResults": "ERGEBNISSE ANZEIGEN ({totalResults})" - }, - "filters": { - "all": "Alle", - "showMore": "Mehr anzeigen", - "showLess": "Weniger anzeigen" - }, - "partialResults": { - "query": "{query}", - "totalResults": "({totalResults})", - "viewResults": "Alle anzeigen" - }, - "priceFilter": { - "lessThan": "weniger als {'{max}'}", - "fromTo": "{'{min}'} - {'{max}'}", - "from": "ab {'{min}'}" - }, - "toggleAside": { - "showAside": "Sortieren & Filtern" - }, - "totalResults": { - "message": "{totalResults} Ergebnisse für {query}" - }, - "semanticQueries": { - "title": "Sind Sie an „{query}“ interessiert? Entdecken Sie diese Vorschläge:" - }, - "sort": { - "label": "Sortieren nach", - "values": { - "price asc": "Preis: Niedrig bis Hoch", - "price desc": "Preis: Hoch bis Niedrig", - "default": "Relevanz" - } - }, - "selectedFilters": { - "clear": "FILTER LÖSCHEN ({selectedFiltersNumber})" - }, - "result": { - "addToCart": "IN DEN WARENKORB LEGEN" - }, - "spellcheck": { - "message": "Keine Ergebnisse gefunden für {query}. Wir zeigen Ihnen Ergebnisse für" - }, - "noResults": { - "message": "Es tut uns leid, aber es gibt keine Ergebnisse für {query}. Sie könnten an diesen Produkten interessiert sein" - }, - "fallbackDisclaimer": { - "message": "Keine Ergebnisse gefunden für {query} mit den ausgewählten Filtern. Die Filter wurden aufgehoben" - }, - "columnPicker": { - "message": "Ansicht" - }, - "queryPreview": { - "viewResults": "Alle Ergebnisse anzeigen" - }, - "redirections": { - "title": "Ihre Suche entspricht einem besonderen Ort auf unserer Website. Um ihn zu besuchen, werden Sie umgeleitet", - "accept": "Ja, leite mich um", - "reject": "Nein, ich bleibe hier" + "base": { + "searchBox": { + "clear": "Löschen", + "placeholder": "Wonach suchen Sie?" + }, + "popularSearches": { + "title": "Beliebte Suchanfragen" + }, + "historyQueries": { + "clear": "Alle löschen", + "removeLabel": "{suggestion} aus Verlauf löschen", + "title": "Verlaufsanfragen" + }, + "myHistory": { + "title": "Mein Verlauf", + "subtitle": "Dies ist die vollständige Liste der Verlaufsanfragen", + "message": { + "header": "Diese Daten werden lokal gespeichert. Nur auf Ihrem Gerät und verlassen es nie.", + "body": "Sie können die Verlaufsanfragen jederzeit deaktivieren.", + "footer": "Ihre Privatsphäre unter Ihrer Kontrolle." + }, + "noHistory": "Keine Verlaufaktivität vorhanden", + "openButton": "Mein Verlauf", + "suggestionResults": "({totalResults} Ergebnisse)", + "switch": { + "title": "Verlaufsanfragen", + "enable": "Aktivieren", + "disable": "Deaktivieren und löschen" + }, + "confirmDisableModal": { + "title": "Verlaufsanfragen deaktivieren?", + "message": "Durch Deaktivieren der Verlaufsanfragen löschen Sie auch die gesamte Verlaufsliste.", + "dismiss": "Abbrechen", + "confirm": "Deaktivieren" } }, - "mobile": { - "nextQueriesGroup": { - "message": "Diejenigen, die nach {query} gesucht haben, haben auch angesehen:" - }, - "nextQueryPreview": { - "viewResults": "Alle anzeigen" - }, - "totalResults": { - "message": "{totalResults} Ergebnisse" - }, - "queryPreview": { - "viewResults": "Alle anzeigen" + "nextQueries": { + "title": "Was kommt als Nächstes" + }, + "nextQueriesGroup": { + "message": "Diejenigen, die nach {query} gesucht haben, haben auch angesehen:" + }, + "nextQueryPreview": { + "message": "Diejenigen, die nach {query} gesucht haben, haben auch angesehen:", + "query": "{query}", + "totalResults": "({totalResults})", + "viewResults": "Alle Ergebnisse anzeigen" + }, + "identifierResults": { + "title": "SKU-Suche" + }, + "recommendations": { + "title": "Top-Klicks" + }, + "facets": { + "gender": "Geschlecht", + "categoryPaths": "Kategorien", + "price": "Preis", + "brand": "Marke", + "fit": "Passform", + "collection": "Kollektion", + "genres": "Geschlechter", + "isAdult": "Inhalt für", + "type": "Kerl", + "runtimeMinutes": "Dauer in Minuten" + }, + "facetsPanel": { + "title": "SORTIEREN & FILTERN", + "viewResults": "ERGEBNISSE ANZEIGEN ({totalResults})" + }, + "filters": { + "all": "Alle", + "showMore": "Mehr anzeigen", + "showLess": "Weniger anzeigen" + }, + "partialResults": { + "query": "{query}", + "totalResults": "({totalResults})", + "viewResults": "Alle anzeigen" + }, + "priceFilter": { + "lessThan": "weniger als {'{max}'}", + "fromTo": "{'{min}'} - {'{max}'}", + "from": "ab {'{min}'}" + }, + "toggleAside": { + "showAside": "Sortieren & Filtern" + }, + "totalResults": { + "message": "{totalResults} Ergebnisse für {query}" + }, + "semanticQueries": { + "title": "Sind Sie an „{query}“ interessiert? Entdecken Sie diese Vorschläge:" + }, + "sort": { + "label": "Sortieren nach", + "values": { + "price asc": "Preis: Niedrig bis Hoch", + "price desc": "Preis: Hoch bis Niedrig", + "default": "Relevanz" } + }, + "selectedFilters": { + "clear": "FILTER LÖSCHEN ({selectedFiltersNumber})" + }, + "result": { + "addToCart": "IN DEN WARENKORB LEGEN" + }, + "spellcheck": { + "message": "Keine Ergebnisse gefunden für {query}. Wir zeigen Ihnen Ergebnisse für" + }, + "noResults": { + "message": "Es tut uns leid, aber es gibt keine Ergebnisse für {query}. Sie könnten an diesen Produkten interessiert sein" + }, + "fallbackDisclaimer": { + "message": "Keine Ergebnisse gefunden für {query} mit den ausgewählten Filtern. Die Filter wurden aufgehoben" + }, + "columnPicker": { + "message": "Ansicht" + }, + "queryPreview": { + "viewResults": "Alle Ergebnisse anzeigen" + }, + "redirections": { + "title": "Ihre Suche entspricht einem besonderen Ort auf unserer Website. Um ihn zu besuchen, werden Sie umgeleitet", + "accept": "Ja, leite mich um", + "reject": "Nein, ich bleibe hier" + }, + "relatedPrompts": { + "title": "Sind Sie an „{query}“ interessiert? Entdecken Sie diese Vorschläge:" + } + }, + "mobile": { + "nextQueriesGroup": { + "message": "Diejenigen, die nach {query} gesucht haben, haben auch angesehen:" + }, + "nextQueryPreview": { + "viewResults": "Alle anzeigen" + }, + "totalResults": { + "message": "{totalResults} Ergebnisse" + }, + "queryPreview": { + "viewResults": "Alle anzeigen" } } +} diff --git a/src/i18n/messages/en.messages.json b/src/i18n/messages/en.messages.json index 00865878..8a566253 100644 --- a/src/i18n/messages/en.messages.json +++ b/src/i18n/messages/en.messages.json @@ -126,6 +126,9 @@ "title": "Your search matches a special place in our website, to visit it, you are being redirected", "accept": "Yes, redirect me", "reject": "No, I'll stay here" + }, + "relatedPrompts": { + "title": "Are you interested in \"{query}\"? Explore this suggestions:" } }, "mobile": { diff --git a/src/i18n/messages/es.messages.json b/src/i18n/messages/es.messages.json index a49a5487..31bfb33f 100644 --- a/src/i18n/messages/es.messages.json +++ b/src/i18n/messages/es.messages.json @@ -123,9 +123,12 @@ "viewResults": "Ver todos los resultados" }, "redirections": { - "title": "Tu búsqueda coincide con una página especial de nuestra web, vas a ser redirigido a:", + "title": "Tu búsqueda coincide con una página especial de nuestra web, vas a ser redirigido a:", "accept": "Sí, redirígeme", "reject": "No, me quedaré aquí" + }, + "relatedPrompts": { + "title": "¿Estás interesado en \"{query}\"? Explora estas sugerencias:" } }, "mobile": { diff --git a/src/i18n/messages/fr.messages.json b/src/i18n/messages/fr.messages.json index b9ce801c..e05bc591 100644 --- a/src/i18n/messages/fr.messages.json +++ b/src/i18n/messages/fr.messages.json @@ -126,6 +126,9 @@ "title": "Votre recherche correspond à un endroit spécial de notre site, pour le visiter, vous êtes redirigé", "accept": "Oui, redirigez-moi", "reject": "Non, je reste ici" + }, + "relatedPrompts": { + "title": "Êtes-vous intéressé par «{query}»? Explorez ces suggestions:" } }, "mobile": { diff --git a/src/i18n/messages/it.messages.json b/src/i18n/messages/it.messages.json index fd4f46fa..81dec2a2 100644 --- a/src/i18n/messages/it.messages.json +++ b/src/i18n/messages/it.messages.json @@ -126,6 +126,9 @@ "title": "La vostra ricerca corrisponde a un luogo speciale del nostro sito web, per visitare il quale siete stati reindirizzati", "accept": "Sì, reindirizzami", "reject": "No, rimango qui" + }, + "relatedPrompts": { + "title": "Ti interessa \"{query}\"? Esplora questi suggerimenti:" } }, "mobile": { diff --git a/src/i18n/messages/pt.messages.json b/src/i18n/messages/pt.messages.json index 1e7abe22..b7904282 100644 --- a/src/i18n/messages/pt.messages.json +++ b/src/i18n/messages/pt.messages.json @@ -126,6 +126,9 @@ "title": "A sua pesquisa corresponde a um local especial no nosso sítio Web, para o visitar, está a ser redireccionado", "accept": "Sim, redirecionar-me", "reject": "Não, vou ficar aqui" + }, + "relatedPrompts": { + "title": "Você está interessado em \"{query}\"? Explore estas sugestões:" } }, "mobile": { diff --git a/tests/e2e/cucumber/scroll.spec.ts b/tests/e2e/cucumber/scroll.spec.ts index 2b5ae4b1..7ef63f9e 100644 --- a/tests/e2e/cucumber/scroll.spec.ts +++ b/tests/e2e/cucumber/scroll.spec.ts @@ -31,7 +31,7 @@ Then('scroll position is at top', () => { * the subheader. And then we can reach the bottom because we have the total height of the page. */ When('scrolling down to the bottom', () => { - cy.getByDataTest('query-preview-item') + cy.getByDataTest('related-prompt-item') .should('have.length.at.least', 5) .then(() => { cy.getByDataTest('base-scroll').scrollTo('center', { duration: 1000 });