PDF-Gutscheine

Das Plugin kann Gutscheine als PDF generieren — zum Download in der Administration oder als E-Mail-Anhang beim Kauf.

PDF herunterladen

Navigieren Sie zu Marketing > JTL Gutscheine
Öffnen Sie den gewünschten Gutschein
Klicken Sie auf PDF herunterladen

Hintergrundbild anpassen

Sie können ein eigenes Hintergrundbild für die PDF-Gutscheine hinterlegen:

Öffnen Sie Erweiterungen > Meine Erweiterungen > JTL Gutscheine > Konfiguration
Laden Sie im Feld PDF-Hintergrundbild ein Bild oder PDF hoch
Speichern Sie die Konfiguration

Empfohlene Formate

Format	Empfehlung
Bildformat	PNG oder JPG
Größe	DIN A4 Hochformat (210 × 297 mm)
Auflösung	Mindestens 150 DPI
Alternative	PDF-Datei als Hintergrund (wird als transparente Ebene darunter gelegt)

Gestaltungstipp

Gestalten Sie den Hintergrund so, dass im Bereich, auf den .voucher-wrapper zeigt (Standard: vertikale Mitte, horizontal zentriert), ausreichend Platz für Code und Betrag bleibt. Position und Größe des Inhaltsbereichs können Sie per CSS anpassen (siehe unten).

CSS-Layout anpassen

Im Konfigurationsfeld Gutschein-PDF: Eigenes CSS können Sie das gesamte Layout des Inhaltsbereichs überschreiben — z. B. um Schriftgrößen, Farben oder die Position des Codes an Ihr eigenes Hintergrundbild anzupassen.

Das Feld ersetzt das komplette Standard-CSS für den Inhaltsbereich. Das Hintergrundbild selbst wird immer unabhängig davon gesetzt.

HTML-Struktur

Das generierte PDF hat folgende Struktur:

html

<body>
  <div class="voucher-wrapper">          <!-- äußerer Positionierungsrahmen -->

    <div class="shop-name">…</div>       <!-- Shopname (optional) -->

    <!-- je Code einmal: -->
    <div class="voucher-label">…</div>   <!-- Beschriftung „Gutscheincode" -->
    <div class="voucher-code">…</div>    <!-- der Gutscheincode selbst -->
    <div class="voucher-amount">…</div>  <!-- Betrag + Währung (optional) -->

    <!-- Trennlinie bei mehreren Codes: -->
    <hr class="voucher-separator">

  </div>
</body>

Verfügbare CSS-Klassen

Klasse	Beschreibung
`.voucher-wrapper`	Positionierungscontainer für den gesamten Inhaltsbereich
`.shop-name`	Shopname über dem Code
`.voucher-label`	Beschriftungszeile (z. B. „GUTSCHEINCODE")
`.voucher-code`	Der eigentliche Code — z. B. `ABC-1234-XY`
`.voucher-amount`	Betrag und Währung, z. B. `50,00 €`
`.voucher-separator`	Trennlinie bei mehreren Codes auf einer Seite

Standard-CSS

Das ist das Standard-CSS, das verwendet wird, wenn das Feld leer bleibt. Kopieren Sie es als Ausgangspunkt in das Konfigurationsfeld und passen Sie es an:

css

.voucher-wrapper {
    position: absolute;
    top: 50%;
    left: 50mm;
    width: 110mm;
    text-align: center;
}
.shop-name {
    font-size: 14pt;
    color: #666;
    margin-bottom: 20px;
}
.voucher-label {
    font-size: 12pt;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.voucher-code {
    font-size: 24pt;
    font-weight: bold;
    color: #333;
    letter-spacing: 3px;
    margin-bottom: 15px;
    padding: 15px 30px;
    border: 2px dashed #ccc;
    display: inline-block;
}
.voucher-amount {
    font-size: 18pt;
    color: #333;
    margin-top: 10px;
}
.voucher-separator {
    margin: 30px 0;
    border: none;
    border-top: 1px solid #ddd;
}

Beispiel: Inhaltsbereich neu positionieren

Wenn Ihr Hintergrundbild den Code z. B. im unteren Drittel erwartet:

css

.voucher-wrapper {
    position: absolute;
    top: 65%;
    left: 30mm;
    width: 150mm;
    text-align: center;
}
.shop-name { display: none; }
.voucher-label {
    font-size: 10pt;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.voucher-code {
    font-size: 20pt;
    font-weight: bold;
    color: #000;
    letter-spacing: 4px;
    border: none;
    display: block;
}
.voucher-amount {
    font-size: 14pt;
    color: #444;
    margin-top: 8px;
}
.voucher-separator {
    margin: 20px 0;
    border-top: 1px solid #aaa;
}

Koordinatensystem

Das PDF ist DIN A4 (210 × 297 mm). position: absolute auf .voucher-wrapper positioniert relativ zum <body>. top: 50% bedeutet 148,5 mm vom oberen Rand. left: 50mm bedeutet 50 mm vom linken Rand.

CSS-Einschränkungen (Dompdf)

Das PDF wird mit Dompdf gerendert. Nicht alle modernen CSS-Eigenschaften werden unterstützt:

transform, flexbox, grid → nicht unterstützt
position: absolute → wird unterstützt
mm-Einheiten → werden unterstützt
Web-Fonts → nicht unterstützt; verwenden Sie DejaVu Sans (vorinstalliert) oder serif/sans-serif

Automatischer E-Mail-Versand

Wenn ein Kunde ein Gutschein-Produkt kauft, wird der Gutscheincode automatisch per E-Mail versendet — inklusive PDF-Anhang.

Voraussetzung: Die E-Mail-Vorlage muss in der Plugin-Konfiguration hinterlegt sein.

Ablauf

Kunde bestellt ein Gutschein-Produkt
Zahlung wird bestätigt (Transaktionsstatus: bezahlt)
Gutscheincode wird bei JTL Vouchers erstellt
E-Mail mit Code und PDF wird asynchron versendet

Gutscheincode erst nach Zahlungseingang

Der Gutscheincode wird erst erstellt und versendet, wenn die Zahlung als bezahlt markiert wird — nicht bereits bei Bestellabschluss. So wird verhindert, dass Gutscheincodes bei nicht bezahlten Bestellungen (z.B. Vorkasse, abgebrochene Zahlungen) ausgegeben werden.

Asynchroner Versand

Die E-Mail wird über die Shopware-Message-Queue versendet. Stellen Sie sicher, dass der Message-Queue-Worker aktiv ist.

PDF-Gutscheine ​

PDF herunterladen ​

Hintergrundbild anpassen ​

Empfohlene Formate ​

CSS-Layout anpassen ​

HTML-Struktur ​

Verfügbare CSS-Klassen ​

Standard-CSS ​

Beispiel: Inhaltsbereich neu positionieren ​

Automatischer E-Mail-Versand ​

Ablauf ​