Zum Hauptinhalt springen

Ressourcen-Editor

Im Ressourcen-Editor finden Sie alle Bilder, Dateien und Vorlagen, die das Erscheinungsbild und den Inhalt Ihrer Checkout-Seiten bestimmen. Mit diesem praktischen Tool können Sie Standardtexte für jede Sprache individuell überschreiben, Bilder hinzufügen oder ersetzen und vordefinierte Variablen verwenden, um personalisierte Meldungen zu erstellen. Behalten Sie Ihren einzigartigen Stil bei – auch bei der Zahlungsabwicklung.

Ressourcenstruktur​

Alle Ressourcen, die das Erscheinungsbild Ihrer Dokumente betreffen, finden Sie im Ordner Dokument im Ressourcen-Editor:

  • css – Enthält alle CSS-Dateien, die zur Gestaltung Ihrer Vorlagen verwendet werden. Wir nutzen die Vorlagensprache .twig für die Dokumentgestaltung.
  • fonts – Speichern Sie hier benutzerdefinierte Schriftarten, die Sie auf Ihre Dokumente anwenden möchten (achten Sie darauf, in Ihrer CSS-Datei auf diese zu verweisen).
  • images – Enthält alle Dokumentbilder, einschliesslich der Hintergrund-PDF-Datei. Die Hintergrund-PDF-Datei enthält den statischen Hintergrund für Ihr Dokument, auf den andere Elemente gedruckt werden. Der verwendete Hintergrund wird ebenfalls in der CSS-Datei definiert.
  • template – Enthält die .twig-Vorlagen für Ihre Dokumente.

So laden Sie Dokumente hoch​

Bei der Konfiguration von Einstellungen wie E-Mail-Einstellungen, Anhängen, Dokumentvorlagen usw. können Sie verschiedene Dateien auswählen. Diese Dateien müssen in den Ressourcen-Editor hochgeladen werden. Sie können sie hochladen, indem Sie zu Space > Einstellungen > Anpassung > Ressourcen-Editor navigieren. Von dort aus können Sie Ihre Dateien per Drag & Drop in einen ausgewählten Ordner hochladen. Wenn Sie sich nicht sicher sind, in welchen Ordner Sie die Dateien hochladen sollen oder welcher Dateityp erforderlich ist, wird dies während des Konfigurationsvorgangs der oben genannten Einstellungen angezeigt.

info

Einzelne Bilder für die Konfiguration verschiedener Zahlungsmethoden müssen ebenfalls hier hochgeladen werden.

gefahr

Durch das Hochladen von Dateien bestätigen Sie, dass Sie über die erforderlichen Rechte am geistigen Eigentum verfügen, um diese mit uns zu teilen. Wir stellen sicher, dass diese Ressourcen nur für Nutzer zugänglich sind, die Zugriff auf Ihren Space haben.

Tipps zur Gestaltung von Vorlagen​

Benutzerdefinierte Schriftarten in Dokumenten verwenden​

Sie können benutzerdefinierte Schriftarten in Ihren Vorlagen verwenden, indem Sie die .ttf-Dateien in den Ordner „fonts“ hochladen und in Ihrem CSS darauf verweisen.

@font-face {
    font-family: "OpenSans";
    font-weight: normal;
    src: url('resource:/document/fonts/OpenSans-Regular.ttf');
    -fs-pdf-font-embed: embed;
    -fs-pdf-font-encoding: Identity-H;
}

Vorlage für den Dokumenthintergrund ändern​

Beim Erstellen eines Dokuments wird der dynamische Inhalt über den Hintergrund gedruckt, der in der Datei /documents/css/base.css in Ihrem Space festgelegt ist. Diese Vorlage gilt für alle Dokumente.

@page {
	background-image: url('resource:/document/images/document-background.pdf');
	padding: 0;

	/* Border of the Document */
	margin:  30mm 10mm 20mm 10mm;
	size: A4;
}

Um das Dokument anzupassen, können Sie entweder den Pfad hier ändern oder /document/images/document-background.pdf durch Ihre eigene Vorlage ersetzen. Sie können auch unterschiedliche Vorlagen für die erste Seite und die folgenden Seiten verwenden, indem Sie den Selektor @page:first in Ihre base.css-Datei einfügen. Dadurch wird für die folgenden Seiten die Datei „document-background.pdf“ und für die erste Seite die Datei „first-document-background.pdf“ verwendet.

@page {
	background-image: url('resource:/document/images/document-background.pdf');
	padding: 0;

	/* Border of the Document */
	margin:  30mm 10mm 20mm 10mm;
	size: A4;
}

@page:first {
	background-image: url('resource:/document/images/first-document-background.pdf');
}

Variablen in den Vorlagen verwenden​

Sie können Variablen in Ihren Vorlagendateien verwenden. Alle im jeweiligen Kontext verfügbaren Variablen sind zusammen mit ihren Beschreibungen auf der unteren Registerkarte des Ressourcen-Editors aufgelistet. Verwenden Sie die Syntax twig, um diese Variablen auszugeben.

Abbildung 1: Der Editor zeigt die im aktuellen Kontext verfügbaren Variablen an.

So bearbeiten Sie Twigs​

  1. Wählen Sie eine Twig-Datei Ihrer Wahl aus der links angezeigten Ordnerstruktur aus.
  2. Klicken Sie auf das Stiftsymbol oben am Textrahmen, um die Twig-Datei zu bearbeiten.
  3. Nehmen Sie Ihre Änderungen vor und klicken Sie auf die Schaltfläche „Speichern“ an derselben Stelle, an der sich zuvor das Stiftsymbol befand.
  4. Veröffentlichen Sie Ihre Änderungen über die Schaltfläche „Veröffentlichen“ oben rechts, wenn Sie sie Ihren Kunden zur Verfügung stellen möchten.

Vorschau​

Stellen Sie sicher, dass Sie auswählen, was angezeigt werden soll, und wählen Sie die Sprache aus, in der die Anzeige erfolgen soll. Bitte beachten Sie, dass die in Ihren Ressourceneinstellungen und im Editor vorgenommenen Änderungen erst angezeigt werden, sobald sie gespeichert wurden. Die Vorschau zeigt den letzten Fall Ihrer Auswahl an – bei einer Rechnung wird beispielsweise die zuletzt versendete Rechnung angezeigt, auf die die soeben im Ressourcen-Editor gespeicherten Änderungen angewendet werden. Die Änderungen gelten zudem erst für den Kunden oder Ihre Testtransaktionen, sobald Sie oben rechts auf „Veröffentlichen“ klicken.