This conversation has been locked due to inactivity. Please create a new post.
This conversation has been locked due to inactivity. Please create a new post.
Hi All,
I am working on customizing the Data Layer for AEM's Accordion Component -
Default window.adobeDataLayer.getState() value -
"accordion_copy_copy_":{
"jcr:primaryType":"nt:unstructured",
"iconExpand":"icon-plus",
"jcr:created":"Wed Jun 15 2022 01:19:48 GMT+0000",
"jcr:lastModified":"Thu Jul 07 2022 11:42:16 GMT+0000",
"iconCollapse":"icon-minus",
"expandedItems":[
"richtext"
],
"singleExpansion":"true",
"sling:resourceType":"brandA/components/content/accordion",
"richtext_1084009683":{
"jcr:primaryType":"nt:unstructured",
"cq:panelTitle":"When will the app be available for Android users?",
"jcr:created":"Wed Jun 15 2022 05:58:49 GMT+0000",
"text":"<p>brandA is available for Android users and iPhone users! ",
"jcr:lastModified":"Tue Sep 20 2022 20:42:46 GMT+0000",
"sling:resourceType":"brandA/components/content/richtext",
"textIsRich":"true"
}
}
Solved! Go to Solution.
Please check implementation here
Please check https://github.com/adobe/aem-core-wcm-components/blob/main/DATA_LAYER_INTEGRATION.md#enabling-the-da...
you need to extend the Model
@arunpatidar - Thanks for the response.
I am already implementing a custom model for the accordion. I am able to add custom property to the Accordion model but not to get it for the Panel Container/item used by Accordion.
@Model(adaptables = {SlingHttpServletRequest.class}, adapters = { CustomAccordion.class },
resourceType = {CustomAccordionImpl.RESOURCE_TYPE}, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions =ExporterConstants.SLING_MODEL_EXTENSION)
public class CustomAccordionImpl implements CustomAccordion {
public static final String RESOURCE_TYPE = "platform/components/content/accordion/v1/accordion";
private static final Logger log = LoggerFactory.getLogger(CustomAccordionImpl.class);
@Self
@Via(type = ResourceSuperType.class)
@Delegate
private Accordion accordion;
@Self
private SlingHttpServletRequest request;
@ScriptVariable
private Page currentPage;
@ScriptVariable
protected ComponentContext componentContext;
@ScriptVariable
private ResourceResolver resolver;
@Override
public String getData() {
Resource accordionResource = this.request.getResource();
if (ComponentUtils.isDataLayerEnabled(accordionResource)) {
Map<String, Object> accordionProperties = new HashMap<String,Object>();
accordionProperties.put("@type", accordionResource.getResourceType());
accordionProperties.put("repo:modifyDate", PlatformUtils.isoDateFormat(accordion.getData().getLastModifiedDate(), dateutil));
accordionProperties.put("parentId", accordion.getData().getParentId());
//Adding New Custom Properties
accordionProperties.put("Link Name", "accordion.getData().getTitle()"+"-accordion item title");
accordionProperties.put("Component Name", accordion.getData().getId()+"-component title");
String bylineComponentID = ComponentUtils.getId(accordionResource, this.currentPage, this.componentContext);
try {
return String.format("{\"%s\":%s}",
bylineComponentID,
// Use the ObjectMapper to serialize the bylineProperties to a JSON string
new ObjectMapper().writeValueAsString(accordionProperties));
} catch (JsonProcessingException e) {
log.error("Unable to generate dataLayer JSON string", e);
}
}
return null;
}
}
However, how to handle the same for ${accordion.items} in the same class ?
data-cmp-data-layer="${item.data.json}"
Please check implementation here