How to include CSS and JavaScript only on pages where a given component is used? | Community
Skip to main content
AEMing
AEMing
Level 2
November 17, 2015
Solved

How to include CSS and JavaScript only on pages where a given component is used?

  • November 17, 2015
  • 4 replies
  • 13345 views

I have a component that includes quite a bit of CSS and JavaScript only used for this specific component. Therefore I only want to include the CSS and JavaScript on pages where the component is used. How can I accomplish this?

I had hoped that this was somehow possible with the clientlib functionality, but I've been unable to find an example of this. It appears to be all or nothing when adding a clientlib folder within the component?

I could include the CSS and JavaScript in the .html used for specifying the layout of the component, but I'd really like for the CSS to be included in the header and the JavaScript at the bottom of the page. Doing it this way would include the CSS and JavaScript in the middle of the page where the component is used.

    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 kautuk_sahni

    Hi 
    Please have a look at the community article, this could help you
    Link:- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html
    //Example  (<cq:includeClientLib categories="jquerysamples" /> would help you)
    Add the JQuery Carousel API to a CQ:ClientLibraryFolder node
    You add CSS files and JQuery framework files to a cq:ClientLibraryFolder node to define the style of the client JSP. The JQuery framework file that is added is named jquery-1.6.3.min.js.
    In addition to the JQuery framework file, add the JQuery Carousel API library. This library enables you to create a CQ widget that retrieves images from the CQ DAM and displays the images within a carousel.
    You can download the Carousel API library from the following URL:
    http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/
    You need to retrieve the following JS file from the downloaded file: jquery.infinitecarousel.js.  To add CSS files and JQuery framework files to your component, add a cq:ClientLibraryFolder node to your component. After you create the node, set properties that allow the JSP script to find the CSS files and the JQuery library files.
    To add the JQuery framework, add a new node named clientlibs to your component (as discussed later). Add these two properties to this node.
     
    Name
    Type
    Value
    dependencies  
    String[]
    cq.jquery  
    categories  
    String[]
    jquerysamples  
    The dependencies property informs CQ to include the CSS files and JQuery libraries in the page. The categories property informs CQ which clientlibs must be included.
    After you create the Clientlibs folder, add the stlye.css file, the JQuery library files, and two map text files.
    Text files
    You have to add a text file to the clientlibs folder that maps to the JS files. The name of the text file is: js.txt. The js.txt file contains the JS file names: jquery-1.6.3.min.js and jquery.infinitecarousel.js.
    Add the files to the ClientLibs folder 
    Right-click /apps/carousel/components then select New, Node.
    Make sure that the node type is cq:ClientLibraryFolder and name the node clientlibs.
    Right click on clientlibs and select Properties. Add the two properties specified in the previous table to the node.
    On your file system, navigate to the folder where the JQuery JS files are located. Drag and drop the JS files to the clientlibs node by using CRXDE.
    On your file system, navigate where you placed the CSS files. Drag and drop the CSS files to the clientlibs folder by using CRXDE.
    Add a TXT file to the clientlibs folder named js.txt. Add the content specified in this section.
    To the top
    Modify the templateCarousel component to use the JQuery Carousel API 
    Modify the templateCarousel to use the JQuery Carousel API and reference the digital assets that you uploaded to the CQ DAM. To reference a digital asset located in the CQ DAM from your JSP, use the following URL:
    /content/dam/travel/1.jpg
    This URL references an image named 1.jpg that is used to populate the background of the CQ page. To reference the thumbnail image, use the following URL:
    /content/dam/travel/thumbs/1.jpg
    The following code represents the templateCarousel.jsp file that contains JQuery Carousel API logic.
    <%@include file="/libs/foundation/global.jsp"%>
    <cq:includeClientLib categories="jquerysamples" />
    <html>
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Adobe Experience Manager Custom Carousel Demo</title>
     
    <script type="text/javascript">
    $(function(){
        $(&#39;#carousel&#39;).infiniteCarousel({
            displayTime: 6000,
            textholderHeight : .25
        });
    });
    </script>
    <style type="text/css">
    body {
        padding-top: 50px;
    }
    #carousel {
        margin: 0 auto;
        width: 400px;
        height: 390px;
        padding: 0;
        overflow: scroll;
        border: 2px solid #999;
    }
    #carousel ul {
        list-style: none;
        width: 1500px;
        margin: 0;
        padding: 0;
        position: relative;
    }
    #carousel li {
        display: inline;
        float: left;
    }
    .textholder {
        text-align: left;
        font-size: small;
        padding: 6px;
        -moz-border-radius: 6px 6px 0 0;
        -webkit-border-top-left-radius: 6px;
        -webkit-border-top-right-radius: 6px;
    }
    </style>
    </head>
     
    <body>
     
    <div id="carousel">
        <ul>
            <li><img alt="" src="/content/dam/travel/1.jpg" width="500" height="213" /><p>Image 1.</p>
            </li>
            <li><img alt="" src="/content/dam/travel/2.jpg" width="500" height="213" /><p>Image 2</p>
            </li>
             <li><img alt="" src="/content/dam/travel/3.jpg" width="500" height="213" /><p>Image 3</p>
            </li>
            <li><img alt="" src="/content/dam/travel/4.jpg" width="500" height="213" /><p>Image 4</p>
            </li>
             <li><img alt="" src="/content/dam/travel/5.jpg" width="500" height="213" /><p>Image 5</p>
            </li>
        </ul>
    </div>
    <h3>This is an AEM example that uses five images retrieved from the CQ DAM and displayed within a custom Carousel component.</h3>
     
    </body>
    </html>
    I hope this would help you.
     
    Thanks and Regards
    Kautuk Sahni

    4 replies

    smacdonald2008
    smacdonald2008
    Level 10
    November 17, 2015

    In the component JSP - use the   cq:includeClientLib tag:

    <%@include file="/libs/foundation/global.jsp" %>
    <cq:includeClientLib categories="cq.widgets" /> 
    <html>
    <head>
    <title>Hello AngularJS !!!</title>
     
    </head>
    <body>
    <h1>Hello AngularJS!!!</h1>
    <h2>This page contains Angular JS functionality</h2>
     
    <div ng-app="">
         <p>Enter a value: <input type="text" ng-model="name"></p>
         <p ng-bind="name"></p>
    </div>
     
     
    </body>
    </html>

     

    Now only the JS and CSS in the client lib is loaded. You are correct - all CSS and JS in the client lib is loaded.

    AEMing
    AEMingAuthor
    Level 2
    November 17, 2015

    smacdonald2008 wrote...


    Now only the JS and CSS in the client lib is loaded. You are correct - all CSS and JS in the client lib is loaded.

     

    I don't quite follow you. I've already included the following in my page template:

    <sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.css @ categories='mysite'}" data-sly-unwrap/>

    And then on pages where my component is used I want to include additional CSS as to what is already included in the clientlib.

     
    Lokesh_Shivalingaiah
    Lokesh_Shivalingaiah
    Level 10
    November 18, 2015

    create a clientlibs folder within the component folder and add the js, css required for that component. and then include this clientlib in your component. 

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity ManagerAccepted solution
    Community Manager
    November 18, 2015

    Hi 
    Please have a look at the community article, this could help you
    Link:- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html
    //Example  (<cq:includeClientLib categories="jquerysamples" /> would help you)
    Add the JQuery Carousel API to a CQ:ClientLibraryFolder node
    You add CSS files and JQuery framework files to a cq:ClientLibraryFolder node to define the style of the client JSP. The JQuery framework file that is added is named jquery-1.6.3.min.js.
    In addition to the JQuery framework file, add the JQuery Carousel API library. This library enables you to create a CQ widget that retrieves images from the CQ DAM and displays the images within a carousel.
    You can download the Carousel API library from the following URL:
    http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/
    You need to retrieve the following JS file from the downloaded file: jquery.infinitecarousel.js.  To add CSS files and JQuery framework files to your component, add a cq:ClientLibraryFolder node to your component. After you create the node, set properties that allow the JSP script to find the CSS files and the JQuery library files.
    To add the JQuery framework, add a new node named clientlibs to your component (as discussed later). Add these two properties to this node.
     
    Name
    Type
    Value
    dependencies  
    String[]
    cq.jquery  
    categories  
    String[]
    jquerysamples  
    The dependencies property informs CQ to include the CSS files and JQuery libraries in the page. The categories property informs CQ which clientlibs must be included.
    After you create the Clientlibs folder, add the stlye.css file, the JQuery library files, and two map text files.
    Text files
    You have to add a text file to the clientlibs folder that maps to the JS files. The name of the text file is: js.txt. The js.txt file contains the JS file names: jquery-1.6.3.min.js and jquery.infinitecarousel.js.
    Add the files to the ClientLibs folder 
    Right-click /apps/carousel/components then select New, Node.
    Make sure that the node type is cq:ClientLibraryFolder and name the node clientlibs.
    Right click on clientlibs and select Properties. Add the two properties specified in the previous table to the node.
    On your file system, navigate to the folder where the JQuery JS files are located. Drag and drop the JS files to the clientlibs node by using CRXDE.
    On your file system, navigate where you placed the CSS files. Drag and drop the CSS files to the clientlibs folder by using CRXDE.
    Add a TXT file to the clientlibs folder named js.txt. Add the content specified in this section.
    To the top
    Modify the templateCarousel component to use the JQuery Carousel API 
    Modify the templateCarousel to use the JQuery Carousel API and reference the digital assets that you uploaded to the CQ DAM. To reference a digital asset located in the CQ DAM from your JSP, use the following URL:
    /content/dam/travel/1.jpg
    This URL references an image named 1.jpg that is used to populate the background of the CQ page. To reference the thumbnail image, use the following URL:
    /content/dam/travel/thumbs/1.jpg
    The following code represents the templateCarousel.jsp file that contains JQuery Carousel API logic.
    <%@include file="/libs/foundation/global.jsp"%>
    <cq:includeClientLib categories="jquerysamples" />
    <html>
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Adobe Experience Manager Custom Carousel Demo</title>
     
    <script type="text/javascript">
    $(function(){
        $(&#39;#carousel&#39;).infiniteCarousel({
            displayTime: 6000,
            textholderHeight : .25
        });
    });
    </script>
    <style type="text/css">
    body {
        padding-top: 50px;
    }
    #carousel {
        margin: 0 auto;
        width: 400px;
        height: 390px;
        padding: 0;
        overflow: scroll;
        border: 2px solid #999;
    }
    #carousel ul {
        list-style: none;
        width: 1500px;
        margin: 0;
        padding: 0;
        position: relative;
    }
    #carousel li {
        display: inline;
        float: left;
    }
    .textholder {
        text-align: left;
        font-size: small;
        padding: 6px;
        -moz-border-radius: 6px 6px 0 0;
        -webkit-border-top-left-radius: 6px;
        -webkit-border-top-right-radius: 6px;
    }
    </style>
    </head>
     
    <body>
     
    <div id="carousel">
        <ul>
            <li><img alt="" src="/content/dam/travel/1.jpg" width="500" height="213" /><p>Image 1.</p>
            </li>
            <li><img alt="" src="/content/dam/travel/2.jpg" width="500" height="213" /><p>Image 2</p>
            </li>
             <li><img alt="" src="/content/dam/travel/3.jpg" width="500" height="213" /><p>Image 3</p>
            </li>
            <li><img alt="" src="/content/dam/travel/4.jpg" width="500" height="213" /><p>Image 4</p>
            </li>
             <li><img alt="" src="/content/dam/travel/5.jpg" width="500" height="213" /><p>Image 5</p>
            </li>
        </ul>
    </div>
    <h3>This is an AEM example that uses five images retrieved from the CQ DAM and displayed within a custom Carousel component.</h3>
     
    </body>
    </html>
    I hope this would help you.
     
    Thanks and Regards
    Kautuk Sahni

    Kautuk Sahni
      Terms & ConditionsAccessibility statement

      Loading footer...