Add custom JavaScript to my custom component.

[rami4]

Hi, I have a custom search component 

and its resource super type: 

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!

[SivakumarKanoori]

@rami4 

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

you can see the example in we retail.

/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.

[rami4]

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

[SivakumarKanoori]

@rami4 :

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

[rami4]

I haven't provided categories or dependencies

What should they be??

[SivakumarKanoori]

@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.

[rami4]

did not work, still using the core component JavaScript

[Sady_Rifat]

Hello @rami4 ,

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

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].

[rami4]

Thank you, 

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

[Sady_Rifat · Accepted solution]

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

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.

[somen-sarkar]

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.