Erstellen einer vollständigen Website (JSP) create-a-fully-featured-website-jsp

Installieren Sie AEM.

Zugreifen auf CRXDE Lite (die Entwicklungsumgebung)

Einrichten der Projektstruktur in CRXDE Lite

Erstellen Sie die Vorlage, die Komponente und die Skripte, die als Grundlage für die Erstellung von Inhaltsseiten verwendet werden.

Erstellen Sie die Stammseite für Ihre Website und dann Inhaltsseiten.

Erstellen der folgenden Komponenten zur Verwendung auf den Seiten

• topnav (Navigation oben)
• listchildren (Untergeordnete Elemente auflisten)
• Logo
• Bild
• textimage (Textbild)
• Suchen

Fügen Sie verschiedene Foundation-Komponenten ein.

Klicken Sie in der Baumstruktur links in CRXDE Lite mit der rechten Maustaste auf den Ordner /apps  und klicken Sie dann auf  Erstellen > Ordner erstellen. Geben Sie im Dialogfeld Ordner erstellen als Ordnernamen mywebsite ein und klicken Sie auf OK.

Klicken Sie mit der rechten Maustaste auf den Ordner /apps/mywebsite und klicken Sie auf Erstellen > Ordner erstellen. Geben Sie im Dialogfeld Ordner erstellen als Ordnernamen components ein und klicken Sie auf OK.

Klicken Sie mit der rechten Maustaste auf den Ordner /apps/mywebsite und klicken Sie auf Erstellen > Ordner erstellen. Geben Sie im Dialogfeld Ordner erstellen als Ordnernamen templates ein und klicken Sie auf OK.

Die Struktur im Baum sollte nun in etwa so aussehen:

Klicken Sie auf Alle speichern.

