Systemstatus
English (US)

Usecases und Praxis-Beispiele

Aktueller Beitrag:
Weitere Beiträge aus dieser Kategorie:

TAL-Praxis-Beipiel: eMailing- und LeadPage-Vorlagen

  • Aktualisiert
Folgen

Zielsetzung

Ziel dieses Beitrags ist es Ihnen die sehr zahlreichen Möglichkeiten aufzuzeigen, wie sie TAL für die Erstellung von eMailing/LeadPage- und Artikel-Vorlagen einsetzen können. Folgende Beispiele werden behandelt:

Individualisierter Seiten-Titel

In diesem Beispiel wird folgendes demonstriert:

  • Je nachdem ob das aktuelle eMailing mit einem Profil generiert wird, wird entweder der Betreff als Seitentitel gesetzt oder ein Fallback-Text. 
eMailing-Vorlage Ausgabe (HTML)
<head>
  <title tal:condition="not: THIS/getCurrentUser/isDummy">${THIS/getSubjectForCurrentUser}</title>
  <title tal:condition="THIS/getCurrentUser/isDummy">Das ist ein allgemeiner Titel</title>
</head>

Folgende TAL-Funktionen kommen zur Anwendung:

Sprachcontainer anhand Profil-Sprache wählen

In diesem Beispiel wird folgendes demonstriert:

  • Die Sprache des aktuellen Profils wird ausgelesen. Ist keine gesetzt ist Deutsch (id = 1) der Fallback.
  • Alle Container im angegebenen Ordner ("langFolder") werden durchgegangen. Der Container dessen Namen der Profilsprache entspricht wird als Sprach-Container (langContainer) gesetzt.
  • Wird kein passender Container gefunden, weil es für die aktuelle Sprache keinen passenden Container gibt, bleibt der Englisch-sprachige Container als Fallback.
  • Das Attribut "READMORE" des Sprach-Containers wird ausgeben. 
eMailing-Vorlage Ausgabe (HTML)
<div tal:define="lang THIS/getCurrentUser/getValuesRaw/LANGUAGE|string:1; langFolder string:1681176;global langContainer THIS/getContainer/23471899" tal:omit-tag="true" tal:repeat="object THIS/getCategoryContent/byDescription/${langFolder}" style="display:none">
  <div tal:condition="equals:string:${lang}/${object/getDescription}" tal:omit-tag="true">
    <div tal:define="global langContainer THIS/getContainer/${object/getId}" tal:omit-tag="true">&nbsp;</div>
  </div>
</div>
<span>${langContainer/getAttributeByName/READMORE}</span>

Folgende TAL-Funktionen kommen zur Anwendung:

Flexible Navigation aus Link-Liste des Content-Containers

In diesem Beispiel wird folgendes demonstriert:

  • Für die Generierung einer Link-Tabelle wird aus dem Content-Container eine Linkliste ausgewertet.
  • Ist die Linkliste leer, wird die Tabelle nicht angezeigt.
  • Es wird über jedes Link-Objekt in der Link-Liste iteriert, wobei nur die ersten 4 berücksichtigt werden. 
  • Ist bei beim aktuellen Profil Tracking akzeptiert, werden Tracking-Links generiert. Ansonsten sind die Links nicht trackbar. 
eMailing-Vorlage Ausgabe (HTML)
<table tal:condition="THIS/getContentContainer/getAttributeByName/HEADERNAVIGATION/getValueRaw">
  <tbody>
    <tr>
      <td class="headerNav" tal:repeat="link THIS/getContentContainer/getAttributeByName/HEADERNAVIGATION/getValueRaw">
        <div tal:condition="lessthan:string:${repeat/link/index}/4" tal:omit-tag="true">
          <a href="#" tal:attributes="href link/getTrackLink" tal:condition="THIS/getCurrentUser/isTrackable">${link/getText}</a> 
          <a href="#" tal:attributes="href link/getLink" tal:condition="not:THIS/getCurrentUser/isTrackable">${link/getText}</a>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Folgende TAL-Funktionen kommen zur Anwendung:

Bild-Picker für Headerbild im Visuellen-Editor einsetzen

