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.

The code used in this article was based on code created by Adobe employee Dennis selfridge. Thank you Dennis!  

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

Note:

This article uses CRXDE lite to build the example Adobe Experience Manager site. The objective of this article is to show you basic development patterns of building an AEM site (for example, using HTL syntax to include other files, and so on) as opposed to the tools you can use. Typically, you use a tool such as Eclipse to start an AEM project and a template language such as Lazybones. For information, see Creating an Adobe Experience Manager project using Lazybones.

Secondly, over the coming weeks, there are going to be follow up articles based on this example site that discusses additional Experience Manager functionality, such as using the Content Hub and using AEM Core Components. As those articles are created, they will be linked from this article. 

Introduction

You can develop an enterprise scale website using Adobe Experience Manager 6.3 that contains different sections such as:

  • header
  • body
  • menu
  • footer

In this development article, you will learn the process of building AEM 6.3 templates and components and adding HTML and CSS to build a site. You will also learn how to perform these tasks: 

  • modularizing the page-rendering components 
  • defining local supertypes 
  • making use of AEM supertypes

The following illustration shows the Toy Store website that is developed by following the steps in this article. 

An Experience Manager web site

Create an application folder structure

Create an application folder structure that contains templates, components, and pages by using CRXDE Lite.

An Experience Manager folder structure

The following describes each application folder:

  • application name: contains all of the resources that an application uses. The resources can be templates, pages, components, and so on. 
  • components: contains components that your application uses. 
  • content: contains page components. A page component is a script such as a JSP file.
  • struture: contains indivudual components that your application uses. For example, a header. 
  • template: contains templates on which you base page components. 

To create an application folder structure:

  1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Go to CRXDE Lite at http://localhost:4502/crx/de/index.jsp.
  3. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  4. Enter the folder name into the Create Folder dialog box. Enter summit_toys
  5. Repeat steps 1-4 for each folder specified in the previous illustration. 
  6. Click the Save All button.

Note:

You have to click the Save All button when working in CRXDE Lite for the changes to be made.

Create a template for the summit toys site

You can create a template by using CRXDE Lite. An AEM template enables you to define a consistent style for the pages in your application. A template comprises of nodes that specify the page structure. For more information about templates, see Templates.

To create a template, perform these tasks:

1. Go to Select CRXDE Lite at http://localhost:4502/crx/de/index.jsp.
2. Right-click the template folder (within your application), select Create, Create Template.
3. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter contentpage
  • Title: The title that is assigned to the template. Enter Summit Toys Base Content Page.
  • Description: The description that is assigned to the template.
  • Resource Type: The component's path that is assigned to the template and copied to implementing pages. Enter summit_toys/components/structure/contentpage.
  • Ranking: The order (ascending) in which this template will appear in relation to other templates. Setting this value to 1 ensures that the template appears first in the list.

4. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.
5. Click Next for Allowed Parents.
6. Select OK on Allowed Children.

Create a Page Rendering Component

Components are re-usable modules that implement specific application logic to render the content of your web site. You can think of a component as a collection of scripts (for example, JSPs, Java servlets, and so on) that completely realize a specific function. In order to realize this functionality, it is your responsibility as a CQ developer to create scripts that perform specific functionality. For more information about components, see Components.

By default, a component has at least one default script, identical to the name of the component. To create a render component, perform these tasks:

1. Go to Select CRXDE Lite at http://localhost:4502/crx/de/index.jsp.
2. Right-click /apps/summit_toys/components/structure, then select Create, Create Component.
3. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter contentpage
  • Title: The title that is assigned to the component. Enter Base Content Page.
  • Description: The description that is assigned to the template. Enter The core page component for the Summit Toy Site.
  • Super Type: wcm/foundation/components/page

4. In the Create Component dialog, Click OK. 
5. Add the following HTML files under contentpage (right click, select Create, Create file).

  • body.html
  • content.html
  • copyright.html
  • footer.html
  • head.html
  • header.html
  • navigation.html

6. Add the code located in the following sections to the corresponding file. 

The following illustration shows the file structure that you should have in CRXDE lite. 

AEM app folder structure

body.html

