Add custom JavaScript to my custom component. | Community
Skip to main content
R
rami4
Level 2
February 24, 2023
Solved

Add custom JavaScript to my custom component.

  • February 24, 2023
  • 3 replies
  • 2708 views

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!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Sady_Rifat

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.

3 replies

SivakumarKanoori
Community Advisor
SivakumarKanooriCommunity Advisor
Community Advisor
February 24, 2023

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

 

 

Thanks,Siva
    R
    rami4Author
    Level 2
    February 24, 2023

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

      SivakumarKanoori
      Community Advisor
      SivakumarKanooriCommunity Advisor
      Community Advisor
      February 24, 2023

      @rami4 :

       

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

       

      Thanks,Siva
        Sady_Rifat
        Community Advisor
        Sady_RifatCommunity Advisor
        Community Advisor
        February 24, 2023

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

          R
          rami4Author
          Level 2
          February 24, 2023

          Thank you, 

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

            Sady_Rifat
            Community Advisor
            Sady_RifatCommunity AdvisorAccepted solution
            Community Advisor
            February 24, 2023

            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
              Community Advisor
              somen-sarkarCommunity Advisor
              Community Advisor
              February 24, 2023

              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.

                Terms & ConditionsAccessibility statement

                Loading footer...