Expand my Community achievements bar.

SOLVED

Where is the javascript file responsible for the Accordion component?

Avatar

Level 2
Hi AEM aficionados,
 
I am using AEM Cloud, and trying to customize the Accordion component from the "core.wcm.components" package.
 
For context, I hope to slow down the toggle into a smoother transition with a 1 second delay.

Anyway, I have overridden the file '/clientlibs/editor/js/accordion.js', but the component still follows the default behaviour.

I realized that the "accordion.js" file may not be the one controlling the component's behaviour, as it uses the selector `data-cmp-is="accordion"` to grab the element from the DOM and to initiate the toggle behaviour.
 
accordion.js
var NS = "cmp";
var IS = "accordion";

var selectors = {
    self: "[data-" + NS + '-was="' + IS + '"]'
};​

 

However, some other javascript file removes the `data-cmp-is="accordion"` attribute from the html file below once it is rendered! You can reproduce this in your browser.
 
accordion.html
<div data-sly-use.accordion="com.adobe.cq.wcm.core.components.models.Accordion"
     data-panelcontainer="${wcmmode.edit && 'accordion'}"
     id="${accordion.id}"
     class="cmp-accordion"
     data-cmp-is="accordion"
     data-cmp-data-layer="${accordion.data.json}"
     data-cmp-single-expansion="${accordion.singleExpansion}"
     data-placeholder-text="${wcmmode.edit && 'Please drag Accordion item components here 123' @ i18n}">

 

I suspect that whatever javascript that removed the `data-cmp-is="accordion"` is also controlling its behavior, instead of the "accordion.js" file.
 
Does anyone knows where that file is and how to override it?

Thanks,
1 Accepted Solution

Avatar

Correct answer by
Level 4

Just follow as mentioned in screenshot. This accordion is using the core accordion.

accordion/.content.xml

kaikubad_0-1679557261582.png

accordion/clientlib/.content.xml

kaikubad_1-1679557412052.png

 

You need to add the js on clientlib and define a category and override the existing clientlib. The existing clientlib is available here https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc...

also you can find it on your crx/de 
/apps/core/wcm/components/accordion/v1/accordion/clientlibs

kaikubad_0-1679571055093.png

 

2 Replies

Avatar

Correct answer by
Level 4

Just follow as mentioned in screenshot. This accordion is using the core accordion.

accordion/.content.xml

kaikubad_0-1679557261582.png

accordion/clientlib/.content.xml

kaikubad_1-1679557412052.png

 

You need to add the js on clientlib and define a category and override the existing clientlib. The existing clientlib is available here https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc...

also you can find it on your crx/de 
/apps/core/wcm/components/accordion/v1/accordion/clientlibs

kaikubad_0-1679571055093.png

 

page footer