The following code represents the body.html file. 

<div class="wrapper row1">
	<div data-sly-include="header.html"></div>
  </div>
</div>
<div class="wrapper row0">
  <div id="topbar" class="hoc clear"> 
	<div data-sly-include="navigation.html"></div>
  </div>
</div>
<div data-sly-include="content.html"></div>
<div class="wrapper row4">
	<div data-sly-include="footer.html"></div>
</div>
<div class="wrapper row5">
	<div data-sly-include="copyright.html"></div>
</div>

content.html

The following represents the content.html file. 

<h1>Content</h1>

copyright.html

The following code represents the copyright.html file. 

<h1>Copyright</h1>

footer.html

The following code represents the footer HTML file. 

<h1>Footer</h1>

head.html

The following code represents the head HTML file. 

<h3>Why is this messing up my Super Type??</h3>

header.html

The following code represents the header HTML file.

<h1>Header</h1>

The following code represents the navigation HTML file. 

<h1>Navigation</h1>

Create a Root Page based on the Summit Toys Base Content Page template

Create a root page based on the Summit Toys Base Content Page template by using the Experience Manager Touch UI. Perform these tasks: 

1. Click the Adobe Experience Manager in the upper left corner. 

2. Navigate to Sites.

3. Click Create, Page.

4. Select the Summit Toys Base Content Page template and click Next.

The template created in this article

5. Create a page titled Summit Toys and open it for editing.

The following illustration shows the Summit Toys page. 

The first version of the Summit Toys website

This template inherits (the sling:resourceSuperType property) from wcm/foundation/components/page.

Perform these tasks: 

  1. Navigate to /apps/summit_toys/components/structure/contentpage.
  2. Open the head.html and view the static content.
  3. Now delete that file, return to the browser and refresh your page.
  4. Notice the page title now appears in your browser.
  5. View the source again (close the tab already open as content has changed).
  6. Notice all of the foundation code and includes have now become available.

The following illustration reflects the changes made to the web page. 

Changes made as a result of deleting head.html

Note:

Be sure to delete this file. If you do not, it impacts the site when CSS is added to the site in later steps.

Integrate static HTML into Experience Manager

To continue building the Toys Summit web page, HTML is added to the HTML files under /apps/summit_toys/components/structure/contentpage.

Add the HTML located in this section to the corresponding files. 

Copyright HTML

Add the following HTML code to the copyright.html file. 

<div id="copyright" class="hoc clear"> 
    <!-- ############# -->
    <p class="fl_left">Copyright &copy; 2016 - All Rights Reserved - <a href="#">Domain Name</a></p>
    <p class="fl_right">Template by <a target="_blank" href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
    <!-- ######### -->
</div>

Footer HTML

Add the following HTML code to the Footer HTML file. 

<footer id="footer" class="hoc clear"> 
    <!-- ############ -->
    <div class="one_quarter first">
      <h6 class="title">Our Mission</h6>
      <p>Duis justo eros elementum a porttitor in dignissim vitae magna phasellus vitae sapien rhoncus sodales augue et dignissim quam in nec sem.</p>
    </div>
    <div class="one_quarter">
      <h6 class="title">Headquarters</h6>
      <ul class="nospace linklist contact">
        <li><i class="fa fa-map-marker"></i>
          <address>
          Street Name &amp; Number, Town, Postcode/Zip
          </address>
        </li>
        <li><i class="fa fa-phone"></i> +00 (123) 456 7890<br>
          +00 (123) 456 7890</li>
        <li><i class="fa fa-fax"></i> +00 (123) 456 7890</li>
        <li><i class="fa fa-envelope-o"></i> info@domain.com</li>
      </ul>
    </div>
    <div class="one_quarter">
      <h6 class="title">Board of Directors</h6>
      <ul class="nospace linklist">
        <li><a href="#">Nunc habitant tristique</a></li>
        <li><a href="#">Senectus netu malesuada</a></li>
        <li><a href="#">Fames turpis egestas in</a></li>
        <li><a href="#">Cursus vulputate ultricies</a></li>
        <li><a href="#">Aenean lectus ultricies</a></li>
      </ul>
    </div>
    <div class="one_quarter">
      <h6 class="title">Upcoming Events</h6>
      <ul class="nospace linklist">
        <li>
          <article>
            <h2 class="nospace font-x1"><a href="#">At lacus scelerisque</a></h2>
            <time class="font-xs block btmspace-10" datetime="2045-04-06">Friday, 6<sup>th</sup> April 2045</time>
            <p class="nospace">Feugiat massa suspendisse ut finibus odio nam sit amet&hellip;</p>
          </article>
        </li>
        <li>
          <article>
            <h2 class="nospace font-x1"><a href="#">Nullam viverra vel</a></h2>
            <time class="font-xs block btmspace-10" datetime="2045-04-05">Thursday, 5<sup>th</sup> April 2045</time>
            <p class="nospace">Sapien eu malesuada tincidunt tristique ultricies rhoncus&hellip;</p>
          </article>
        </li>
      </ul>
    </div>
    <!-- ########### -->