In diesem Beispiel wird folgendes demonstriert:

  • Wird das aktuelle eMailing oder LeadPage im Visuellen Editor angezeigt, wird ein Bild-Picker eingesetzt. 
  • Ansonsten wird ein Bild angezeigt dessen URL in dem INPUTFIELD_9 hinterlegt ist.
  • Das Bild wird automatisch auf eine Breite von 800 Pixeln skaliert.
  • Der Bild-Picker ließt alle Bilder aus dem entsprechenden Verzeichnis und bietet diese als Auswahl an.
  • Die ID des Bilder-Verzeichnisses steht im INPUTFIELD_10. 
  • Zum Schluss wird das JavaScript, welches zur Anzeige des Bild-Pickers notwendig ist, nur bei der Anzeige im Visuellen Editor, geladen.
eMailing-Vorlage Ausgabe (HTML)
<div tal:condition="THIS/isAppendMode" tal:omit-tag="true">
  <img alt="Header" id="INPUTFIELD_9_img" onclick="newsletter_image_picker('INPUTFIELD_9')" src="null" tal:attributes="src string:${THIS/getInputFields/9},width=800" />
  <div style="display: none;">{$INPUTFIELD_9}
    <select id="INPUTFIELD_9_options" name="INPUTFIELD_9_options">
      <option tal:attributes="value artref/getURL" tal:content="artref/getDescription" tal:repeat="artref THIS/getCategoryContent/byDescription/${THIS/getInputFields/10}">URLS from Header folder</option>
    </select>
  </div>
  <script type="text/javascript" defer="defer">
    /*<![CDATA[*/
    newsletter_image_picker_init('INPUTFIELD_9', 150, 800); /*]]>*/
  </script>
</div>
<img alt="Header" id="INPUTFIELD_9_img" src="null" tal:attributes="src string:${THIS/getInputFields/9},width=800" />
<script type="application/javascript" tal:condition="THIS/isAppendMode">overlayInit();</script>

Folgende TAL-Funktionen kommen zur Anwendung:

Editorial mit persönlicher Anrede und Inhaltsverzeichnis

In diesem Beispiel wird folgendes demonstriert:

  • Wird das eMailing mit einem Profil generiert, wird eine persönliche Anrede angezeigt. Ansonsten wird ein Fallback-Text angezeigt.
  • Das Editorial wird als Ersetzungs-Variable eingefügt, damit es im Visuellen Editor bearbeitet werden kann.
  • Sind in dem aktuellen eMailing Artikel vorhanden, wird ein Inhaltsverzeichnis angezeigt.
  • Dazu wird durch alle gefüllten Slots iteriert. Für jeden Slot wird dabei eine unsortierte Liste erzeugt.
  • Für jeden Artikel in dem jeweiligen Slot wird ein Link mit einer Sprungmarke auf den Artikel und der Artikel-Überschrift als Linktext eingefügt.
  • Ist in einem Slot mehr als ein Artikel vorhanden, werden diese durchnummeriert. 
eMailing-Vorlage Ausgabe (HTML)
<table>
  <tbody>
    <tr>
      <td>
        <strong tal:condition="not:THIS/getCurrentUser/isDummy">{$INDIVIDUAL_SALUTATION},</strong>
        <strong tal:condition="THIS/getCurrentUser/isDummy">Sehr geehrte Damen und Herren,</strong>

        <p>{$HTMLAREA_4}</p>
      </td>
      <td tal:condition="THIS/hasArticleInAnySlot">
        <h2>Inhalt:</h2>

        <ul tal:repeat="slot THIS/getFilledSlots">
          <li tal:repeat="article slot/getArticles">
            <a href="#" tal:attributes="href string:${article/getArticle/getAnchorHRef}" tal:condition="slot/hasMoreThanOneArticle">${article/getSortPosPlusOne} von ${slot/CountArticles}: ${article/getArticle/getAttributeByName/HEADLINE}</a>
            <a href="#" tal:attributes="href string:${article/getArticle/getAnchorHRef}" tal:condition="slot/hasOneArticle">${article/getArticle/getAttributeByName/HEADLINE}</a></li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

Folgende TAL-Funktionen kommen zur Anwendung:

Ein- und mehrspaltige Slots mit TAL ausgeben

In diesem Beispiel wird folgendes demonstriert:

  • Wird das eMailing oder die LeadPage im Visuellen Editor ausgegeben, werden die Slots in einer Tabelle mit Hilfe von Ersetzungsvariablen erzeugt.
  • Für jeden Slot der mindestens einen Artikel enthält wird eine Überschrift eingefügt. Das geschieht im Visuellen Editor mit Hilfe von Ersetzungsvariablen, in der Ausgabe des eMailings oder der LeadPage mit Hilfe von TAL.
  • Wird das eMailing oder die LeadPage nicht im Visuellen Editor aufgerufen und ist in einem Slot mindestens ein Artikel enthalten, wird eine Tabelle für diesen Slot erzeugt. 
  • Die Artikel werden je nach Slot in einer ein-, zwei- oder dreispaltigen Tabelle ausgegeben.
