Verwendung des Code-Editors für benutzerdefinierte Produkt-Themen

Verfügbar in Enterprise

EARLY ACCESS: Wenn du diese Funktion nutzen möchtest und den Enterprise-Plan nutzt, kannst du dich gerne an deinen Customer Success Manager wenden, der diese für dich aktivieren kann.

Nicht alle verfügbaren Variablen sind in diesem Artikel als importierte Attribute aufgeführt. Diese Liste wird aktualisiert, sobald die Funktion offiziell veröffentlicht wird.

---

Du kannst deinen digitalen Publikationen dynamische Inhalte hinzufügen, indem die Produkt-Hotspots die Produktdetails direkt auf der Seite darstellen. Klicke hier, um mehr über das Hinzufügen von dynamischen Inhalten zu erfahren.

Mit dem Produkt-Themen-Editor kannst du festlegen, welche Produktdetails dynamisch angezeigt werden, und das Layout der Details an das Erscheinungsbild deiner Marke anpassen. Mit HTML und CSS kannst du Farbe und Größe des Textes ändern, Formen hinzufügen, benutzerdefinierte Schriftarten verwenden und mehr. Du erstellst und speicherst verschiedene Themes, sodass du dynamische Inhalte in verschiedenen Anwendungen verwenden und verspielte Designs unterstützen kannst.

Die Verwendung des Produkt-Themen-Editors erfordert gute HTML- und CSS-Kenntnisse. Wenn du Hilfe brauchst, erstellt unser Services-Team gern neue Themes für dich. In diesem Fall kannst du deinen Customer Success Manager für eine Einführung kontaktieren.

Produkt-Themen können auch ohne Code angepasst werden. Für weitere Informationen klicke hier

In diesem Artikel:

Der Code-Editor:

Zugriff auf den Code-Editor

Du kannst den Code-Editor öffnen, indem du auf das Symbol </> in der unteren rechten Ecke des Hotspot-Editors klickst.

Zugriff auf den Code-Editor:

Produkt-Themen erstellen und aktualisieren

Nachdem du den Editor geöffnet hast, kannst du aus der Dropdown-Liste ein Thema zum Bearbeiten auswählen. Am Ende der Liste findest du die Option, ein neues Thema zu erstellen. Nachdem du dem neuen Thema einen Namen gegeben hast, wird es der Liste hinzugefügt.

Jedes Thema besteht aus einem HTML- und einem CSS-Bereich. Verwende den HTML-Bereich, um festzulegen, welche Elemente im Thema enthalten sein sollen. Verwende den CSS-Bereich, um das Erscheinungsbild der ausgewählten Elemente anzupassen. Die Verwendung von CSS im HTML-Bereich und umgekehrt wird nicht unterstützt.

Neues Produkt-Thema erstellen:

Neben der Dropdown-Liste findest du Optionen zum Umbenennen oder Löschen eines Themas.

Verfügbare Variablen

Der HTML-Bereich bestimmt die Reihenfolge, in der Elemente auf der Seite erscheinen, sowie die Elemente, die im Layout verwendet werden. Zum Laden dynamischer Inhalte kannst du aus den folgenden Variablen wählen:

{{id}}
{{title}}
{{description}}
{{link}}
{{image_link}}
{{availability}}
{{price}}
{{sale_price}}
{{effective_sale_price}}
{{discount_percentage}}
{{product_type}}
{{brand}}
{{gtin}}
{{mpn}}
{{custom_label_0}}
{{custom_label_1}}
{{custom_label_2}}
{{custom_label_3}}
{{custom_label_4}}
{{custom_label_5}}
{{custom_label_6}}
{{custom_label_7}}
{{custom_label_8}}
{{custom_label_9}}

Screen Reader Variables

{{sr_original_price}}
{{sr_sale_price}}

WICHTIG: Ob eine Variable Inhalte enthält, hängt davon ab, ob sie im Produkt-Feed verfügbar ist, der mit der zugehörigen Gruppe verbunden ist. Die Variable {{effective_sale_price}} ist die einzige berechnete Variable, die nicht direkt aus dem Feed stammt. Diese Variable zeigt {{sale_price}} an, wenn ihr Wert kleiner als der Wert von {{price}} und größer als null ist. In anderen Fällen bleibt sie leer. Ebenso zeigt {{discount_percentage}} den Zahlenwert an (ohne "%"), wenn sowohl der Originalpreis als auch der Angebotspreis im Produkt-Feed verfügbar sind.

Verfügbare Prozessorfunktionen

Genau wie das Standard-HTML den Preis nur anzeigt, wenn er verfügbar ist, möchtest du einer Variable vielleicht bestimmte Bedingungen hinzufügen oder ihren Wert für bestimmte Anwendungsfälle optimieren. Dafür kannst du die integrierten Hilfsfunktionen der Handlebars-Template-Engine und die unten aufgeführten Prozessorfunktionen verwenden.