</footer>

Header HTML

Add the following HTML code to the Header HTML file. 

<header id="header" class="hoc clear"> 
    <!-- ########### -->
    <div id="logo" class="fl_left">
      <h1><a href="../index.html">The Summit Toy Store</a></h1>
		<h3><i>"Your ticket to play in Vegas!"</i></h3>
    </div>
    <div id="quickinfo" class="fl_right">
      <ul class="nospace inline">
        <li><strong>Search Products</strong><br></li>
      </ul>
      <form id="newsletter" method="post" action="#">
          <fieldset>
            <legend>Newsletter:</legend>
            <input class="btmspace-15" type="text" value="" placeholder="Product, Description">
            <button type="submit" value="submit">Submit</button>
          </fieldset>
    </form>
    </div>
    <!-- ######### -->
</header>

The following code represents the Navigation HTML file. 

<div id="topbar" class="hoc clear"> 
    <!-- ########### -->
    <nav id="mainav" class="fl_left">
      <ul class="clear">
        <li><a href="/content/summit-toys/en.html">Home</a></li>
        <li><a href="/content/summit-toys/en/new-arrivals.html">New Arrivals</a></li>
        <li class="active"><a href="/content/summit-toys/en/best-sellers.html">Best Sellers</a></li>
        <li><a href="/content/summit-toys/en/games-toys.html">Games & Toys</a></li>
        <li><a href="/content/summit-toys/en/gifts.html">Gifts</a></li>
        <li><a href="/content/summit-toys/en/contact-us.html">Contact Us</a></li>
      </ul>
    </nav>
    <!-- ######### -->
    <div class="fl_right">
      <ul class="faico clear">
        <li><a class="faicon-facebook" href="#"><i class="fa fa-facebook"></i></a></li>
        <li><a class="faicon-pinterest" href="#"><i class="fa fa-pinterest"></i></a></li>
        <li><a class="faicon-twitter" href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a class="faicon-dribble" href="#"><i class="fa fa-dribbble"></i></a></li>
        <li><a class="faicon-linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
        <li><a class="faicon-google-plus" href="#"><i class="fa fa-google-plus"></i></a></li>
        <li><a class="faicon-rss" href="#"><i class="fa fa-rss"></i></a></li>
      </ul>
    </div>
    <!-- ######### -->
</div>

Updated web page

At this point, the website is updated and contains more content as a result of adding the HTML to the various files. The following illustration shows the updated web page. 

Updated web page

Integrate Style into the Experience Manager template

Add CSS and other files such as images to Experience Manager so your site becomes richer in terms of look and feel. Style drives the user experience so it is important that you add CSS that enhances the user experience. Once you add the CSS and other dependencies, the Toys site looks like the following illustration. 

 

The Toy Store site with Styles included

The Experience Manager Clientlib that contains the CSS is located at the following JCR location. 

/etc/clientlibs/summit-toys

The following illustration shows the Clientlib. 

 

The Clientlib for the Toy Store site

Download

To add the style to the site, download and install the package by using Package Manager. 

Note:

Notice that the clientlib is included by using this syntax: 

<sly data-sly-call="${clientLib.all @ categories='summit.style'}" />