eMailing-Vorlage Ausgabe (HTML)
<table tal:condition="THIS/isAppendMode">
  <tbody>
    <tr tal:condition="THIS/getSlots/0/hasArticles">
      <td>{$INPUTFIELD_4}</td>
    </tr>
    <tr>
      <td>{$SLOT_0}</td>
    </tr>
    <tr tal:condition="THIS/getSlots/1/hasArticles">
      <td>{$INPUTFIELD_5}</td>
    </tr>
    <tr>
      <td>{$SLOT_1}</td>
    </tr>
    <tr tal:condition="THIS/getSlots/2/hasArticles">
      <td>{$INPUTFIELD_6}</td>
    </tr>
    <tr>
      <td>{$SLOT_2}</td>
    </tr>
  </tbody>
</table>

<div tal:condition="not:THIS/isAppendMode" tal:omit-tag="true">
  <table tal:condition="THIS/getSlots/0/hasArticles">
    <tbody>
      <tr tal:condition="THIS/getInputFields/4">
        <td>
          <h1 tal:content="THIS/getInputFields/4">&nbsp;</h1>
        </td>
      </tr>
      <tr tal:repeat="article THIS/getSlots/0/getArticles">
        <td>${structure article/renderWithTemplate|string:&nbsp;;}</td>
      </tr>
    </tbody>
  </table>
</div>

<div tal:condition="not:THIS/isAppendMode" tal:omit-tag="true">
  <table tal:condition="THIS/getSlots/1/hasArticles">
    <tbody>
      <tr tal:condition="THIS/getInputFields/5">
        <td>
          <h1 tal:content="THIS/getInputFields/5">&nbsp;</h1>
        </td>
      </tr>
      <tr tal:repeat="column THIS/getSlots/1/getArticlesInTwoColumns">
        <td tal:repeat="article column">${structure article/renderWithTemplate|string:&nbsp;;}</td>
      </tr>
    </tbody>
  </table>
</div>

<div tal:condition="not:THIS/isAppendMode" tal:omit-tag="true">
  <table tal:condition="THIS/getSlots/2/hasArticles">
    <tbody>
      <tr tal:condition="THIS/getInputFields/6">
        <td>
          <h1 tal:content="THIS/getInputFields/6">&nbsp;</h1>
        </td>
      </tr>
      <tr tal:repeat="column THIS/getSlots/2/getArticlesInColumns/3">
        <td tal:repeat="article column">${structure article/renderWithTemplate|string:&nbsp;;}</td>
      </tr>
    </tbody>
  </table>
</div>

Folgende TAL-Funktionen kommen zur Anwendung:

In diesem Beispiel wird folgendes demonstriert:

  • Je nachdem ob ein oder mehr Links im SmartLink enthalten sind, wird eine Tabelle aus Links erzeugt oder ein einzelner Link ausgegeben.
  • Hat das aktuelle Profil dem Tracking zugestimmt, werden Trackinglinks generiert. 
eMailing-Vorlage Ausgabe (HTML)
<table tal:condition="greaterthan:string:${footerLinks/getLinklist/getCount}/1" tal:define="global footerLinks THIS/getSmartlink/23472743">
  <tbody>
    <tr>
      <td class="footerNav" tal:repeat="link footerLinks/getLinklist/getLinks">
        <a href="#" tal:attributes="href link/getTrackLink" tal:condition="THIS/getCurrentUser/isTrackable">${link/getText}</a>
        <a href="#" tal:attributes="href link/getLink" tal:condition="not:THIS/getCurrentUser/isTrackable">${link/getText}</a>
      </td>
    </tr>
  </tbody>
</table>
<div align="center" tal:condition="THIS/getCurrentUser/isTrackable">
  <a href="#" tal:attributes="href link/getTrackLink" tal:condition="equals:string:${footerLinks/getLinklist/getCount}/1" tal:define="link footerLinks/getLinklist/getLinks/0">${link/getText}</a>
</div>
<div align="center" tal:condition="not:THIS/getCurrentUser/isTrackable">
  <a href="#" tal:attributes="href link/getLink" tal:condition="equals:string:${footerLinks/getLinklist/getCount}/1" tal:define="link footerLinks/getLinklist/getLinks/0">${link/getText}</a>
