HTML-Listen & Text-Generator (Wizard)

1. Einleitung

• Erklären, dass der Wizard dazu dient, aus mehreren Datenfeldern komplexe, formatierte Text- oder HTML-Blöcke zu erstellen.
• Neu: Das Konzept der Sektionen vorstellen. Beispiel: Man kann einen Block für „Technische Daten“ als Liste (<ul>) und einen weiteren Block für „Marketingtexte“ als Absätze (<p>) in derselben Zielspalte erstellen.

2. Die Benutzeroberfläche erklärt

Wann nutze ich diese Funktion? Nutzen Sie den Wizard, wenn Sie Werte aus mehreren Spalten (z.B. Länge, Breite, Höhe, Volt, Watt) in einer einzigen Zielspalte (z.B. description) zusammenfassen möchten und dabei volle Kontrolle über das HTML-Design benötigen. Anders als beim einfachen „Spalten zusammenführen“ können Sie hier Text, Einheiten und HTML-Code für jeden einzelnen Wert definieren.

• 1. Zielspalte auswählen: Hier wird die Gambio-Spalte ausgewählt, in die das fertige HTML geschrieben wird (z.B. products_description.de).
• 2. Sektionen / Blöcke: Dies ist die zentrale Verwaltungseinheit.
  • Hier kann der Benutzer neue Sektionen anlegen (z.B. „Technische Daten“).
  • Die Reihenfolge der Sektionen kann mit den Pfeil-Buttons geändert werden. Diese Reihenfolge bestimmt, wie die Blöcke im finalen HTML erscheinen.
• 3. Inhalt der ausgewählten Sektion bearbeiten: Dieser Bereich ist der Kern des Wizards und ändert sich je nachdem, welche Sektion in der Liste (2) ausgewählt ist.
  • Verfügbare Quellspalten: Liste aller Spalten aus der Quelldatei.
  • Zeilen in dieser Sektion: Die Spalten, die für die aktuell ausgewählte Sektion verwendet werden sollen.
  • Muster für ausgewählte Zeile: Das ist das, was im alten Handbuch „Zeilen-Template“ hieß. Es gilt aber nur für die Zeilen innerhalb der ausgewählten Sektion. Beispiel: <li>{HEADER}: {VALUE}</li>.
  • Sektions-Wrapper: Das ist der HTML-Code, der die Zeilen einer Sektion umschließt. Beispiel: <h3>Technische Daten</h3><ul>{RESULT}</ul>.
  • Zeilen-Trennzeichen: Das Zeichen, das die einzelnen Zeilen innerhalb einer Sektion trennt. Meistens ist das \n für einen Zeilenumbruch.
• 4. Globale Einstellungen: Diese Einstellungen verbinden alle Sektionen miteinander.
  • Gesamt-Wrapper: Der HTML-Code, der alle Sektionen umschließt. Oft ist das einfach nur {RESULT}.
  • Sektions-Trenner: Das Zeichen, das die einzelnen Sektionen voneinander trennt. Meistens ist das \n.
• 5. Vorschau: Zeigt eine Live-Vorschau des generierten HTML für die erste Zeile der Quelldatei.

3. Schritt-für-Schritt-Anleitung (Beispiel)

Es wäre hilfreich, ein konkretes Beispiel durchzuspielen:

1. Zielspalte products_description.de auswählen.
2. Neue Sektion erstellen: Auf „Neue Sektion“ klicken und sie „Technische Daten“ nennen.
3. Die Sektion „Technische Daten“ in der Liste auswählen.
4. Im Editor (Bereich 3):
   • Die Quellspalten „Breite“, „Höhe“, „Gewicht“ auswählen und mit „Hinzufügen ->“ in die Sektionsliste übernehmen.
   • Als Sektions-Wrapper eintragen: <h3>Technische Daten</h3><ul>{RESULT}</ul>.
   • Als Zeilen-Trennzeichen eintragen: \n.
   • Eine Zeile (z.B. „Breite“) in der Sektionsliste auswählen und als Muster eintragen: <li>{HEADER}: {VALUE} cm</li>. Dieses Muster wird dann für alle Zeilen dieser Sektion verwendet.
5. Zweite Sektion erstellen: Auf „Neue Sektion“ klicken und sie „Lieferumfang“ nennen.
6. Die Sektion „Lieferumfang“ auswählen.
7. Im Editor:
   • Die Quellspalte „Inhalt“ hinzufügen.
   • Als Sektions-Wrapper eintragen: <h3>Lieferumfang</h3><p>{RESULT}</p>.
   • Als Muster eintragen: {VALUE}.
8. Globale Einstellungen prüfen: Der Sektions-Trenner sollte \n sein, damit die beiden Blöcke untereinander stehen.
9. Auf „Vorschau generieren“ klicken, um das Ergebnis zu sehen.
10. Auf „Regel speichern“ klicken.

Hier gibt es noch paar Extra Tipps zum HTML Generator!