This line of code is located in the headlibs.html file, which was added by the package. This syntax is HTL syntax. Note that the style sheet and css images are there and the colors and structure are looking stylized.

Create a New Page Component using a Super Type

Now that you have a base site, you can start to look at structural similarities to identify how many templates that are required. While the goal is to minimize the overall number of templates, some
pages like the Home Page are better served with their own “Big X” to ensure better governance and less opportunity for authors to break the design.

This section creates an additional Home Page template and component for the Toys Site. Perform these tasks: 

1. Navigate to the /apps/summit_toys/templates directory.

2. Right click on templates and create a template named homepage.

3. Set a sling resource type: summit_toys/components/structure/homepage.

4. Set the allowed Paths value to: /content/summit-toys(/.*)?.

Create the homepage page component

Create the homepage component by performing these steps: 

1.Navigate to /apps/summit_toys/components/structure and create a component called homepage.

2. Create the property sling:resourceSuperType that points to summit_toys/components/structure/contentpage.

3. Rename the homepage.jsp to content.html.

4. Enter some static text for now so the page is displayed. For example, <p>Hello Content Page</p>.

Create the Home Page

Create a Home page based on the homepage template by using the AEM Touch UI. Perform these tasks:

1. Click the Adobe Experience Manager in the upper left corner.

2. Navigate to Sites and select Summit Toys, as shown here.

 

3. Click Create, Page.

4. Select the Home Page template, as shown here.

Home Page template

5. Click Next.

6. Create a page with the following values:

  • Name: en
  • Title: English

The following illustration shows the new page. Notice the HTML that was entered into the content.html file (created earlier in this section). 

 

The en page of the website

Note:

Using English/en is best practice to allow multi-lingual versions of the same site to use the
same core structure (as opposed to completely disconnected language sites). Note that you only need to create a content.html file and everything else comes from the super type.

Configure the Page Components to use mobile emulators

One of the primary objectives for Experience Manager is to transition the ability for authors to create, edit, and publish content and remove IT dependencies from the process. To illustrate this, you can give free reign to both page components in this activity and then later rescind it. You can also configure the mobile emulator framework in Experience Manager to empower authors to view what they create on mobile devices. 

To add the layout container manually, perform these tasks: 

1. Open the content.html page in both page components located at:

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

2. Add the following code to these files. 

<div class="wrapper row3" >
<main class="hoc container clear">
<!-- main body -->
Top-Level-Page Content
<div data-sly-resource="${'responsivegrid' @
resourceType='wcm/foundation/components/responsivegrid'}"></div>
<!-- / main body -->
<div class="clear"></div>
</main>
</div>

3, Under /apps/summit_toys, create a folder of type sling:Folder named config

4. Under the config folder, create a node of type sling:OsgiConfig.  

5. Name the node com.day.cq.wcm.emulator.EmulatorProvider-summit.

6. Add the following property to this node: 

  • mobile.resourceTypes (String[]) - summit_toys/components/structure/contentpage

7. Navigate to /content/summit-toys/jcr:content.

8. On the jcr:content node, add the following property:

  • cq:deviceGroups (String[]) - /etc/mobile/groups/responsive

Refresh the page, and you will see the device emulator functionality, as shown in this illustration (shows IPhone 6 plus). 

The Toy site shown in a device emulator

Create the Contact Us Page Component

You can create and populate the Contact Us component. This component lets a vistor to the web site contact the given organization. In this example, a form is created that lets the web site visitor enter and submit information (such as a comment), as shown in the following illustration. 

 

The Contact Us component

Create the Contact Us template

Create the Contact Us template for the Toys Site by performing these tasks:

1. Navigate to the /apps/summit_toys/templates directory.

2. Right click on templates and create a template named contact-us.

3. Set a sling resource type: summit_toys/components/content/contact-us.

4. Set the allowed Paths value to: /content/summit-toys(/.*)?.

Create the Contact Us page component


    

Create the Contact Us page component by performing these steps:

1. Navigate to /apps/summit_toys/components/content and create a component called contact-us.

2. Create the property sling:resourceSuperType that points to summit_toys/components/structure/contentpage.

3. Rename the contact-us.jsp file to content.html.