Klicken Sie auf der AEM-Begrüßungsseite auf Tools. (http://localhost:4502/libs/cq/core/content/welcome.html)

Wählen Sie in der Ordnerbaumstruktur den Ordner Designs aus und klicken Sie dann auf Neu > Neue Seite. Geben Sie mywebsite als Titel ein und klicken Sie auf Erstellen.

Wenn das Element „mywebsite“ nicht in der Tabelle aufgeführt wird, aktualisieren Sie die Baumansicht bzw. die Tabelle.

Verwenden von WebDAV Zugriff auf die URL unter http://localhost:4502, kopieren Sie das Beispiel static.css Datei und images Ordner aus der heruntergeladenen Datei mywebsite.zip in /etc/designs/mywebsite Ordner.

Klicken Sie in der Ordnerbaumstruktur von CRXDE Lite mit der rechten Maustaste auf /apps/mywebsite/templates. Klicken Sie dann auf Erstellen > Vorlage erstellen.

Geben Sie im Dialogfeld Vorlage erstellen die folgenden Werte ein und klicken Sie auf Nächste:

• Titel: contentpage
• Titel: My Website Content Page Template
• Beschreibung: Dies ist meine Website-Inhaltsseitenvorlage
• Ressourcentyp: mywebsite/components/contentpage

Verwenden Sie den Standardwert für die Eigenschaft „Rangfolge“.

Der Ressourcentyp identifiziert die Komponente, die die Seite rendert. In diesem Fall werden alle Seiten, die mithilfe der contentpage-Vorlage erstellt wurden, von der Komponente mywebsite/components/contentpage gerendert.

Um die Pfade der Seiten anzugeben, die diese Vorlage verwenden können, klicken Sie auf die Schaltfläche mit dem Pluszeichen und geben Sie in das daraufhin angezeigte Textfeld /content(/.*)? ein. Klicken Sie dann auf Weiter.

Beim Wert der Eigenschaft „Zugelassene Pfade“ handelt es sich um einen regulären Ausdruck. Seiten mit einem Pfad, der dem Ausdruck entspricht, können die Vorlage verwenden. In diesem Fall stimmt der reguläre Ausdruck mit dem Pfad der /content und allen Unterseiten.

Wenn ein Autor eine Seite unten erstellt /content, die contentpage in einer Liste der zu verwendenden Vorlagen angezeigt.

Klicken Nächste im Zugelassene übergeordnete Elemente und Zugelassene Kinder Bedienfelder und klicken OK. Klicken Sie in CRXDE Lite auf Alle speichern.

Klicken Sie in CRXDE Lite mit der rechten Maustaste auf /apps/mywebsite/components und klicken Sie auf  Erstellen > Komponente.

Geben Sie im Dialogfeld Komponente erstellen die folgenden Eigenschaftswerte ein:

• Titel: contentpage
• Titel: My Website Content Page Component
• Beschreibung: Dies ist meine Website-Inhaltsseitenkomponente

Der Speicherort der neuen Komponente ist /apps/mywebsite/components/contentpage. Dieser Pfad entspricht dem Ressourcentyp der contentpage-Vorlage (ohne den ersten Teil /apps/ des Pfads).

Diese Entsprechung verbindet die Vorlage mit der Komponente und ist entscheidend für die ordnungsgemäße Funktionsweise der Website.

Klicken Sie auf  Weiter ​ ​, bis das Bedienfeld „Zugelassene untergeordnete Elemente“ angezeigt wird. Klicken Sie dann auf OK. Klicken Sie in CRXDE Lite auf Alle speichern.

Die Struktur sieht nun wie folgt aus:

Öffnen Sie in CRXDE Lite die Datei contentpage.jsp unter /apps/mywebsite/components/contentpage. Die Datei enthält standardmäßig den folgenden Code:

<%--

  My Website Content Page Component component.

  This is My Website Content Page Component.

--%><%
%><%@include file="/libs/foundation/global.jsp"%><%
%><%@page session="false" %><%
%><%
    /* TODO add you code here */
%>

Kopieren Sie den folgenden Code und fügen Sie ihn in contentpage.jsp nach dem Standardcode ein:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My title</title>
</head>
<body>
<div>My body</div>
</body>
</html>

Klicken Sie auf Alle speichern, um Ihre Änderungen zu speichern.

Auf der AEM Begrüßungsseite (http://localhost:4502/libs/cq/core/content/welcome.html), klicken Sie auf Websites.

Wählen Sie in der Ordnerbaumstruktur den Ordner Websites aus und klicken Sie dann auf Neu > Neue Seite.

Geben Sie im Fenster Seite erstellen Folgendes ein:

• Titel: My Website
• Name: mywebsite
• Wählen Sie die My Website Content Page Template

Klicken Sie auf Erstellen. Wählen Sie in der Ordnerstruktur die /Websites/My Website Seite und klicken Sie auf Neu > Neue Seite.

Geben Sie im Dialogfeld Seite erstellen  die folgenden Eigenschaftswerte ein und klicken Sie dann auf Erstellen:

• Titel: englisch
• Name: en
• Wählen Sie die My Website Content Page Template

Wählen Sie in der Ordnerstruktur die /Websites/My Website/English Seite und klicken Sie auf Neu > Neue Seite.

Geben Sie im Dialogfeld Seite erstellen  die folgenden Eigenschaftswerte ein und klicken Sie dann auf  Erstellen:

• Titel: Produkte
• Wählen Sie die My Website Content Page Template

Wählen Sie in der Ordnerstruktur die /Websites/My Website/English Seite und klicken Sie auf Neu > Neue Seite.

Geben Sie im Dialogfeld Seite erstellen  die folgenden Eigenschaftswerte ein und klicken Sie dann auf  Erstellen:

• Titel: Dienste
• Wählen Sie die My Website Content Page Template

Wählen Sie in der Ordnerstruktur die /Websites/My Website/English Seite und klicken Sie auf Neu > Neue Seite.

Geben Sie im Dialogfeld Seite erstellen  die folgenden Eigenschaftswerte ein und klicken Sie dann auf  Erstellen:

• Titel: Kunden
• Wählen Sie die My Website Content Page Template

Ihre Struktur sieht nun wie folgt aus:

Um Ihre Seiten mit dem mywebsite-Design zu verknüpfen, wählen Sie in CRXDE Lite den Knoten /content/mywebsite/en/jcr:content aus. Im Eigenschaften -Registerkarte die folgenden Werte für eine neue Eigenschaft eingeben und auf Hinzufügen klicken:

• Name: cq:designPath
• Typ: Zeichenfolge
• Wert: /etc/designs/mywebsite

Öffnen Sie in einem neuen Webbrowser-Tab oder -Fenster http://localhost:4502/content/mywebsite/en/products.html um die Seite Produkte anzuzeigen:

Fügen Sie in CRXDE Lite eine Eigenschaft zum Knoten /apps/mywebsite/components/contentpage hinzu.

1. Wählen Sie den Knoten /apps/mywebsite/components/contentpage aus.

2. Geben Sie unten auf der Registerkarte „Eigenschaften“ die folgenden Eigenschaftswerte ein und klicken Sie dann auf „Hinzufügen“:

   • Name: sling:resourceSuperType
   • Typ: Zeichenfolge
   • Wert: foundation/components/page

3. Klicken Sie auf Alle speichern.

Öffnen Sie die Datei contentpage.jsp unter /apps/mywebsite/components/contentpage und ersetzen Sie den vorhandenen Code durch den folgenden Code:

<%@include file="/libs/foundation/global.jsp"%><%
%><%@page session="false" contentType="text/html; charset=utf-8" %><%
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<cq:include script="head.jsp"/>
<cq:include script="body.jsp"/>
</html>

Speichern Sie Ihre Änderungen.

Laden Sie in Ihrem Browser die Seite Produkte neu. Sie sieht wie folgt aus:

Öffnen Sie die Seitenquelle, um die JavaScript- und HTML-Elemente anzuzeigen, die von den Skripten head.jsp und body.jsp generiert wurden. Das folgende Skriptfragment öffnet den Sidekick, wenn Sie die Seite öffnen:

CQ.WCM.launchSidekick("/content/mywebsite/en/products",
            {propsDialog: "/libs/foundation/components/page/dialog",
               locked: false locked: false
             });

Erstellen Sie in CRXDE Lite die Datei left.jsp unter /apps/mywebsite/components/contentpage:

1. Rechtsklick auf den Knoten /apps/mywebsite/components/contentpage, wählen Sie Erstellen then Datei erstellen.
2. Geben Sie im Fenster left.jsp als "Name"und klicken Sie auf OK.

Bearbeiten Sie die Datei left.jsp, um den vorhandenen Inhalt zu entfernen und durch den folgenden Code zu ersetzen:

<%@include file="/libs/foundation/global.jsp"%><%
%><div class="left">
<div>logo</div>
<div>newslist</div>
<div>search</div>
</div>

Speichern Sie die Änderungen.

Erstellen Sie in CRXDE Lite die Datei center.jsp unter /apps/mywebsite/components/contentpage:

1. Klicken Sie mit der rechten Maustaste auf den Knoten /apps/mywebsite/components/contentpage, wählen Sie dann die Option Erstellen und anschließend die Option Datei erstellen aus.
2. Geben Sie im Dialogfeld center.jsp as Name und klicken Sie auf OK.

Bearbeiten Sie die Datei center.jsp, um den vorhandenen Inhalt zu entfernen und durch den folgenden Code zu ersetzen:

<%@include file="/libs/foundation/global.jsp"%><%
%><div class="center">
<div>trail</div>
<div>title</div>
<div>parsys</div>
</div>

Speichern Sie die Änderungen.

Erstellen Sie in CRXDE Lite die Datei right.jsp unter /apps/mywebsite/components/contentpage:

1. Klicken Sie mit der rechten Maustaste auf den Knoten /apps/mywebsite/components/contentpage, wählen Sie dann die Option Erstellen und anschließend die Option Datei erstellen aus.
2. Geben Sie im Dialogfeld in das Feld right.jspName den Dateinamen ein und klicken Sie auf OK.

Bearbeiten Sie die Datei right.jsp, um den vorhandenen Inhalt zu entfernen und durch den folgenden Code zu ersetzen:

<%@include file="/libs/foundation/global.jsp"%><%
%><div class="right">
<div>iparsys</div>
</div>

Speichern Sie die Änderungen.

Erstellen Sie in CRXDE Lite die Datei body.jsp unter /apps/mywebsite/components/contentpage:

Bearbeiten Sie die Datei body.jsp, um den vorhandenen Inhalt zu entfernen und durch den folgenden Code zu ersetzen:

<%@include file="/libs/foundation/global.jsp"%><%
%><body>
<div id="CQ">
<div class="topnav">topnav</div>
<div class="content">
<cq:include script="left.jsp" />
<cq:include script="center.jsp" />
<cq:include script="right.jsp" />
</div>
<div class="footer">
<div class="toolbar">toolbar</div>
</div>
</div>
</body>

Speichern Sie die Änderungen.

Laden Sie in Ihrem Browser die Seite Produkte neu. Sie sieht wie folgt aus:

Klicken Sie in CRXDE Lite mit der rechten Maustaste auf /apps/mywebsite/components, wählen Sie dann die Option Erstellen und anschließend die Option Komponente erstellen aus.

Geben Sie im Fenster Komponente erstellen Folgendes ein:

• Bezeichnung: topnav
• Titel: My Top Navigation Component
• Beschreibung: This is My Top Navigation Component

Klicken Nächste bis Sie zum letzten Fenster kommen, in dem Sie auf OK. Speichern Sie Ihre Änderungen.

Öffnen Sie in CRXDE Lite die Datei topnav.jsp unter /apps/mywebsite/components/topnav.

Ersetzen Sie den vorhandenen Code durch Kopieren und Einfügen des folgenden Codes:

<%@include file="/libs/foundation/global.jsp"%><%
%><%@ page import="java.util.Iterator,
        com.day.text.Text,
        com.day.cq.wcm.api.PageFilter, com.day.cq.wcm.api.Page" %><%
    /* get starting point of navigation */
    Page navRootPage = currentPage.getAbsoluteParent(2);
    if (navRootPage == null && currentPage != null) {
    navRootPage = currentPage;
    }
    if (navRootPage != null) {
        Iterator<Page> children = navRootPage.listChildren(new PageFilter(request));
        while (children.hasNext()) {
            Page child = children.next();
            %><a href="<%= child.getPath() %>.html"><%=child.getTitle() %></a><%
        }
    }
%>

Öffnen Sie in CRXDE Lite die Datei body.jsp unter /apps/mywebsite/components/contentpage und ersetzen Sie:

<div class="topnav">topnav</div>

durch:

<cq:include path="topnav" resourceType="mywebsite/components/topnav" />

Speichern Sie die Änderungen.

Laden Sie in Ihrem Browser die Produkte Seite. Die obere Navigation wird wie folgt angezeigt:

Öffnen Sie in Ihrem Browser die Seite Produkte.

Klicken Sie im Sidekick auf der Registerkarte Seite  auf  Seiteneigenschaften.

Im Allgemein Registerkarte des Dialogfelds, erweitern Weitere Titel und Beschreibungen und für Untertitel Eigenschaft, Typ what we do. Klicken Sie auf OK.

Wiederholen Sie die vorherigen Schritte, um den Untertitel Über unsere Services zur Seite Services hinzuzufügen.

Wiederholen Sie die vorherigen Schritte, um den Untertitel Warum Sie uns vertrauen können zur Seite Kunden hinzuzufügen.

Tipp: Wählen Sie in CRXDE Lite den Knoten /content/mywebsite/en/products/jcr:content aus, um zu sehen, dass die Eigenschaft "subtitle"hinzugefügt wird.

Sling bestimmt /content/mwebysite/en/products.png. als Pfad der Ressource.

Sling ordnet diesen Pfad dem Knoten /content/mywebsite/en/products zu.

Sling bestimmt sling:resourceType als mywebsite/components/contentpage dieses Knotens.

Sling findet das Skript in dieser Komponente, das die größte Übereinstimmung mit der URL-Auswahl (navimage) und der Dateinamenerweiterung (png) aufweist.

Öffnen Sie in CRXDE Lite die Datei topnav.jsp unter /apps/mywebsite/components/topnav.. Suchen Sie den Inhalt des Ankerelements (Zeile 14):

<%=child.getTitle() %>

Ersetzen Sie den Ankerinhalt durch den folgenden Code:

<img alt="<%= child.getTitle() %>" src="<%= child.getPath() %>.navimage.png">

Speichern Sie die Änderungen.

Klicken Sie mit der rechten Maustaste auf den Knoten /apps/mywebsite/components/contentpage und klicken Sie auf Erstellen > Datei erstellen.

Geben Sie im Fenster Datei erstellen in das Feld Name  navimage.png.java ein.

Die Dateinamenerweiterung „.java“ gibt für Sling an, dass das Modul „Apache Sling Scripting Java Support“ verwendet werden muss, um das Skript zu kompilieren und ein Servlet zu erstellen.

Kopieren Sie den folgenden Code nach navimage.png.java.. Der Code erweitert die Klasse „AbstractImageServlet“:

• AbstractImageServlet erstellt ein ImageContext -Objekt, das die Eigenschaften der aktuellen Ressource speichert.
• Die übergeordnete Seite der Ressource wird aus dem ImageContext-Objekt extrahiert. Dann werden der Seitentitel und der Untertitel abgerufen.
• ImageHelper wird verwendet, um das Bild aus der Datei "navimage_bg.jpg"des Site-Designs, dem Seitentitel und dem Seitentitel zu generieren.

package apps.mywebsite.components.contentpage;

import java.awt.Color;
import java.awt.Paint;
import java.awt.geom.Rectangle2D;

import java.io.IOException;
import javax.jcr.RepositoryException;

import com.day.cq.wcm.api.Page;
import com.day.cq.wcm.api.PageManager;
import com.day.cq.wcm.api.components.Component;
import com.day.cq.wcm.api.designer.Designer;

import com.day.cq.commons.SlingRepositoryException;
import com.day.cq.wcm.commons.WCMUtils;
import com.day.cq.wcm.commons.AbstractImageServlet;
import com.day.cq.commons.ImageHelper;

import com.day.image.Font;
import com.day.image.Layer;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.servlets.SlingSafeMethodsServlet;

/**
  * Renders the navigation image
  */
public class navimage_png extends AbstractImageServlet {

      protected Layer createLayer(ImageContext ctx)
             throws RepositoryException, IOException {
         PageManager pageManager = ctx.resolver.adaptTo(PageManager.class);
         Page currentPage = pageManager.getContainingPage(ctx.resource);

         /* constants for image appearance */
         int scale = 6;
         int paddingX = 24;
         int paddingY = 24;
         Color bgColor = new Color(0x004a565c, true);

         /* obtain the page title */
         String title = currentPage.getTitle();
         if (title == null) {
             title = currentPage.getName();
         }

         /* format the title text */
         title = title.toUpperCase();
         Paint titleColor = Color.WHITE;
         Font titleFont = new Font("Myriad Pro", 10 * scale, Font.BOLD);
         int titleBase = 10 * scale;

         /* obtain and format the page subtitle */
         String subtitle = currentPage.getProperties().get("subtitle", "");
         Paint subtitleColor = new Color(0xffa9afb1, true);
         Font subTitleFont = new Font("Tahoma", 7);
         int subTitleBase = 20;

         /* create a layer that contains the background image from the mywebsite design */
         Designer dg = ctx.resolver.adaptTo(Designer.class);
         String imgPath = new String(dg.getDesignPath(currentPage)+"/images/navimage_bg.jpg");
         Layer bg = ImageHelper.createLayer(ctx.resolver.resolve(imgPath));

         /* draw the title text (4 times bigger) */
         Rectangle2D titleExtent = titleFont.getTextExtent(0, 0, 0, 0, title, Font.ALIGN_LEFT, 0, 0);
         Rectangle2D subtitleExtent = subTitleFont.getTextExtent(0, 0, 0, 0, subtitle, Font.ALIGN_LEFT, 0, 0);

         /* ensure subtitleExtent is wide enough */
         if ( subtitle.length() > 0 ) {
             int titleWidth = (int)titleExtent.getWidth() / scale;
             if ( subtitleExtent.getWidth() > titleWidth && subtitleExtent.getWidth() + 2 * paddingX >
 bg.getWidth() ) {
                 int charWidth = (int)subtitleExtent.getWidth() / subtitle.length();
                 int maxWidth = (bg.getWidth() > titleWidth + 2  * paddingX ? bg.getWidth() - 2 * paddingX : titleWidth);
                 int len = (maxWidth - ( 2 * charWidth) ) / charWidth;
                 subtitle = subtitle.substring(0, len) + "...";
                 subtitleExtent = subTitleFont.getTextExtent(0, 0, 0, 0, subtitle, Font.ALIGN_LEFT, 0, 0);
             }
         }
         int width = Math.max((int) titleExtent.getWidth(), (int) subtitleExtent.getWidth());
        /* create the text layer */
         Layer text = new Layer(width, (int) titleExtent.getHeight() + 40, new Color(0x01ffffff, true));
         text.setPaint(titleColor);
         text.drawText(0, titleBase, 0, 0, title, titleFont, Font.ALIGN_LEFT | Font.ALIGN_BASE, 0, 0);
         text.resize(text.getWidth() / scale, text.getHeight() / scale);
         text.setX(0);
         text.setY(0);

         if (subtitle.length() > 0) {
             /* draw the subtitle normal sized */
             text.setPaint(subtitleColor);
             text.drawText(0, subTitleBase, 0, 0, subtitle, subTitleFont, Font.ALIGN_LEFT | Font.ALIGN_BASE, 0, 0);
         }

         /* merge the image and text layers */
         text.setY(paddingY);
         text.setX(paddingX);
         text.setBackgroundColor(bgColor);

         int bgWidth = bg.getWidth();
         if ( text.getWidth() + 2 * paddingX > bgWidth ) {
             bgWidth = text.getWidth() + 2 * paddingX;
             bg.resize(bgWidth, bg.getHeight());
         }
         bg.merge(text);

         return bg;
     }
 }

Speichern Sie die Änderungen.

Laden Sie in Ihrem Browser die Seite Produkte neu. Die obere Navigation wird jetzt wie folgt angezeigt:

Im Ordnerbaum der Websites Seite, wählen Sie die Websites/Meine Website/Englisch/Produkte Element und klicken Sie auf Neu > Neue Seite.

Geben Sie im Dialogfeld die folgenden Eigenschaftswerte ein und klicken Sie auf Erstellen:

• Titel: Produkt 1.
• Name: product1.
• Auswählen My Website Content Page Template

Erstellen Sie eine weitere Seite unter „Produkte“ mit den folgenden Eigenschaftswerten:

• Titel: Produkt 2
• Name: product2
• Auswählen My Website Content Page Template

Legen Sie in CRXDE Lite eine Beschreibung und ein Datum für die Seite „Product 1“ fest:

1. Wählen Sie den Knoten /content/mywebsite/en/products/product1/jcr:content aus.

2. Geben Sie auf der Registerkarte Eigenschaften die folgenden Werte ein:

   • Name: jcr:description
   • Typ: String
   • Wert: This is a description of the Product 1!.

3. Klicken Sie auf Hinzufügen.

4. Im Eigenschaften erstellen Sie eine weitere Eigenschaft mit den folgenden Werten:

   • Name: date
   • Typ: Zeichenfolge
   • Wert: 14.02.2008
   • Klicken Sie auf Hinzufügen.

5. Klicken Sie auf Alle speichern.

Legen Sie in CRXDE Lite eine Beschreibung und ein Datum für die Seite „Product 2“ fest:

1. Wählen Sie den Knoten /content/mywebsite/en/products/product2/jcr:content aus.

2. Geben Sie auf der Registerkarte Eigenschaften die folgenden Werte ein:

   • Name: jcr:description
   • Typ: Zeichenfolge
   • Wert: Dies ist eine Beschreibung des Produkts 2!.

3. Klicken Sie auf Hinzufügen.

4. Ersetzen Sie in denselben Textfeldern die vorherigen Werte durch die folgenden Werte:

   • Name: date
   • Typ: Zeichenfolge
   • Wert: 11. Mai 2012
   • Klicken Sie auf Hinzufügen.

5. Klicken Sie auf Alle speichern.

Klicken Sie in CRXDE Lite mit der rechten Maustaste auf /apps/mywebsite/components, wählen Sie dann die Option Erstellen und anschließend die Option Komponente erstellen aus.

Geben Sie im Dialogfeld die folgenden Eigenschaftswerte ein und klicken Sie auf Nächste:

• Titel: listchildren
• Titel: Meine Listchildren-Komponente.
• Beschreibung: Dies ist die Komponente Meine Listchildren .

Weiter klicken Nächste bis zum Zugelassene Kinder wird angezeigt und klicken Sie dann auf OK.

Öffnen Sie in CRXDE Lite die Datei listchildren.jsp unter /apps/mywebsite/components/listchildren.

Ersetzen Sie den Standardcode durch den folgenden Code:

<%@include file="/libs/foundation/global.jsp"%><%
%><%@ page import="java.util.Iterator,
         com.day.cq.wcm.api.PageFilter"%><%
     /* Create a new Page object using the path of the current page */
      String listroot = properties.get("listroot", currentPage.getPath());
     Page rootPage = pageManager.getPage(listroot);
     /* iterate through the child pages and gather properties */
     if (rootPage != null) {
         Iterator<Page> children = rootPage.listChildren(new PageFilter(request));
         while (children.hasNext()) {
             Page child = children.next();
             String title = child.getTitle() == null ? child.getName() : child.getTitle();
             String date = child.getProperties().get("date","");
             %><div class="item">
             <a href="<%= child.getPath() %>.html"><b><%= title %></b></a>
             <span><%= date %></span><br>
             <%= child.getProperties().get("jcr:description","") %><br>
             </div><%
         }
     }
 %>

Speichern Sie die Änderungen.

Erstellen Sie den Dialogknoten unter der listchildren-Komponente:

1. Klicken Sie in CRXDE Lite mit der rechten Maustaste auf den Knoten /apps/mywebsite/components/listchildren und klicken Sie dann auf  Erstellen > Dialogfeld erstellen.

2. Geben Sie im Dialogfeld die folgenden Eigenschaftswerte ein und klicken Sie dann auf „OK“:

   • Bezeichnung: dialog
   • Titel: Edit Component und klicken Sie auf OK.

Mit den folgenden Eigenschaften:

Wählen Sie den Knoten /apps/mywebsite/components/listchildren/dialog/items/items/tab1 aus.

Im Eigenschaften Registerkarte ändern Sie den Wert der title Eigenschaft auf List Children

Wählen Sie die tab1 Knoten und klicken Sie auf Erstellen > Knoten erstellen, geben Sie die folgenden Eigenschaftswerte ein und klicken Sie auf OK:

• Name: items
• Typ: cq:WidgetCollection

Erstellen Sie einen Knoten unter dem Knoten items mit den folgenden Eigenschaftswerten:

• Name: listroot
• Typ: cq:Widget

Fügen Sie Eigenschaften für den Knoten „listroot“ hinzu, um ihn als Textfeld zu konfigurieren. Jede Zeile in der folgenden Tabelle stellt eine Eigenschaft dar. Klicken Sie abschließend auf Alle speichern.

Öffnen Sie in CRXDE Lite die Datei left.jsp unter /apps/mywebsite/components/contentpage und suchen Sie den folgenden Code (Zeile 4):

<div>newslist</div>

Ersetzen Sie diesen Code durch den folgenden Code:

<cq:include path="newslist" resourceType="mywebsite/components/listchildren" />

Speichern Sie die Änderungen.

Laden Sie in Ihrem Browser die Seite Produkte neu. Die listchildren-Komponente wird wie folgt angezeigt:

Geben Sie im Feld „Pfad des Listenstammverzeichnisses“ /content/mywebsite/en ein. Klicken Sie auf OK. Die listchildren-Komponente auf Ihrer Seite sieht nun wie folgt aus:

Klicken Sie in CRXDE Lite mit der rechten Maustaste auf /apps/mywebsite/components, wählen Sie dann die Option Erstellen und anschließend die Option Komponente erstellen aus.

Geben Sie im Dialogfeld „Komponente erstellen“ die folgenden Eigenschaftswerte ein und klicken Sie dann auf „Weiter“:

• Bezeichnung: logo.
• Titel: My Logo Component.
• Beschreibung: This is My Logo Component.

Klicken Sie auf Weiter , bis Sie zum letzten Bedienfeld des Dialogfelds gelangen, und klicken Sie dann auf OK.

Öffnen Sie in CRXDE Lite die Datei logo.jsp unter /apps/mywebsite/components/logo.

Mit dem folgenden Code wird ein Link zur Homepage der Website erstellt und einen Verweis auf das Logobild hinzufügt. Kopieren Sie den Code und fügen Sie ihn in logo.jsp ein:

<%@include file="/libs/foundation/global.jsp"%><%
%><%@ page import="com.day.text.Text,
                   com.day.cq.wcm.foundation.Image,
                   com.day.cq.commons.Doctype" %><%
    /* obtain the path for home */
    long absParent = currentStyle.get("absParent", 2L);
    String home = Text.getAbsoluteParent(currentPage.getPath(), (int) absParent);
    /* obtain the image */
    Resource res = currentStyle.getDefiningResource("imageReference");
    if (res == null) {
        res = currentStyle.getDefiningResource("image");
    }
    /* if no image use text link, otherwise draw the image */
    %>
<a href="<%= home %>.html"><%
    if (res == null) {
        %>Home<%
    } else {
        Image img = new Image(res);
        img.setItemName(Image.NN_FILE, "image");
        img.setItemName(Image.PN_REFERENCE, "imageReference");
        img.setSelector("img");
        img.setDoctype(Doctype.fromRequest(request));
        img.setAlt("Home");
        img.draw(out);
    }
    %></a>

Speichern Sie die Änderungen.

Erstellen Sie den Knoten „dialog“ unter der logo-Komponente:

1. Klicken Sie mit der rechten Maustaste auf den Knoten /apps/mywebsite/components/logo und klicken Sie dann auf  Erstellen > Dialogfeld erstellen.

2. Geben Sie die folgenden Eigenschaftswerte ein und klicken Sie auf OK:

   • Bezeichnung design_dialog
   • Titel Logo (Design)

Klicken Sie mit der rechten Maustaste auf den Knoten tab1 im Zweig design_dialog und klicken Sie auf Löschen. Klicken Sie auf Alle speichern.

Erstellen Sie unter dem Knoten design_dialog/items/items einen neuen Knoten namens img des Typs cq:Widget. Fügen Sie die folgenden Eigenschaften hinzu und klicken Sie auf Alle speichern:

Öffnen Sie in CRXDE Lite die Datei left.jsp unter /apps/mywebsite/components/contentpage file und suchen Sie die folgende Codezeile:

<div>logo</div>

Ersetzen Sie diesen Code durch die folgende Codezeile:

<cq:include path="logo" resourceType="mywebsite/components/logo" />

Speichern Sie die Änderungen.

Laden Sie in Ihrem Browser die Seite Produkte neu. Das Logo sieht nun wie folgt aus, zeigt aber zurzeit nur den zugrundeliegenden Link:

Mit dem Produkte in Ihrem Browser öffnen, klicken Sie auf das Design Schaltfläche unten im Sidekick zur Eingabe Design -Modus.

Klicken Sie in der Symbolleiste "Design"auf Bearbeiten , um das Dialogfeld zu verwenden, um die Einstellungen für die logo-Komponente zu bearbeiten.

Klicken Sie im Dialogfeld im Bereich des Bild Registerkarte, suchen Sie nach der logo.png Bild, das Sie aus dem mywebsite.zip und klicken Sie auf OK.

Klicken Sie auf das Dreieck in der Titelleiste des Sidekick, um zu Bearbeiten -Modus.

Wechseln Sie in CRXDE Lite zum folgenden Knoten, um die gespeicherten Eigenschaftswerte anzuzeigen:

/etc/designs/mywebsite/jcr:content/contentpage/logo

Navigieren Sie in CRXDE Lite zu /apps/mywebsite/components/contentpage, öffnen Sie die Datei center.jsp und ersetzen Sie:

<div>trail</div>

durch:

<cq:include path="trail" resourceType="foundation/components/breadcrumb" />

Speichern Sie die Änderungen.

Laden Sie in Ihrem Browser die Seite Produkte 1 neu. Die Trail-Komponente sieht wie folgt aus:

Navigieren Sie in CRXDE Lite zu /apps/mywebsite/components/contentpage, öffnen Sie die Datei center.jsp und ersetzen Sie:

<div>title</div>

durch:

<cq:include path="title" resourceType="foundation/components/title" />

Speichern Sie die Änderungen.

Laden Sie in Ihrem Browser die Seite Produkte neu. Die title-Komponente sieht nun wie folgt aus:

Navigieren Sie in CRXDE Lite zu /apps/mywebsite/components/contentpage, öffnen Sie die Datei center.jsp und suchen Sie die folgende Codezeile:

<div>parsys</div>

Ersetzen Sie diese Codezeile durch den folgenden Code und speichern Sie die Änderungen:

<cq:include path="par" resourceType="foundation/components/parsys" />

Aktualisieren Sie im Browser die Produkte Seite. Sie verfügt jetzt über die parsys-Komponente, die wie folgt aussieht:

Klicken Sie mit der rechten Maustaste auf /apps/mywebsite/components/logo Knoten und klicken Sie auf Kopieren.

Klicken Sie mit der rechten Maustaste auf die /apps/mywebsite/components Knoten und klicken Sie auf Einfügen.

Klicken Sie mit der rechten Maustaste auf den Knoten Copy of logo​, klicken Sie auf „Umbenennen“, löschen Sie den vorhandenen Text und geben Sie image ein.

Wählen Sie den Komponentenknoten image aus und ändern Sie die folgenden Eigenschaftswerte:

• jcr:title: Meine image-Komponente.
• jcr:description: Dies ist meine image-Komponente.

Fügen Sie zum Knoten image eine Eigenschaft mit den folgenden Eigenschaftswerten hinzu:

• Name: componentGroup
• Typ: Zeichenfolge
• Wert: MyWebsite

Benennen Sie den Knoten image unter dem Knoten design_dialog in dialog um.

Umbenennen von logo.jsp in image.jsp.

Öffnen Sie img.GET.java und ändern Sie das Paket in apps.mywebsite.components.image.

Öffnen Sie /apps/mywebsite/components/image/ image.jsp

Ersetzen Sie den vorhandenen Code durch den folgenden Code und speichern Sie dann die Änderungen:

<%@include file="/libs/foundation/global.jsp"%><%
%><%@ page import="com.day.cq.commons.Doctype,
                    com.day.cq.wcm.foundation.Image,
                    com.day.cq.wcm.api.components.DropTarget,
                    com.day.cq.wcm.api.components.EditConfig,
                    com.day.cq.wcm.commons.WCMUtils" %><%
 /* global.jsp provides access to the current resource through the resource object */
        Image img = new Image(resource);
        img.setItemName(Image.NN_FILE, "image");
        img.setItemName(Image.PN_REFERENCE, "imageReference");
        img.setSelector("img");
        img.setDoctype(Doctype.fromRequest(request));
        img.setAlt("Home");
        img.draw(out); %>

Speichern Sie die Änderungen.

Erstellen Sie in CRXDE Lite unter dem Knoten /apps/mywebsite/components/image einen neuen Knoten wie folgt:

• Name: cq:editConfig.
• Typ: cq:EditConfig.

Erstellen Sie unter dem Knoten cq:editConfig einen neuen Knoten wie folgt:

• Name: cq:dropTargets.
• Typ: cq:DropTargetConfig.

Erstellen Sie unter dem Knoten cq:dropTargets einen neuen Knoten wie folgt:

• Name: Bild.
• Typ: nt:unstructured.

Legen Sie in CRXDE die Eigenschaften wie folgt fest:

Laden Sie in Ihrem Browser die Seite Produkte neu.

Klicken Sie im Sidekick auf die Designmodus Symbol.

Klicken Sie auf Bearbeiten Schaltfläche zum Bearbeiten des Designdialogfelds von par.

Im Dialogfeld wird eine Liste von Zugelassene Komponenten angezeigt wird; navigieren zu MyWebsite, wählen Sie die My Image Component und klicken Sie auf OK.

Zurück zu Bearbeitungsmodus.

Doppelklicken Sie auf den Rahmen parsys (auf Komponenten oder Assets hierher ziehen). Die Neue Komponente einfügen und Sidekick Selektoren sehen wie folgt aus:

Navigieren Sie in CRXDE Lite zu /apps/mywebsite/components/contentpage, öffnen Sie die Datei body.jsp und suchen Sie nach dem folgenden Code:

<div class="toolbar">toolbar</div>

Ersetzen Sie diesen Code durch den folgenden Code und speichern Sie die Änderungen:

<cq:include path="toolbar" resourceType="foundation/components/toolbar"/>

Wählen Sie im Ordnerbaum der Seite AEM Websites die Option Websites/My Website/EnglishKlicken Sie auf Neu > Neue Seite. Geben Sie die folgenden Eigenschaftswerte an und klicken Sie auf Erstellen:

• Titel: Symbolleiste
• Auswählen My Website Content Page Template

Klicken Sie in der Liste der Seiten mit der rechten Maustaste auf die Symbolleiste Seite und klicken Sie auf Eigenschaften. Auswählen In Navigation ausblenden und klicken Sie auf OK.

Die In Navigation ausblenden verhindert, dass die Seite in Navigationskomponenten wie topnav und listchildren angezeigt wird.

under Symbolleiste, erstellen Sie die folgenden Seiten:

• Kontakte
• Feedback
• Anmeldung
• Suchen

Laden Sie in Ihrem Browser die Seite Produkte neu. Sie sieht wie folgt aus:

Klicken Sie in CRXDE Lite mit der rechten Maustaste auf /apps/mywebsite/components, wählen Sie dann die Option Erstellen und anschließend die Option Komponente erstellen aus.

Verwenden Sie das Dialogfeld, um die Komponente zu konfigurieren:

1. Geben Sie in einem ersten Bereich die folgenden Eigenschaftswerte an:

   • Titel: suchen
   • Titel: Meine Suchkomponente
   • Beschreibung: Dies ist meine Suchkomponente
   • Gruppe: MyWebsite

2. Klicken Nächste Klicken Sie auf Nächste erneut.

3. Im Zugelassene übergeordnete Elemente auf + Schaltfläche und Typ */parsys.

4. Klicken Nächste und klicken Sie anschließend auf OK.

Klicken Sie auf Alle speichern.

Kopieren Sie die folgenden Knoten und fügen Sie sie in die apps/mywebsite/components/search node:

• /libs/foundation/components/search/dialog
• `` /libs/foundation/components/search/i18n
• /libs/foundation/components/search/icon.png

Klicken Sie auf Alle speichern.

Öffnen Sie die Datei /apps/mywebsite/components/search/search.jsp.

Kopieren Sie den folgenden Code und fügen Sie ihn in search.jsp ein:

<%@ page import="com.day.cq.wcm.foundation.Search,com.day.cq.tagging.TagManager" %>
<%@include file="/libs/foundation/global.jsp" %><%
%><cq:setContentBundle/><%
    Search search = new Search(slingRequest);

    String searchIn = (String) properties.get("searchIn");
    String requestSearchPath = request.getParameter("path");
    if (searchIn != null) {
        /* only allow the "path" request parameter to be used if it
         is within the searchIn path configured */
        if (requestSearchPath != null && requestSearchPath.startsWith(searchIn)) {
            search.setSearchIn(requestSearchPath);
        } else {
            search.setSearchIn(searchIn);
        }
    } else if (requestSearchPath != null) {
        search.setSearchIn(requestSearchPath);
    }

    pageContext.setAttribute("search", search);
    TagManager tm = resourceResolver.adaptTo(TagManager.class);
%><c:set var="trends" value="${search.trends}"/><%
%><center>
  <form action="${currentPage.path}.html">
    <input size="41" maxlength="2048" name="q" value="${fn:escapeXml(search.query)}"/>
    <input value="<fmt:message key="searchButtonText"/>" type="submit" />
  </form>
</center>
<br/>
<c:set var="result" value="${search.result}"/>
<c:choose>
  <c:when test="${empty result && empty search.query}">
  </c:when>
  <c:when test="${empty result.hits}">
    <c:if test="${result.spellcheck != null}">
      <p><fmt:message key="spellcheckText"/> <a href="<c:url value="${currentPage.path}.html"><c:param name="q" value="${result.spellcheck}"/></c:url>"><b><c:out value="${result.spellcheck}"/></b></a></p>
    </c:if>
    <fmt:message key="noResultsText">
      <fmt:param value="${fn:escapeXml(search.query)}"/>
    </fmt:message>
  </c:when>
  <c:otherwise>
    <p class="searchmeta">Results ${result.startIndex + 1} - ${result.startIndex + fn:length(result.hits)} of ${result.totalMatches} for <b>${fn:escapeXml(search.query)}</b>. (${result.executionTime} seconds)</p>
   <br/>

  <div class="searchresults">
    <div class="results">
      <c:forEach var="hit" items="${result.hits}" varStatus="status">
        <div class="hit">
        <a href="${hit.URL}">${hit.title}</a>
        <div class="excerpt">${hit.excerpt}</div>
       <div class="hiturl"> ${hit.URL}<c:if test="${!empty hit.properties['cq:lastModified']}"> - <c:catch><fmt:formatDate value="${hit.properties['cq:lastModified'].time}" dateStyle="medium"/></c:catch></c:if> - <a href="${hit.similarURL}"><fmt:message key="similarPagesText"/></a>
        </div></div>
      </c:forEach>
    </div>
      <br/>

     <div class="searchRight">
          <c:if test="${fn:length(trends.queries) > 0}">
              <p><fmt:message key="searchTrendsText"/></p>
              <div class="searchTrends">
                  <c:forEach var="query" items="${trends.queries}">
                      <a href="<c:url value="${currentPage.path}.html"><c:param name="q" value="${query.query}"/></c:url>"><span style="font-size:${query.size}px"><c:out value="${query.query}"/></span></a>
                  </c:forEach>
              </div>
          </c:if>
          <c:if test="${result.facets.languages.containsHit}">
              <p>Languages</p>
              <c:forEach var="bucket" items="${result.facets.languages.buckets}">
                  <c:set var="bucketValue" value="${bucket.value}"/>
                  <c:set var="label" value='<%= new java.util.Locale((String) pageContext.getAttribute("bucketValue")).getDisplayLanguage(request.getLocale()) %>'/>
                  <c:choose>
                      <c:when test="${param.language != null}">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="language"/></cq:requestURL>">remove filter</a></c:when>
                      <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="language" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                  </c:choose><br/>
              </c:forEach>
          </c:if>
          <c:if test="${result.facets.tags.containsHit}">
              <p>Tags</p>
              <c:forEach var="bucket" items="${result.facets.tags.buckets}">
                  <c:set var="bucketValue" value="${bucket.value}"/>
                  <c:set var="tag" value="<%= tm.resolve((String) pageContext.getAttribute("bucketValue")) %>"/>
                  <c:if test="${tag != null}">
                      <c:set var="label" value="${tag.title}"/>
                      <c:choose>
                          <c:when test="<%= request.getParameter("tag") != null && java.util.Arrays.asList(request.getParameterValues("tag")).contains(pageContext.getAttribute("bucketValue")) %>">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="tag" value="${bucket.value}"/></cq:requestURL>">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="tag" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                      </c:choose><br/>
                  </c:if>
              </c:forEach>
          </c:if>
          <c:if test="${result.facets.mimeTypes.containsHit}">
              <jsp:useBean id="fileTypes" class="com.day.cq.wcm.foundation.FileTypes"/>
              <p>File types</p>
              <c:forEach var="bucket" items="${result.facets.mimeTypes.buckets}">
                  <c:set var="bucketValue" value="${bucket.value}"/>
                  <c:set var="label" value="${fileTypes[bucket.value]}"/>
                  <c:choose>
                      <c:when test="<%= request.getParameter("mimeType") != null && java.util.Arrays.asList(request.getParameterValues("mimeType")).contains(pageContext.getAttribute("bucketValue")) %>">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="mimeType" value="${bucket.value}"/></cq:requestURL>">remove filter</a></c:when>
                      <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="mimeType" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                  </c:choose><br/>
              </c:forEach>
          </c:if>
          <c:if test="${result.facets.lastModified.containsHit}">
              <p>Last Modified</p>
              <c:forEach var="bucket" items="${result.facets.lastModified.buckets}">
                  <c:choose>
                      <c:when test="${param.from == bucket.from && param.to == bucket.to}">${bucket.value} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="from"/><cq:removeParam name="to"/></cq:requestURL>">remove filter</a></c:when>
                      <c:otherwise><a title="filter results" href="<cq:requestURL><cq:removeParam name="from"/><cq:removeParam name="to"/><c:if test="${bucket.from != null}"><cq:addParam name="from" value="${bucket.from}"/></c:if><c:if test="${bucket.to != null}"><cq:addParam name="to" value="${bucket.to}"/></c:if></cq:requestURL>">${bucket.value} (${bucket.count})</a></c:otherwise>
                  </c:choose><br/>
              </c:forEach>
          </c:if>

      <c:if test="${fn:length(search.relatedQueries) > 0}">

       <br/><br/><div class="related">
        <fmt:message key="relatedSearchesText"/>
        <c:forEach var="rq" items="${search.relatedQueries}">
            <a href="${currentPage.path}.html?q=${rq}"><c:out value="${rq}"/></a>
        </c:forEach></div>
      </c:if>
      </div>

      <c:if test="${fn:length(result.resultPages) > 1}">
        <div class="pagination">
            <fmt:message key="resultPagesText"/>
        <c:if test="${result.previousPage != null}">
          <a href="${result.previousPage.URL}"><fmt:message key="previousText"/></a>
        </c:if>
        <c:forEach var="page" items="${result.resultPages}">
          <c:choose>
            <c:when test="${page.currentPage}">${page.index + 1}</c:when>
            <c:otherwise>
              <a href="${page.URL}">${page.index + 1}</a>
            </c:otherwise>
          </c:choose>
        </c:forEach>
        <c:if test="${result.nextPage != null}">
          <a href="${result.nextPage.URL}"><fmt:message key="nextText"/></a>
        </c:if>
        </div>
      </c:if>
      </div>

  </c:otherwise>
</c:choose>

Speichern Sie die Änderungen.

Öffnen Sie in CRXDE Lite die Datei left.jsp unter /apps/mywebsite/components/contentpage und suchen Sie den folgenden Code (Zeile 2):

%><div class="left">

Fügen Sie den folgenden Code ein before diese Zeile:

%><%@ page import="com.day.text.Text"%><%
%><% String docroot = currentDesign.getPath();
String home = Text.getAbsoluteParent(currentPage.getPath(), 2);%><%

Suchen Sie die folgende Codezeile:

<div>search</div>

Ersetzen Sie diese Codezeile durch den folgenden Code und speichern Sie die Änderungen:

<div class="form_1">
     <form class="geo" action="<%= home %>/toolbar/search.html" id="form" >
          <p>
               <input class="geo" type="text" name="q"><br>
               <a href="<%= home %>/toolbar/search.html" class="link_1">advanced search</a>
          </p>
     </form>
</div>

Laden Sie in Ihrem Browser die Seite Produkte neu. Die Suchkomponente sieht wie folgt aus:

Öffnen Sie in Ihrem Browser die Suche Seite.

Klicken Sie im Sidekick auf die Design Modussymbol.

Klicken Sie im Block "Design von par"(unter dem Suchtitel) auf Bearbeiten.

Führen Sie im Dialogfeld einen Bildlauf nach unten zur Gruppe Meine Websites durch, wählen Sie Meine Such-Komponente aus und klicken Sie auf OK.

Klicken Sie im Sidekick auf das Dreieck, um zu Bearbeiten -Modus.

Ziehen Sie die Meine Suche aus dem Sidekick in den Rahmen parsys. Sie sieht wie folgt aus:

Navigieren Sie zu Ihrer Produkte Seite. Suchen Sie im Eingabefeld nach Kunden und drücken Sie die Eingabe. Sie werden zum Suche Seite. Wechseln zu Vorschau mode: Die Ausgabe weist folgendes Format auf:

Navigieren Sie in CRXDE Lite zu /apps/mywebsite/components/contentpage, öffnen Sie die Datei right.jsp und ersetzen Sie:

<div>iparsys</div>

durch:

<cq:include path="rightpar" resourceType="foundation/components/iparsys" />

Speichern Sie die Änderungen.

Laden Sie in Ihrem Browser die Seite Produkte neu. Die Seite sieht nun insgesamt wie folgt aus: