Der Artikelcontainer

Erstellen Sie den Container

1. Klicken Sie in der Registerkarte „Komponenten“ auf den Artikelcontainer und wählen Sie „Neue/Neuen erstellen“. Es öffnet sich das Eigenschaftenfenster des Artikelcontainers.

2. Nennen Sie die Komponente „WEEKLY_PRODUCTS“. Verwenden Sie als Alias „Wöchentliche Produkte“. Dieser Alias wird in Express verwendet.

3. Wählen Sie in der Registerkarte „Auswahl von Inhalten“ die Artikeltabelle, die zuvor aus dem Dropdown „Quelle“ erstellt wurde. So teilen Sie Campaign mit, die Artikel in dieser Artikeltabelle abzurufen und zu speichern. An den anderen Eigenschaften müssen Sie nichts ändern. 'Nur ausgewählte Artikel einbinden' zeigt an, dass die Express-Benutzer für das Hinzufügen von Artikeln verantwortlich sind. „Manuelle Sortierung zulassen“ fügt in Express Pfeile für das Verschieben der Artikel nach oben oder nach unten hinzu.

WICHTIGER HINWEIS: Wird das Häkchen bei der Option „Nur ausgewählte Artikel einbinden“ entfernt, werden alle Artikel in der Artikelliste, die dem Filter entsprechen, für jede Mail geladen, die für jeden einzelnen Kontakt generiert wird. Das bedeutet eine hohe Belastung für das System, wenn kein Filter festgelegt wurde, oder der Filter die geladenen Artikel nicht ausreichend eingrenzt (ca. 5000 Artikel), und es sind Probleme beim Erstellen der Mails zu erwarten. Wenn „Nur ausgewählte Artikel einbinden“ nicht ausgewählt wird, legen Sie IMMER einen Filter im Artikelcontainer fest, damit Sie die Menge der Artikel eingrenzen können, die geladen werden. Verwenden Sie zum Beispiel das Feld DELIVERY_AFTER_DATE zur Filterung der Auswahl, mit DELIVERY_AFTER_DATE <=GETDATE() als Filter. GETDATE() zeigt das aktuelle Datum an.

4. Wenn Sie fertig sind, klicken Sie auf 'OK'. Der Artikelcontainer wird unter „In dieser Mail verwendet“ in der Registerkarte „Komponenten“ aufgelistet.

Felder im Artikelcontainer konfigurieren:

Wir müssen festlegen, wie die Artikelfelder in Express verwendet werden können. Als Bild, reiner Text, Hyperlink...

5. Klicken Sie unter „In dieser Mail verwendet“ in der Registerkarte „Komponenten“ auf den Namen des Artikelcontainers, um die Feldnamen anzeigen zu lassen.

6. Führen Sie einen Rechtsklick auf „CREATED_DT aus und wählen Sie „Eigenschaften“. Hier können Sie unter „Nutzung“ (Bild, reiner Text, Hyperlink) das Feldverhalten definieren und einen Alias einstellen. Dieser Alias wird in Express als Feldname verwendet:

  • CREATED_DT, MODIFIED_DT und Taxonomie können auf „Nicht bearbeitbar“ gesetzt werden. Die Felder werden dann in Express nicht angezeigt. Ein Alias ist nicht erforderlich.
  • IMAGE: Stellen Sie den Alias und die Nutzung auf „Bild“. Wenn Sie die Nutzung einstellen, wird der Button „Details“ aktiviert. Klicken Sie darauf, um zusätzliche Bildeinstellungen festzulegen:
    • Erlauben Sie dem Express-Benutzer, lokale Bilder hochzuladen.
    • Stellen Sie einen Standard-Speicherordner für die Bilder ein.
    • Stellen Sie die zulässige Mindest- und Maximal-Bildgröße ein. Für dieses Design muss die Bildbreite immer 180px betragen. Die Höhe kann ein wenig zwischen 150px und 210px variieren. Die ideale Bildgröße wäre  180x180px.
    • Erlauben Sie dem Express-Benutzer, Ihre Bilder auf die zulässige Größe zuzuschneiden.

  • TITLE: Alias „Titel“, Nutzung „Einzeltextzeile“
  • PRICE: Alias „Preis", Nutzung "Zahl"
  • LINK: Alias „Verknüpfung“, Nutzung „Hyperlink“