4. Enter the following code.

<div class="wrapper row3">
  <main class="hoc container clear"> 
    <!-- main body -->
   <!-- ######### -->
    <div class="content"> 
      <!-- ######### -->
      <h1>Customer Service and Support</h1>
      <p>Summit Toy Store provides 24/7 assistance for customers on new and existing orders as well as an FAQ base to address a vast majority of your toy needs.</p>
      <p>Please consult our <a href="#">FAQ page</a> as a first step to see what answers we may already have for you. </p>
      <p>This is a W3C compliant free website template from <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a>. For full terms of use of this template please read our <a href="http://www.os-templates.com/template-terms">website template licence</a>.</p>
      <img class="imgr borderedbox inspace-5" src="/content/dam/summit-toys/thumbnails/float_right.png" alt="Contact Us">
      <p>Call 1-800-XXX-YYYY between 7am and 8pm Pacific time M-F or between 10am and 5pm Pacific Saturday and Sunday.<br/>See the chat image to the right to exercise that option subject to availablilty.</p>
      <div class="clear"></div>
      <div id="comments">
        <h2>Or Send us a Message</h2>
        <form action="#" method="post">
          <div class="one_third first">
            <label for="name">Name <span>*</span></label>
            <input type="text" name="name" id="name" value="" size="22" required>
          </div>
          <div class="one_third">
            <label for="email">Mail <span>*</span></label>
            <input type="email" name="email" id="email" value="" size="22" required>
          </div>
          <div class="one_third">
            <label for="url">Website</label>
            <input type="url" name="url" id="url" value="" size="22">
          </div>
          <div class="block clear">
            <label for="comment">Your Comment</label>
            <textarea name="comment" id="comment" cols="25" rows="10"></textarea>
          </div>
          <div>
            <input type="submit" name="submit" value="Submit Form">
            &nbsp;
            <input type="reset" name="reset" value="Reset Form">
          </div>
        </form>
      </div>
      <!-- ######### -->
    </div>
    <!-- ########## -->
    <!-- / main body -->
    <div class="clear"></div>
  </main>
</div>

Create the Contact Us page

Create a Contact Us page based on the contact-us template by using the AEM Touch UI. Perform these tasks:

1. Click the Adobe Experience Manager in the upper left corner.

2. Navigate to Sites and select Summit Toys->English, as shown here.

The Touch UI Sites view

3. Click Create, Page.

4. Select the Contact Us template, as shown here.

The Contact Us template

5. Click Next.

6. Create a page with the following values:

  • Name: contact-us
  • Title: Contact Us

Once the new page is created, the Contact Us menu link in the main page is active, as shown here.

 

The Contact Us link

When you click on the Contact Us link, it opens the Contact Us page, as shown here. 

The Contact US page shown in the Toys Site

Convert static HTML includes into AEM components

Convert the static HTML includes into AEM components. That is, most of the HTML files under /apps/summit_toys/components/structure/contentpage are converted into AEM components. Once done, your application looks like the following illustration. 

Experience Manager components used in the Toys Site

Updating the contentpage component

Under the contentpage component located at the following location: 

/apps/summit_toys/components/structure/contentpage

ensure that the following files exist: 

  • body.html
  • content.html
  • headlibs.html

Add the following code to the body.html file. 

<div data-sly-resource="${'header' @ resourceType='summit_toys/components/structure/header'}"></div>
<div data-sly-resource="${'navigation' @ resourceType='summit_toys/components/structure/navigation'}"></div>
<div data-sly-include="content.html"></div>
<div data-sly-resource="${'footer' @ resourceType='summit_toys/components/structure/footer'}"></div>
<div data-sly-resource="${'copyright' @ resourceType='summit_toys/components/structure/copyright'}"></div>

Add the following code to the content.html file. 

<h1>Content Page Template</h1>
<div class="wrapper row3" >
  <main class="hoc container clear"> 
    <!-- main body -->
    Top-Level-Page Content
      <div data-sly-resource="${'responsivegrid' @ resourceType='wcm/foundation/components/responsivegrid'}"></div>
    <!-- / main body -->
    <div class="clear"></div>
  </main>
</div>

