Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Add custom JavaScript to my custom component.

Avatar

Level 2

Hi, I have a custom search component 

rami4_0-1677199719355.png

and its resource super type: 

rami4_1-1677200108869.png

that only has these 2 html files. however its functionality is controlled by the search core component JavaScript, so any changes I make in the (/libs/core/wcm/components/search/v1/search/clientlibs/site/js/search.js) would reflect on that search component functionality. 
I want to add custom JavaScript file to control the search functionality instead of controlling it from the core component JavaScript. and also, because I won't be able to push the code changes on the core component JavaScript to the repo. 

How can I make that change? what files should I add/ change??

 

Thanks in advance!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

NO. See In this reply you added a custom clientlib and doesn't provide any category name.

Sady_Rifat_0-1677221618010.png

So, you need to give a clientlib name, com.myproject.components.search.

After that add this clientlib name where the core.wcm.components.search.v1 is referenced in your project. Generally this core.wcm.components.search.v1 is referenced with clientlib-base.

Hope you get my point.

View solution in original post

10 Replies

Avatar

Community Advisor

@rami4 

I think , you can create a clienttlib folder under the custom search component like below. 

you can see the example in we retail.

 

SivakumarKanoori_0-1677204216764.png

 

/apps/weretail/components/structure/search/clientlibs

in we retail , they have customized the css file, so same way you can customize the changes to JS as well.

 

 

Thanks,
Siva

Avatar

Level 2

I added clientlibs folder with css and js inside. it still uses the core component search JavaScript.

Avatar

Community Advisor

@rami4 :

 

What is the categories, and dependency name you have provided for the new clinetlib folder.

 

Thanks,
Siva

Avatar

Level 2

I haven't provided categories or dependencies

rami4_0-1677205273710.png

What should they be??

Avatar

Community Advisor

@rami4 :

Actually , clientlib folder primary type should be cq:clientLibraryfolder not the sling:folder.. 

Please create the clientlib folder with cq:clientLibraryfolder primarytype. then only aem treat that as clientlibs.

Thanks,
Siva

Avatar

Community Advisor

Hello @rami4 ,

1st give a proper name [ex: com.myproject.components.search] of your clientlib and add allowProxy property. 

 

Sady_Rifat_0-1677218454096.png

 

In your codebase search by this keyword "core.wcm.components.search.v1". In any of your clientlib dependency or embed option, this clientlib is integrated. Replace this clientlib category name with your custom clientlib name [com.myproject.components.search].

Avatar

Level 2

Thank you, 

Do you mean to rename the clientlib folder to "com.myproject.components.search"??

Avatar

Correct answer by
Community Advisor

NO. See In this reply you added a custom clientlib and doesn't provide any category name.

Sady_Rifat_0-1677221618010.png

So, you need to give a clientlib name, com.myproject.components.search.

After that add this clientlib name where the core.wcm.components.search.v1 is referenced in your project. Generally this core.wcm.components.search.v1 is referenced with clientlib-base.

Hope you get my point.

Avatar

Level 6

Hi, Use the overlay concept to enable the changes  for your custom component. In your case if you want to overlay search.js then bring it to your custom component code structure in apps folder  and perform the changes.

 

https://levelup.gitconnected.com/aem-5-best-practices-for-overlays-4babcbbb8a80

 

Thanks.