Fügen Sie den Artikelcontainer der Vorlage hinzu

7. Vergewissern Sie sich, dass in der oberen Bearbeitungsleiste „Tabellenrahmen anzeigen“ aktiviert ist.

8. Dieser Teil ist etwas kompliziert. Fahren Sie mit der Maus über den Beispiel-Tabellenrahmen, und wenn die 2 kleinen Symbole zum Bearbeiten auftauchen, führen Sie den Mauszeiger über das Symbol des linken Pfeils. Wählen Sie „Auswählen“ aus dem Dropdown-Menü.

9. Führen Sie bei ausgewählter Beispielstabelle,im Komponentenfeld unter „In dieser E-Mail verwendet“ einen Rechtsklick auf den Artikelcontainer aus und klicken Sie auf „Einfügen“. Somit umgibt der Artikelcontainer die Beispielstabelle. Das Artikel-Layout sollte sich IMMER im Abschnitt „ITEM“ (MAITEM) befinden.

   

Es wird nur der Content in MAITEM für jeden Artikel wiederholt.

10. Alternativ dazu können Sie dazu in den Quellcode gehen, die Beispielstabelle zuschneiden, und genau unter dem Header „wöchentliche Favoriten“ den Artikelcontainer einfügen und die Beispielstabelle im Abschnitt MAITEM im Container platzieren. Der daraus resultierende HTML-Code (rechte Seite der Tabelle im Bild abgeschnitten) sieht folgendermaßen aus:

11. Anstelle des Beispiels-Content müssen wird die Artikelcontainer-Felder verwenden:

  • Die Bildattribute müssen bleiben, nur sein Quellecode muss mit dem Feld IMAGE und der ALT-Tag mit dem Feld „TITLE“ ersetzt werden. Führen Sie den Mauszeiger über das Bild und wählen Sie aus dem Dropdown „Bearbeiten“ „Eigenschaften“. Für den „Quell“-Typ ~ITEM.IMAGE~, und für den ALT-Text ~ITEM.TITLE~

      

    In unserem speziellen Beispiel muss die Höhe variabel sein. Sie wird zu einem früheren Zeitpunkt in den Feldeigenschaften zwischen 150px und 210px eingestellt. Daher kann der Wert für die Höhe nicht im Quellcode eingestellt werden. Wenn Sie die Bildeigenschaften bearbeitet haben, benötigt Selligent Campaign eine Bildgröße, und diese muss standardmäßig auf die für die Bild-Attribute festgelegte Größe eingestellt werden.

    Klicken Sie auf die Registerkarte „Quelle“ und finden Sie das Bild. Drücken Sie STRG+F und geben Sie ein: ITEM.IMAGE. Jetzt sollte das Bild-Tag angezeigt werden. Löschen Sie „Breite 180px; Höhe: 180px;" aus dem Style-Tag. Das vollständige Bild-Tag sieht folgendermaßen aus:
    <img alt="~ITEM.TITLE~" class="mobile-100" style="display: block; border: none;" width="180" src="~ITEM.IMAGE~" />

