Article summary

Summary

Discusses how to build an Adobe Experience Manager 6.3 web site that represents a Toy Store site. 

A special thank you to Ranta, Navin Kaushal, and Prince Shivhare, top AEM community members, for testing this article to ensure it works.

Digital Marketing Solution(s) Adobe Experience Manager 6.3
Audience Developer
Required Skills CSS, HTML 
Version 6.3

Note:

If you are using Experience Manager 6.3.3 or 6.4, you can use the AEM Carousel Core Component instead of creating a custom one. For details, see Working with Adobe Experience Manager Carousel Core Components.

Prerequisites

To follow along with this Experience Manager development article, you need to build the Experience Manager Toy Site located here: Creating your First Adobe Experience Manager 6.3 website.

As an alternative, you can install the following package. 

Download

Introduction

The ability to add custom components to an Adobe Experience Manager site is important as it offers you flexibility to address your business requirements. When developing custom components, you can use third-party libraries of which there are many. For example, you can use JQuery plug-ins to create custom components that can improve the look and feel of your site. For information about some existing JQuery plug-ins, see 50 Amazing jQuery Plugins That You Should Start Using Right Now.

As an example of how to add custom components to an AEM site, this article is going to modify the Experience Manager Toy Site. This site contains a static image, as shown here.

Banner
A static image in the Toy Store site

To improve the look and feel of this site, the static image is replaced with a carousel component that displays different images located in the Experience Manager DAM.

carousel
A Carousel component located in the AEM Toy Site

Notice that this carousel component displays images retrieved from the Experience Manager DAM. Each image is displayed for a pre-defined time period and then the next image is displayed. The component rotates through an established list of images and then starts over. This development article guides you through how to build this carousel component by using JQuery.

Note:

To keep this article simple, the images are hard-coded into the custom Carousel component. 

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 the Experience Manager one.

In addition to the JQuery framework file, add the JQuery Carousel API library. This library enables you to create an Experience Manager component that retrieves images from the Experience Manager 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 at the following JCR location:

/apps/summit_toys/components

 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.

  • dependencies  (String[]) - cq.jquery
  • categories  (String[]) - cq.jquerycar

 

clientlib
Clientlibs for the ToyStore site

Add the files to the ClientLibs folder by performing these tasks:

  1. Right-click /apps/summit_toys/components then select New, Node.
  2. Make sure that the node type is cq:ClientLibraryFolder and name the node clientlibs.
  3. Right click on clientlibs and select Properties. Add the two properties specified in the previous table to the node.
  4. On your file system, navigate to the folder where the jquery.infinitecarousel.js is located. Upload this JS file.
  5. Add a TXT file to the clientlibs folder named js.txt. Add jquery.infinitecarousel.js to this file.

Create the Carousel component


	




Create a new component named toyCarousel located at the following JCR location: /apps/summit_toys/components. To reference a digital asset located in the Experience Manager DAM from your component, use the following URL:

/content/dam/summit-toys/116360141_WM.jpeg

This URL references an image named 116360141_WM.jpeg that is used to populate the background of the carousel component. 

To create a carousel component, perform these tasks:

1. In CRXDE Lite, right-click /apps/summit_toys/components, then select Create, Create Component.
4. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter toyCarousel.
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.
  • Super Resource Type: The component to inherit from. Specify /lib/foundation/components.
  • Group: The name of the category under the sidekick where the component appears. Specify General. 

5. Select Next for Advanced Component Settings and Allowed Parents.

6. Open carousel.jsp located at: /apps/summit_toys/components/toyCarousel/toyCarousel.jsp.

7. Enter the following JSP code.

<%@include file="/libs/foundation/global.jsp"%>
<cq:includeClientLib categories="cq.jquerycar" />
<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(){
    $('#carousel').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/summit-toys/101387006_WM.jpeg" width="500" height="213" /><p>Toy Pic1</p>
        </li>
        <li><img alt="" src="/content/dam/summit-toys/107832111_WM.jpeg" width="500" height="213" /><p>Toy Pic2</p>
        </li>
         <li><img alt="" src="/content/dam/summit-toys/116360141_WM.jpeg" width="500" height="213" /><p>Toy Pic3</p>
        </li>
        <li><img alt="" src="/content/dam/summit-toys/27156923_WM.jpeg" width="500" height="213" /><p>Toy Pic4</p>
        </li>
         <li><img alt="" src="/content/dam/summit-toys/42458013_WM.jpeg" width="500" height="213" /><p>Toy Pic5</p>
        </li>
    </ul>
</div>
</body>
</html>

Note:

You can adjust the style of the Carousel component by adjusting the CSS in this file. 

Reference the toyCarousel component in the site

The last step is to include the toyCarousel component in the site. To perform this tasks, open the content.html file located here:

/apps/summit_toys/components/structure/homepage/content.html

Replace the code in that file with the following code.  Notice that the toyCarousel component is referenced by using this line of code: 

<div data-sly-resource="${'hero' @ resourceType='/apps/summit_toys/components/toyCarousel'}"></div>

div class="wrapper row6">
  <main class="hoc clear"> 
    <div data-sly-resource="${'hero' @ resourceType='/apps/summit_toys/components/toyCarousel'}"></div>
  </main>
</div>
<div class="wrapper row3">
  <div class="hoc container clear"> 
    <!-- ###### -->
    <div class="group">
      <section class="one_half first">
        <h6 class="heading font-x3 btmspace-50">Upcoming Events</h6>
        <ul class="nospace">
          <li class="btmspace-30">
            <article>
              <h4 class="nospace"><a href="#">Tortor eleifend donec nibh odio fringilla non aliquet ut sollicitudin sit amet</a></h4>
              <time class="font-xs" datetime="2045-04-06">Friday, 6<sup>th</sup> April 2045</time>
            </article>
          </li>
          <li class="btmspace-30">
            <article>
              <h4 class="nospace"><a href="#">Nisi duis fermentum hendrerit purus in efficitur nulla justo erat eleifend</a></h4>
              <time class="font-xs" datetime="2045-04-05">Thursday, 5<sup>th</sup> April 2045</time>
            </article>
          </li>
          <li>
            <article>
              <h4 class="nospace"><a href="#">Vitae laoreet sodales lorem in sapien quam pulvinar a orci pharetra tempor</a></h4>
              <time class="font-xs" datetime="2045-04-04">Wednesday, 4<sup>th</sup> April 2045</time>
            </article>
          </li>
        </ul>
      </section>
      <section class="one_half">
        <h6 class="heading font-x3 btmspace-50">Mailing List</h6>
        <p>Sed eget convallis mauris vestibulum dictum velit imperdiet urna consectetur maecenas sed lectus tellus ut in vestibulum dolor.</p>
        <p class="btmspace-30">At sodales cursus nulla vitae sodales nisi ut iaculis neque maecenas placerat.</p>
        <form id="newsletter" method="post" action="#">
          <fieldset>
            <legend>Newsletter:</legend>
            <input class="btmspace-15" type="text" value="" placeholder="Name">
            <input class="btmspace-15" type="text" value="" placeholder="Email">
            <button type="submit" value="submit">Submit</button>
          </fieldset>
        </form>
      </section>
    </div>
    <!-- ###### -->
    <div class="clear"></div>
  </div>
</div>

See also

Join the AEM community at: Adobe Experience Manager Community

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy