Append appropriate domain value to custom js file placed in clientlibs

[cquser1]

Hi All,

I have a js file[which has logic to render some banner like content on page] which is placed under etc/clientlibs[but not mentioned in js.txt, to avoid conflicts with other custom files]. Here in this file am referring some images from  /etc/clientlibs/images folder. While its in AEM, the images referred from /etc/clientlibs/images location will work fine, but this js file can also be referenced by any other page on any other website[to render banner on any site basically].

I need to append the appropriate domain before /etc/clientlibs/images being referred in the js file,so that this js along with some styling copied on any site works fine. I am getting the domain value from backend by a java method[i.e, if I do data-sly-use.config="com.xyz.abc" and in my html if I have

<script src="${config.Domain}/etc/clientlibs/.../abc.js"></script>.

But I am not getting how do I do this in custom js[say abc.js] file I have.

[cquser1]

Hi All,

Any thoughts on this will be helpful.

[VeenaVikraman]

Hi

    Here is my understanding of your question

•   You have a js file , and it has some reference to images in a subfolder. Let's say you js folder is /etc/clientlibs/js/abc.js and your image is in /etc/clientlib/images/abc.jsp
  • If this is the case , then the best way to refer your image is as per this answer in Stack overflow url - Linking CSS to images in a subfolder - Stack Overflow  . Always refer your files using relative path so that the domain is picked up as per your current state

Question :- Don't you think you might face some CORS issue if any other website try to access files in AEM ? Is this something which is already in place or are you developing it from scratch now ?

     Lets assume you don't face any issue in referring you /etc/clientlibs/.../abc.js" url - Linking CSS to images in a subfolder - Stack Overflow  Then this is the best way to refer your images inside your js .

PS:- I have not tested this and cannot give you 100% guarantee on the solution.

Thanks

Veena

[cquser1]

Hi Veena,

Thank you for your reply.

Am not sure if this solution will fit my use-case. Please give me couple of days. will revert back.

[smacdonald2008]

First off - you state:

/etc/clientlibs/images folder

This is not best practice - you should be placing your digital assets in the AEM DAM.

"render some banner like content on page"

We are showing you best practice to render a Banner in AEM using HTL and Bootstrap --

Scott's Digital Community: Creating an Experience Manager Responsive Banner Component

I am not sure why you need to do all of this to create a nice responsive Banner in AEM. Also - as we will show in this article - keep all images in the DAM.

Prince Shivhare​ - what are your thoughts here?

[Prince_Shivhare · Accepted solution]

Sure Scott!

We should not make a code to very complex, We can create a banner component in very easy way. cquser1 you can check once the article will be live. the component is responsive as well. and many of things in component is author-able.

Images should always be placed in DAM.

and If you want a good and responsive component, I don't think it needs a js. you will see in this bootStrap banner article.

Regards,

Prince