Die Klasse „mobile-100“ wird verwendet, um das Bild reaktionsfähig zu machen. Die Klasse überschreibt die zugewiesene Bildbreite und Bildhöhe. Allerdings nicht die Style-Breite-Einstellungen: 180px; Höhe: 180px; weil der eingereihte Style eine höhere Priorität hat als die Style-Tags, die über der Mail festgelegt wurden.

  • Im Quellcode finden Sie den Beispielstitel „Polariod cube“ genau unter dem Bild. Ersetzen Sie ihn mit ~ITEM.TITLE~, aber lassen Sie das a-Tag (Hyperlink) stehen, das den Titel umgibt. Anstatt es einzutippen, können Sie auch mit der rechten Maustaste auf das entsprechende Feld in der Registerkarte unter „In dieser Mail verwendet“ und „Einfügen“ auswählen.
  • Wiederholen Sie diesen Schritt für das Beispiel „Preis“. Finden Sie "&euro; 145.00" im Quellcode genau unter dem Titel und ersetzen sie es mit ~ITEM.PRICE~
  • Während des HTML-Imports, hat jedes Element des Artikels einen damit verknüpften Sensor mit einer festen URL erhalten: Das Bild, den Titel, den Preis und die Schaltfläche „Mehr Info“. Wir brauchen, je nach Artikel, einen Sensor mit einer variablen URL. Wir erstellen einen Sensor für den Artikel und verwenden ihn für verschiedene Artikelelemente.
    • Erstellen Sie im Feld „Sensoren“ einen neuen Sensor, nennen Sie diesen „Wöchentliche Produkte“, und wählen Sie die erste Option „„Den Kontakt an eine externe Adresse versenden“. Verwenden Sie für eine URL ~ITEM.LINK~. Sie können das Feld LINK des Artikelcontainers nur verwenden, wenn der Sensor mit dem Abschnitt ITEM (MAITEM) verwendet wird.


    • Finden Sie die ID des neu erstellten Sensors im Feld „Sensoren“. In diesem Beispiel ist das 206. Wir ersetzen die URLs für die bestehenden Hyperlinks mit einer neuen für den Sensor. Wählen Sie ein Artikelelement und klicken in der oberen Bearbeitungsleiste auf „Verknüpfen“. Ändern Sie die URL auf ~PROBE(206)~ wobei 206 die ID des neu erstellten Sensors ist. Bei „Protokoll“ sollten Sie "<Other>“ wählen. Führen Sie diesen Vorgang für jedes Artikelelement aus: Das Bild, den Titel, den Preis und die Schaltfläche „Mehr Info“.

Indem wir die URL des bestehenden Links ersetzen, stellen wir sicher, dass alle anderen Attribute des anfänglichen Designs für diesen Link gleich bleiben (Style,...).

    • Die ursprünglichen Sensoren, die nun nicht mehr verwendet werden, können aus dem Feld Sensoren entfernt werden. Führen Sie irgendwo im Feld einen Rechtsklick aus (nicht auf einen Sensor) und wählen Sie „Nicht verwendete Sensoren löschen“. Das sind die verbleibenden Links in diesem Beispiel:


    • Im Reporting würden wir den Sensor namens „Wöchentliche Produkte“ mit allen Klicks auf alle Artikel sehen. Indem sie das Feld TITLE des Artikelcontainers als „Reporting-Feld“ einstellen, würde der Sensorname im Reporting als Dropdown mit jedem Titel eines Artikels erscheinen, und die Klicks je nach dem einzelnen Artikel. Führen Sie in der Registerkarte „Komponenten“ einen Rechtsklick auf das Feld TITLE des Artikelcontainers unter „In dieser Mail verwendet“ und wählen Sie „Als Berichtsfeld einstellen“.

Artikel über mehrere Spalten ausdehnen (COLCOUNT)

Wir müssen die 3 Artikel statt untereinander in mehreren Spalten nebeneinander anzeigen lassen wollen. Dafür können wir für den Artikelcontainer das „Tabellen-Layout“ verwenden.

12. Fahren Sie mit der Maus über den Rahmen des Artikelcontainers in der Mail, und wenn die 3 kleinen Symbole zum Bearbeiten auftauchen, führen Sie den Mauszeiger über das Symbol des mittleren Pfeils. Wählen Sie „Eigenschaften“ aus dem Dropdown-Menü.