Add the following code to the headlibs.html file. 

<template data-sly-template.headlibs="${@ designPath}"
          data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"
          data-sly-use.head="${'headlibs.js' @ designPath=designPath}">
    <sly data-sly-call="${clientLib.all @ categories='summit.style'}" />
</template>

To convert the static navigation HTML file to an AEM component, perform these tasks:

1. Navigate to /apps/summit_toys/components/structure.

2. Right click and select Component.

3. Name the component navigation.

4. Add the value Summit Toys for the Group (this will place the component in the Group named Summit Toys).

3. Rename the navigation.jsp to navigation.html.

4. Add the following code to this file.

<div class="wrapper row1">
  <div id="topbar" class="hoc clear"> 
		<div id="topbar" class="hoc clear"> 
    	<!-- #################### -->
    	<nav id="mainav" class="fl_left">
      	<ul class="clear">
        	<li><a href="/content/summit-toys/en.html">Home</a></li>
        	<li><a href="/content/summit-toys/en/new-arrivals.html">New Arrivals</a></li>
        	<li class="active"><a href="/content/summit-toys/en/best-sellers.html">Best Sellers</a></li>
        	<li><a href="/content/summit-toys/en/games-toys.html">Games & Toys</a></li>
        	<li><a href="/content/summit-toys/en/gifts.html">Gifts</a></li>
        	<li><a href="/content/summit-toys/en/contact-us.html">Contact Us</a></li>
      	</ul>
    	</nav>
    	<!-- ################### -->
    	<div class="fl_right">
      	<ul class="faico clear">
        	<li><a class="faicon-facebook" href="#"><i class="fa fa-facebook"></i></a></li>
        	<li><a class="faicon-pinterest" href="#"><i class="fa fa-pinterest"></i></a></li>
        	<li><a class="faicon-twitter" href="#"><i class="fa fa-twitter"></i></a></li>
        	<li><a class="faicon-dribble" href="#"><i class="fa fa-dribbble"></i></a></li>
        	<li><a class="faicon-linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
        	<li><a class="faicon-google-plus" href="#"><i class="fa fa-google-plus"></i></a></li>
        	<li><a class="faicon-rss" href="#"><i class="fa fa-rss"></i></a></li>
      	</ul>
    	</div>
    	<!-- ################## -->
		</div>
	</div>
</div>

homepage component

To convert the static homepage HTML file to an AEM component, perform these tasks:

1. Navigate to /apps/summit_toys/components/structure.

2. Right click and select Component.

3. Name the component homepage .

4. Add the value Summit Toys for the Group (this will place the component in the Group named Summit Toys).

3. Rename the homepage.jsp to content.html.

4. Add the following code to this file.

<div class="wrapper row6">
  <main class="hoc clear"> 
    <div data-sly-resource="${'hero' @ resourceType='summit_toys/components/content/hero'}"></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>

header component

To convert the static header HTML file to an AEM component, perform these tasks:

1. Navigate to /apps/summit_toys/components/structure.

2. Right click and select Component.

3. Name the component header.

4. Add the value Summit Toys for the Group (this will place the component in the Group named Summit Toys).

3. Rename the header.jsp to header.html.

4. Add the following code to this file.

<div class="wrapper row0">
	<header id="header" class="hoc clear"> 
    <!-- ############## -->
    <div id="logo" class="fl_left">
      <h1><a href="#">The Summit Toy Store</a></h1>
		<h3><i>"Your ticket to play in Vegas!"</i></h3>
    </div>
    <div id="quickinfo" class="fl_right">
      <ul class="nospace inline">
        <li><strong>Search Products</strong><br></li>
      </ul>
      <form id="newsletter" method="post" action="#">
          <fieldset>
            <legend>Newsletter:</legend>
            <input class="btmspace-15" type="text" value="" placeholder="Product, Description">
            <button type="submit" value="submit">Submit</button>
          </fieldset>
    </form>
    </div>
    <!-- ############## -->
	</header>
</div>

Footer component

To convert the static Footer HTML file to an AEM component, perform these tasks:

1. Navigate to /apps/summit_toys/components/structure.

2. Right click and select Component.