sanitize - Wandelt eine Zeichenkette in Kleinbuchstaben um und ersetzt alle Leerzeichen durch - (sanitize Round Cement Planter => round-cement-planter)
numeral - Ermittelt die Ganzzahl aus einer Fließkommazahl (numeral 5.66 => 5)
fraction - Ermittelt den Nachkommateil aus einer Fließkommazahl (fraction 5.66 => 66)
formatPrice - Formatiert eine Zahl als Preis (formatPrice 5.66 => 5.66) (formatPrice 5 => 5.00)

Wenn du den Wert zum Beispiel als Klassennamen verwenden möchtest, um je nach verschiedene Arten von Styling auszulösen, kannst du sanitize verwenden, um sicherzustellen, dass der Wert korrekt formatiert ist.

Dreifache Schnurrbärte (unverarbeiteter vs. geparster Inhalt)

Standardmäßig werden Variablen, die in doppelte Schnurrbärte eingeschlossen sind, als reiner Text gerendert. Das bedeutet, dass jeglicher im Wert enthaltene HTML-Code maskiert und als Text angezeigt wird.

Beispiel:

Rendert nur den Rohtext (HTML wird nicht geparst).

Wenn du möchtest, dass der Inhalt als HTML dargestellt wird, kannst du dreifache Schnurrbärte verwenden.

Beispiel:
}
Zeigt geparsten HTML-Inhalt an.

Verwende dreifache Schnurrbärte nur, wenn du der Quelle des Inhalts vertraust, da dadurch HTML direkt in die Veröffentlichung eingefügt werden kann.

Verwendung von CSS

Im CSS-Editor kannst du die verschiedenen Klassen auswählen, die im HTML-Editor verwendet werden. Je nach Bedarf kannst du Klassen im HTML-Editor auch umbenennen oder neue hinzufügen.

Zum Beispiel:

In diesem Beispiel beziehen sich die fettgedruckten Teile auf die Klassen im HTML des Standard-Themes, und die folgenden Eigenschaften werden jeweils angewendet: Farbe und Größe des Produkttitels und der Preise werden angepasst, und das Produktbild wird vergrößert und neu positioniert.

Um den Basisstil des dynamischen Hotspots zu ändern und zum Beispiel eine allgemeine Hintergrundfarbe anzuwenden, wähle #publication .dynamic-hotspot:

Verwendung benutzerdefinierter Schriftarten

Es gibt zwei Möglichkeiten, benutzerdefinierte Schriftarten zu verwenden

1. Du kannst die benutzerdefinierte Schriftartenfunktion von Publitas verwenden, um jede beliebige Schriftart zu nutzen

Lies hier mehr über das Hinzufügen benutzerdefinierter Schriftarten in Publitas.

2. Du kannst auch @font-face verwenden, um eine benutzerdefinierte Schriftart anzuwenden. Anstatt auf eine extern gehostete Schriftart zu verweisen, muss die Schriftart direkt in den CSS-Inhalt eingebettet werden, indem sie von WOFF in eine base64-kodierte Zeichenkette umgewandelt wird.

Eingebettete Schriftart, wobei XXXXXXX durch die base64-kodierte Zeichenkette ersetzt wird:

Tipps und Tricks

Verwende ein separates Thema, um Änderungen zu testen. Um zu vermeiden, dass Änderungen in Live-Publikationen veröffentlicht werden, kannst du neue Themes oder Änderungen an bestehenden Themen in einem temporären Thema testen.
Berücksichtige quadratische Produktbilder. Es ist üblich, dass Produktbilder quadratisch sind. Je nach Abmessungen und Ausrichtung des Produkts können Bilder Leerräume enthalten, die sich auf das Layout auswirken. Wir empfehlen, dies zu berücksichtigen und das Thema mit verschiedenen Produkten auszuprobieren.
HTML zurücksetzen. Wenn du das HTML aus dem Produkt-Themen-Editor löschst, wird wieder das Standard-HTML angewendet. Aktualisiere einfach den HTML-Tab, nachdem du auf Save & Apply geklickt hast.
Einen größeren Arbeitsbereich schaffen. Verwende unten die Pfeiltaste ↤, um den Editor zu vergrößern und einen besseren Überblick über deine Codestruktur zu erhalten.
Bilder so einstellen, dass sie immer in den Hotspot passen. Das Standard-Thema kann Bilder vergrößern, wenn der Hotspot schmaler wird. Das ist ideal, um übermäßigen Leerraum zu vermeiden und die Produkte größer erscheinen zu lassen. Falls dies nicht zu deinem Design passt, kannst du sicherstellen, dass Bilder immer in den Hotspot-Bereich passen, indem du den folgenden Code im CSS-Teil des Theme-Editors hinzufügst:
img {
max-width: 100%;
object-fit: contain;
}