13. Wählen Sie im Fenster für die Abschnitt-Eigenschaften die zweite Registerkarte „Tabelle“. Setzen Sie ein Häkchen bei „Diesen Container über mehrere Spalten reichen lassen“ und setzen Sie die Spalten auf 3. Es wird eine weitere Tabelle um die Artikel in der späteren Mail erstellt, wodurch die Artikel in 3 Spalten aufgeteilt werden. Wir möchten, dass jeder Artikel mit dem Kopf jeder Zeile der generierten Tabelle übereinstimmt. Wählen Sie „Top“ aus dem Dropdown „vert. Align“.

Um die Reaktionsfähigkeit unseres Design zu erhalten, fügen wir der generierten Tabelle eine Tabellenklasse und einen Style hinzu, sowie eine Zellenklasse und einen Style:

  • CSS-Klasse der Tabelle: mobile-100
  • Tabellen-Style: Breite:600px;
  • CSS-Klasse der Zelle: mobile-col
  • Style der Zelle: Breite:180px;

Wenn Sie diese Eigenschaften einstellen, werden dem Abschnitt MACONTAINER im Quellcode zusätzliche Attribute hinzugefügt. Die HTML des Artikelcontainers sieht nun folgendermaßen aus (Artikeltabelle in MAITEM wird auf die Tabellen-Tags zugeschnitten):

<div id="MACONTAINER" macontenteditable="true" maparameter="WEEKLY_PRODUCTS" mashowalllanguages="FALSE" matable_colcount="3" matable_class="mobile-100" matable_style="width:600px;" matable_tdclass="mobile-col" matable_tdstyle="width:180px;" matable_halign="" matable_valign="Top" mahidediv="true">
<div id="MAHEADER" macontenteditable="true"></div>
<div id="MAITEM" macontenteditable="true">
   <table border="0" cellpadding="0" cellspacing="0" class="mobile-100" width="180">...</table>
</div>
<div id="MAFOOTER" macontenteditable="true"></div>
<div id="MANOMATCH" macontenteditable="true"></div>
</div>

14. Zum Erstellen einiger weißer 30px-Tabellenzwischenräume, können wir „Trenn“-Abschnitte im Artikelcontainer hinzufügen. Diese müssen jedoch zuerst im Quellcode hinzugefügt werden. Diese Abschnitte erstellen zusätzliche Spalten und Zeilen in der generierten Tabelle zwischen den Tabellenzellen, die die Artikel enthalten.

  • Wechseln Sie zur Registerkarte „Quelle“ und finden Sie das DIV MAITEM.
  • Geben Sie genau hinter dem DIV MAITEM und vor dem DIV MAFOOTER, die folgenden Zeilen ein:

<div id="MASEPTD" macontentEditable="true" mahidediv="true">
<img border="0" class="mobile-5" height="30" width="30" style="border: none; display: block;"  src="YOURIMAGELOCATION/spacer.png" />
</div>
<div id="MASEPTR" macontentEditable="true" mahidediv="true">
<img border="0" class="mobile-5" height="30" width="30" style="border: none; display: block;"  src="YOURIMAGELOCATION/spacer.png" />
</div>

Ersetzen Sie YOURIMAGELOCATION mit der Adresse Ihres Bilds (e.g. http://SUBDOMAIN.emsecure.net/images/),

wenn diese Trennabschnitte für Spalten (MASEPTD) und Zeilen (MASEPTER) hinzugefügt werden. Selligent fügt die Klasse „SEPTD“ und „SEPTR“ zu den zusätzlichen Zellen (TD) in der generierten Mail hinzu. Sie können diese Klassen für den Zellen-Style verwenden. In diesem Beispiel wurden die Klassen bereits in der Original-HTML festgelegt, die Sie importiert haben, um die Reaktionsfähigkeit des Designs zu erhalten.

Die Mail sieht im Editor nun so aus:

Zurück zu Beispiel: Eine Vorlage, Schritt für Schritt

 

Weitere Informationen finden Sie im Thema Artikelcontainer.