3. Name the component footer.

4. Add the value Summit Toys for the Group (this will place the component in the Group named Summit Toys).

3. Rename the footer.jsp to footer.html.

4. Add the following code to this file.

<div class="wrapper row4">
<footer id="footer" class="hoc clear"> 
    <!-- ############### -->
    <div class="one_quarter first">
      <h6 class="title">Our Mission</h6>
      <p>Duis justo eros elementum a porttitor in dignissim vitae magna phasellus vitae sapien rhoncus sodales augue et dignissim quam in nec sem.</p>
    </div>
    <div class="one_quarter">
      <h6 class="title">Headquarters</h6>
      <ul class="nospace linklist contact">
        <li><i class="fa fa-map-marker"></i>
          <address>
          Street Name &amp; Number, Town, Postcode/Zip
          </address>
        </li>
        <li><i class="fa fa-phone"></i> +00 (123) 456 7890<br>
          +00 (123) 456 7890</li>
        <li><i class="fa fa-fax"></i> +00 (123) 456 7890</li>
        <li><i class="fa fa-envelope-o"></i> info@domain.com</li>
      </ul>
    </div>
    <div class="one_quarter">
      <h6 class="title">Board of Directors</h6>
      <ul class="nospace linklist">
        <li><a href="#">Nunc habitant tristique</a></li>
        <li><a href="#">Senectus netu malesuada</a></li>
        <li><a href="#">Fames turpis egestas in</a></li>
        <li><a href="#">Cursus vulputate ultricies</a></li>
        <li><a href="#">Aenean lectus ultricies</a></li>
      </ul>
    </div>
    <div class="one_quarter">
      <h6 class="title">Upcoming Events</h6>
      <ul class="nospace linklist">
        <li>
          <article>
            <h2 class="nospace font-x1"><a href="#">At lacus scelerisque</a></h2>
            <time class="font-xs block btmspace-10" datetime="2045-04-06">Friday, 6<sup>th</sup> April 2045</time>
            <p class="nospace">Feugiat massa suspendisse ut finibus odio nam sit amet&hellip;</p>
          </article>
        </li>
        <li>
          <article>
            <h2 class="nospace font-x1"><a href="#">Nullam viverra vel</a></h2>
            <time class="font-xs block btmspace-10" datetime="2045-04-05">Thursday, 5<sup>th</sup> April 2045</time>
            <p class="nospace">Sapien eu malesuada tincidunt tristique ultricies rhoncus&hellip;</p>
          </article>
        </li>
      </ul>
    </div>
    <!-- ############### -->
</footer>
</div>

Copyright component

To convert the static Copyright HTML files to an AEM component, perform these tasks: 

1. Navigate to /apps/summit_toys/components/structure

2. Right click and select Component.

3. Name the component copyright.

4. Add the value Summit Toys for the Group (this will place the component in the Group named Summit Toys). 

3. Rename the copyright.jsp to copyright.html.

4. Add the following code to this file. 

<div class="wrapper row5">
<div id="copyright" class="hoc clear"> 
    <!-- ################# -->
    <p class="fl_left">Copyright &copy; 2016 - All Rights Reserved - <a href="#">Domain Name</a></p>
    <p class="fl_right">Template by <a target="_blank" href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
    <!-- ################# -->
</div>
</div>

Install the Summit Toys Assets Package

Install the Experience Manager Asset Package for the Toys site. This will let you use these digital assets in the site.

A digital asset added to the site

Download and install the following package.

Download

Perform these tasks: 

1. Download and Install the Package.

2. Refresh your page.

3. View the Content Finder again and see the Assets for Summit Toy Store are now available. 

4. Navigate to the Home Page.

5. Notice the home page has a “baked in” component on it.

6. Go to CRXDE-Lite and navigate to /apps/summit_toys/components/content/contact-us/content.html.

7. Go to Line 11 in the HTML and replace:

<img class="imgr borderedbox inspace-5" src="../images/demo/imgr.gif" alt="">

with

<img class="imgr borderedbox inspace-5" src="/content/dam/summittoys/thumbnails/float_right.png " alt="Contact Us">

8. Refresh the Contact Us Page.

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