</div>

Folgende TAL-Funktionen kommen zur Anwendung:

URL Parameter für Link auf Online-Version berücksichtigen 

In diesem Beispiel wird folgendes demonstriert:

  • Der Link zur Online-Version des eMailings wird nur angezeigt, wenn der URL Parameter ("online") gesetzt ist. 
  • An dem Link zur Online-Version wird der entsprechende Parameter angehangen. 
eMailing-Vorlage Ausgabe (HTML)
<p tal:condition="not:equals:string:${REQUEST/online}/true">Wenn dieser Newsletter nicht richtig dargestellt wird klicken Sie bitte <a href="{$ONLINEMAIL_URL},online=true">hier</a></p>

Folgende TAL-Funktionen kommen zur Anwendung:

Artikel-Vorlage mit TAL

In diesem Beispiel wird folgendes demonstriert:

  • Über das zum Artikel gehörende eMailing-/LeadPage-Objekt wird ein Sprachcontainer geladen. Die ID des Sprachcontainers steht im INPUTFIELD_0 des eMailings oder der LeadPage.
  • Es wird eine Sprungmarke auf den Artikel gesetzt.
  • Je nachdem ob der aktuelle Artikel im aktuellen Slot eine gerade oder ungerade Position hat, wird eine Spalte Links oder rechts vom Artikeltext eingefügt.
  • Die Position des Artikels innerhalb des Slots wird in die Artikel-Überschrift eingebaut.
  • Für das Artikel-Bild wird ein METAL-Macro eingesetzt. Dadurch muss der Quellcode für das Artikel-Bild nur einmal statt vier mal geschrieben/geändert werden. 
  • Die URL des Bilds wird aus einem Artikel-Attribut gelesen.
  • Falls ein Landingpage-Link hinterlegt ist wird das Bild verlinkt und ein Call-to-Action-Link angezeigt.
  • Als Beschriftung des Call-To-Action-Links wird ein Attribut aus dem Artikel gelesen. Ist dieses Leer wird als Fallback der entsprechende Text aus dem Sprachcontainer verwendet.
Artikel-Vorlage Ausgabe (HTML)
<html>
<head>
  <title></title>
</head>
<body>
  <img alt="" metal:define-macro="image" src="#" tal:attributes="src string:${THIS/getAttributeByName/IMAGE},width=250" tal:condition="THIS/hasAttribute/IMAGE" />
  <table tal:define="langContainer THIS/getNewsletter/getContainer/${THIS/getNewsletter/getInputFields/0}">
    <tbody tal:attributes="id THIS/getAnchor">
      <tr>
        <td tal:condition="THIS/isEven">
          <a href="#" tal:attributes="href THIS/getReadLpLinkOrLpUrl" tal:condition="THIS/hasLandingPage">
            <img alt="" metal:use-macro="image" src="null" />
          </a>
          <img alt="" metal:use-macro="image" src="null" tal:condition="not:THIS/hasLandingPage" />
        </td>
        <td>
          <table>
            <tbody>
              <tr tal:condition="not:equals:string:${THIS/getAttributeByName/HEADLINE}/">
                <td>${THIS/getSortPosPlusOne}. ${THIS/getAttributeByName/HEADLINE}</td>
              </tr>
              <tr tal:condition="THIS/hasAttribute/SHORTTEXT">
                <td>
                  <p>${THIS/getAttributeByName/SHORTTEXT}</p>
                </td>
              </tr>
              <tr tal:condition="THIS/hasLandingPage">
                <td>
                  <a href="#" tal:attributes="href THIS/getReadLpLinkOrLpUrl">
                    <span tal:condition="equals:string:${THIS/getAttributeByName/CTABESCHRIFTUNG}/" tal:omit-tag="true">${langContainer/getAttributeByName/CTABESCHRIFTUNG}</span>
                    <span tal:condition="not:equals:string:${THIS/getAttributeByName/CTABESCHRIFTUNG}/" tal:omit-tag="true">${THIS/getAttributeByName/CTABESCHRIFTUNG}</span>
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
        <td tal:condition="THIS/isOdd">
          <a href="#" tal:attributes="href THIS/getReadLpLinkOrLpUrl" tal:condition="THIS/hasLandingPage">
            <img alt="" metal:use-macro="image" src="null" />
          </a> 
          <img alt="" metal:use-macro="image" src="null" tal:condition="not:THIS/hasLandingPage" />
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Folgende TAL-Funktionen kommen zur Anwendung:

Verwandte Beiträge