From 3b7ba54073a2ab59dc53d6e65ea51e1bd66fb926 Mon Sep 17 00:00:00 2001 From: igorsimovski Date: Tue, 1 Mar 2022 09:32:28 +0100 Subject: [PATCH 1/2] ICSAAS-408 add datalayer to search and searchtab cmps - update json export for each - update FE to include the dataLayer in the markup --- all/pom.xml | 9 +++++++ core/pom.xml | 4 +++ .../core/fulltextsearch/SearchModelImpl.java | 24 +++++++++++++++-- .../fulltextsearch/SearchTabModelImpl.java | 27 ++++++++++++++++++- pom.xml | 7 ++++- ui.apps/pom.xml | 1 - ui.config/pom.xml | 1 + ui.content/pom.xml | 1 - .../src/main/webpack/site/js/buildSearch.ts | 2 ++ .../site/js/components/searchResults.ts | 3 +++ .../site/js/components/searchResultsTab.ts | 4 ++- .../webpack/site/js/components/searchTabs.ts | 2 ++ .../src/main/webpack/site/js/searchElement.ts | 1 - .../webpack/site/js/types/searchOptions.ts | 1 + 14 files changed, 79 insertions(+), 8 deletions(-) diff --git a/all/pom.xml b/all/pom.xml index 25611ed2..0a47bab4 100644 --- a/all/pom.xml +++ b/all/pom.xml @@ -74,6 +74,11 @@ zip /apps/saas-aem-module-packages/application/install + + com.adobe.cq + core.wcm.components.core + /apps/saas-aem-module-vendor-packages/application/install + @@ -187,5 +192,9 @@ ${project.version} zip + + com.adobe.cq + core.wcm.components.core + diff --git a/core/pom.xml b/core/pom.xml index dd0c36f8..4009af07 100644 --- a/core/pom.xml +++ b/core/pom.xml @@ -131,6 +131,10 @@ commons-io commons-io + + com.adobe.cq + core.wcm.components.core + com.adobe.aem diff --git a/core/src/main/java/com/valtech/aem/saas/core/fulltextsearch/SearchModelImpl.java b/core/src/main/java/com/valtech/aem/saas/core/fulltextsearch/SearchModelImpl.java index 684a4752..781325c2 100644 --- a/core/src/main/java/com/valtech/aem/saas/core/fulltextsearch/SearchModelImpl.java +++ b/core/src/main/java/com/valtech/aem/saas/core/fulltextsearch/SearchModelImpl.java @@ -3,6 +3,10 @@ import com.adobe.cq.export.json.ComponentExporter; import com.adobe.cq.export.json.ContainerExporter; import com.adobe.cq.export.json.ExporterConstants; +import com.adobe.cq.wcm.core.components.models.Container; +import com.adobe.cq.wcm.core.components.models.datalayer.ComponentData; +import com.adobe.cq.wcm.core.components.models.datalayer.builder.DataLayerBuilder; +import com.adobe.cq.wcm.core.components.util.ComponentUtils; import com.day.cq.i18n.I18n; import com.fasterxml.jackson.annotation.JsonIgnore; import com.fasterxml.jackson.annotation.JsonInclude; @@ -51,7 +55,7 @@ resourceType = RESOURCE_TYPE) @Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION) -public class SearchModelImpl implements SearchModel, ContainerExporter { +public class SearchModelImpl implements SearchModel, Container { public static final String RESOURCE_TYPE = "saas-aem-module/components/search"; public static final String NODE_NAME_SEARCH_TABS_CONTAINER = "search-tabs"; @@ -150,6 +154,20 @@ public class SearchModelImpl implements SearchModel, ContainerExporter { private SearchCAConfigurationModel searchCAConfigurationModel; + @Override + public ComponentData getData() { + if (ComponentUtils.isDataLayerEnabled(this.resource)) { + return DataLayerBuilder.forContainer() + .withId(this::getId) + .withTitle(this::getTitle) + .withType(this::getExportedType) + .build(); + + } + return null; + } + + @PostConstruct private void init() { searchCAConfigurationModel = resource.adaptTo(SearchCAConfigurationModel.class); @@ -171,7 +189,9 @@ private void init() { @JsonIgnore public String getLanguage() { - return StringUtils.isNotBlank(language) ? language : getLocale().getLanguage(); + return StringUtils.isNotBlank(language) + ? language + : getLocale().getLanguage(); } @Override diff --git a/core/src/main/java/com/valtech/aem/saas/core/fulltextsearch/SearchTabModelImpl.java b/core/src/main/java/com/valtech/aem/saas/core/fulltextsearch/SearchTabModelImpl.java index 711e7b65..a6f091e5 100644 --- a/core/src/main/java/com/valtech/aem/saas/core/fulltextsearch/SearchTabModelImpl.java +++ b/core/src/main/java/com/valtech/aem/saas/core/fulltextsearch/SearchTabModelImpl.java @@ -3,6 +3,10 @@ import com.adobe.cq.export.json.ComponentExporter; import com.adobe.cq.export.json.ExporterConstants; +import com.adobe.cq.wcm.core.components.models.Component; +import com.adobe.cq.wcm.core.components.models.datalayer.ComponentData; +import com.adobe.cq.wcm.core.components.models.datalayer.builder.DataLayerBuilder; +import com.adobe.cq.wcm.core.components.util.ComponentUtils; import com.fasterxml.jackson.annotation.JsonInclude; import com.fasterxml.jackson.annotation.JsonInclude.Include; import com.valtech.aem.saas.api.caconfig.SearchCAConfigurationModel; @@ -15,6 +19,7 @@ import com.valtech.aem.saas.api.resource.PathTransformer; import com.valtech.aem.saas.core.common.request.RequestWrapper; import com.valtech.aem.saas.core.common.resource.ResourceWrapper; +import com.valtech.aem.saas.core.util.ResourceUtil; import com.valtech.aem.saas.core.util.StringToInteger; import lombok.Getter; import lombok.extern.slf4j.Slf4j; @@ -47,7 +52,7 @@ resourceType = RESOURCE_TYPE) @Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION) -public class SearchTabModelImpl implements SearchTabModel, ComponentExporter { +public class SearchTabModelImpl implements SearchTabModel, Component { public static final String RESOURCE_TYPE = "saas-aem-module/components/searchtab"; public static final int DEFAULT_START_PAGE = 1; @@ -137,6 +142,26 @@ private void init() { }); } + @Override + public ComponentData getData() { + if (ComponentUtils.isDataLayerEnabled(this.resource)) { + return DataLayerBuilder.forComponent() + .withId(this::getId) + .withParentId(() -> Optional.ofNullable(parentSearch).map(SearchModel::getId).orElse("")) + .withTitle(this::getTitle) + .withType(this::getExportedType) + .build(); + + } + return null; + } + + @Override + public String getId() { + return ResourceUtil.generateId("saas", resource.getPath()); + } + + private Optional getConfiguredResultsPerPage() { return Optional.ofNullable(parentSearch).map(SearchModel::getResultsPerPage); } diff --git a/pom.xml b/pom.xml index ac89fe26..61eda733 100644 --- a/pom.xml +++ b/pom.xml @@ -92,6 +92,7 @@ valtech-ch https://sonarcloud.io ${project.basedir}/target/site/jacoco/jacoco.xml + 2.17.2 @@ -864,6 +865,11 @@ 2.8.0 provided + + com.adobe.cq + core.wcm.components.core + ${core.wcm.components.version} + com.adobe.aem @@ -871,7 +877,6 @@ 6.5.10 provided - org.junit diff --git a/ui.apps/pom.xml b/ui.apps/pom.xml index e315af2f..b1b90b77 100644 --- a/ui.apps/pom.xml +++ b/ui.apps/pom.xml @@ -52,7 +52,6 @@ none com.valtech.aem - saas.ui.apps application diff --git a/ui.config/pom.xml b/ui.config/pom.xml index 4b920f2c..8e41d0c6 100644 --- a/ui.config/pom.xml +++ b/ui.config/pom.xml @@ -49,6 +49,7 @@ none + com.valtech.aem container false diff --git a/ui.content/pom.xml b/ui.content/pom.xml index a3865cf8..3c78bb20 100644 --- a/ui.content/pom.xml +++ b/ui.content/pom.xml @@ -51,7 +51,6 @@ none com.valtech.aem - saas.ui.content content merge diff --git a/ui.frontend/src/main/webpack/site/js/buildSearch.ts b/ui.frontend/src/main/webpack/site/js/buildSearch.ts index e7f6f471..9d44f350 100644 --- a/ui.frontend/src/main/webpack/site/js/buildSearch.ts +++ b/ui.frontend/src/main/webpack/site/js/buildSearch.ts @@ -33,10 +33,12 @@ export const buildSearch = async ( autocompleteTriggerThreshold, autoSuggestText, noResultsText, + dataLayer, } = searchConfig const searchContainer = document.createElement('div') searchContainer.classList.add('cmp-saas') + searchContainer.dataset.cmpDataLayer = JSON.stringify(dataLayer) const searchFormElement = buildSearchForm() const searchResetButton = buildSearchClearButton() diff --git a/ui.frontend/src/main/webpack/site/js/components/searchResults.ts b/ui.frontend/src/main/webpack/site/js/components/searchResults.ts index c3770983..fc018c1b 100644 --- a/ui.frontend/src/main/webpack/site/js/components/searchResults.ts +++ b/ui.frontend/src/main/webpack/site/js/components/searchResults.ts @@ -5,6 +5,7 @@ type SearchResultsOptions = { searchItems: SearchItem[] tabId: string onSearchItemClick?: OnSearchItemClickCallback + dataLayer: object } export const generateSearchItemList = ( @@ -29,9 +30,11 @@ const buildSearchResult = ({ searchItems, tabId, onSearchItemClick, + dataLayer, }: SearchResultsOptions): HTMLDivElement => { const searchResults = document.createElement('div') searchResults.classList.add('cmp-saas__results') + searchResults.dataset.cmpDataLayer = JSON.stringify(dataLayer) const resultsItems = document.createElement('div') resultsItems.classList.add('cmp-saas__results-items') diff --git a/ui.frontend/src/main/webpack/site/js/components/searchResultsTab.ts b/ui.frontend/src/main/webpack/site/js/components/searchResultsTab.ts index 126655c5..c72a6356 100644 --- a/ui.frontend/src/main/webpack/site/js/components/searchResultsTab.ts +++ b/ui.frontend/src/main/webpack/site/js/components/searchResultsTab.ts @@ -39,6 +39,7 @@ const buildSearchResultsTab = ({ results, url, facetFilters, + dataLayer, } = tabResult if (resultsTotal) { @@ -51,13 +52,14 @@ const buildSearchResultsTab = ({ tabNumberOfResults: resultsTotal, title, onSwitchTab, - searchContainer, + searchContainer }) const searchResults = buildSearchResult({ searchItems: results, tabId, onSearchItemClick, + dataLayer }) searchForm?.parentNode?.insertBefore( diff --git a/ui.frontend/src/main/webpack/site/js/components/searchTabs.ts b/ui.frontend/src/main/webpack/site/js/components/searchTabs.ts index b6eb754a..c6c6500e 100644 --- a/ui.frontend/src/main/webpack/site/js/components/searchTabs.ts +++ b/ui.frontend/src/main/webpack/site/js/components/searchTabs.ts @@ -13,6 +13,7 @@ export type SearchTabOptions = { export type TabConfig = { title: string url: string + dataLayer: object } export type Suggestion = { @@ -31,6 +32,7 @@ export type Tab = { url: string suggestion?: Suggestion facetFilters?: FacetFilters + dataLayer: object } const CMP_SAAS_RESULTS_CLASS = 'cmp-saas__results' diff --git a/ui.frontend/src/main/webpack/site/js/searchElement.ts b/ui.frontend/src/main/webpack/site/js/searchElement.ts index f884b5e4..1892c2c9 100644 --- a/ui.frontend/src/main/webpack/site/js/searchElement.ts +++ b/ui.frontend/src/main/webpack/site/js/searchElement.ts @@ -34,7 +34,6 @@ export const getDataAttributeFromSearchElement = ( if (!element) { return null } - const searchConfigStr = element.dataset.searchConfig || '{}' const searchConfig = JSON.parse(searchConfigStr) as SearchConfig diff --git a/ui.frontend/src/main/webpack/site/js/types/searchOptions.ts b/ui.frontend/src/main/webpack/site/js/types/searchOptions.ts index 2bc6fa1c..9e3cdb41 100644 --- a/ui.frontend/src/main/webpack/site/js/types/searchOptions.ts +++ b/ui.frontend/src/main/webpack/site/js/types/searchOptions.ts @@ -17,4 +17,5 @@ export type SearchConfig = { autocompleteUrl: string autoSuggestText: string noResultsText: string + dataLayer: string } From 7cbcb72548b3b1b26cf06c995aee8e362d1f41e9 Mon Sep 17 00:00:00 2001 From: igorsimovski Date: Wed, 9 Mar 2022 14:35:04 +0100 Subject: [PATCH 2/2] data layer updates - initiate DOMContentLoadedEvent after search query (to register tab data layers) - update index.html (tab urls) --- ui.frontend/src/main/webpack/site/js/buildSearch.ts | 4 ++++ ui.frontend/src/main/webpack/static/index.html | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/ui.frontend/src/main/webpack/site/js/buildSearch.ts b/ui.frontend/src/main/webpack/site/js/buildSearch.ts index 31813fbd..3d716917 100644 --- a/ui.frontend/src/main/webpack/site/js/buildSearch.ts +++ b/ui.frontend/src/main/webpack/site/js/buildSearch.ts @@ -125,4 +125,8 @@ export const buildSearch = async ( callbacks, ) } + const DOMContentLoadedEvent = new Event('DOMContentLoaded', { + bubbles: true + }); + window.document.dispatchEvent(DOMContentLoadedEvent) } diff --git a/ui.frontend/src/main/webpack/static/index.html b/ui.frontend/src/main/webpack/static/index.html index ff70b54a..e6b39330 100644 --- a/ui.frontend/src/main/webpack/static/index.html +++ b/ui.frontend/src/main/webpack/static/index.html @@ -34,7 +34,7 @@

Welcome to Valtech AEM SAAS!