> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Produkt Coupon

> Präsentiere Besuchern direkt am Produkt einen Couponcode und nutze psychologische Kaufanreize

## Allgemeine Beschreibung

Das **Produkt Coupon**-Widget spielt auf der Artikeldetailseite ein Widget aus, welches dem Besucher direkt einen verfügbaren Couponcode präsentiert. Das Widget nutzt dabei geschickt psychologische Trigger wie Micro-Achievement und Gamification: Der Kunde bekommt sofort das positive Gefühl, etwas gewonnen oder einen exklusiven Vorteil für seinen Einkauf erhalten zu haben.

<Note>
  **Wichtiger Konfigurationshinweis:** Um festzulegen, dass ein bestimmter Coupon im Widget angeboten wird, musst du an den Namen dieses Coupons das Suffix `__show__` anhängen.

  Da immer nur *ein* Coupon gleichzeitig angezeigt werden kann und das System alphabetisch sortiert, kannst du deine Coupons durch eine Nummerierung im Namen priorisieren.

  **Beispiel:** Nenne deinen wichtigsten Gutschein `001 Mein Gutschein__show__`. Das System prüft die alphabetische Reihenfolge und gibt den ersten Coupon aus, der für das aktuelle Produkt gültig ist.
</Note>

## Einsatzmöglichkeiten

* **Conversion-Rate steigern:** Gib zögerlichen Kunden den letzten Anstoß zum Kauf, indem du ihnen direkt am Produkt einen kleinen Rabattcode (z.B. für kostenlosen Versand oder 5% Rabatt) anbietest.
* **Lagerüberhänge abverkaufen:** Biete auf bestimmten, schwer verkäuflichen Artikeldetailseiten gezielt hohe Gutscheine an, um den Abverkauf zu pushen, ohne den Streichpreis des Artikels dauerhaft ändern zu müssen.

## Featureübersicht

<AccordionGroup>
  <Accordion title="Psychologischer Kaufanreiz">
    Erzeugt durch direkte Coupon-Vergabe ein Belohnungsgefühl (Gamification) beim Kunden.
  </Accordion>

  <Accordion title="Smarte Priorisierung">
    Steuere über eine einfache Nummerierung im Coupon-Namen genau, welcher Gutscheincode bei mehreren aktiven Aktionen Vorrang hat.
  </Accordion>

  <Accordion title="Optische Anpassung">
    Passe das Icon, die Icon-Farbe und den grundlegenden Widget-Stil perfekt an dein Shop-Design an.
  </Accordion>

  <Accordion title="Flexible Platzierung">
    Füge das Widget über CSS-Selektoren punktgenau dort auf der Artikeldetailseite ein, wo es am besten konvertiert.
  </Accordion>
</AccordionGroup>

## Settings

### Funktionen

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/rb60schnpQzwPG9f/images/produkt-coupon-funktionen.jpg?fit=max&auto=format&n=rb60schnpQzwPG9f&q=85&s=0b0134a389aeb7829cec1591e10f5c92" alt="Funktionen" width="2164" height="176" data-path="images/produkt-coupon-funktionen.jpg" />
  </Frame>
</div>

<ParamField path="Widget aktiv" type="boolean">
  Mit diesem Schalter kannst du das Produkt Coupon Widget global in deinem Shop ein- oder ausschalten.
</ParamField>

<br />

### Vorschau

Hier siehst du das Widget in der Live-Vorschau. Es zeigt dir an, wie der Text in Kombination mit deinem ausgewählten Icon auf der Seite wirken wird.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/rb60schnpQzwPG9f/images/produkt-coupon-vorschau.jpg?fit=max&auto=format&n=rb60schnpQzwPG9f&q=85&s=0b2488340e0bf5d5efe6a4bdda1e52ea" alt="Vorschau" width="2154" height="200" data-path="images/produkt-coupon-vorschau.jpg" />
  </Frame>
</div>

<ParamField path="Text" type="string">
  Vorschau des angezeigten Textes im Widget (z.B. „Sichere dir heute 10% Rabatt mit TEST10"). Den Text kannst du über Sprachvariablen anpassen.
</ParamField>

<br />

### Styles

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/rb60schnpQzwPG9f/images/produkt-coupon-styles.jpg?fit=max&auto=format&n=rb60schnpQzwPG9f&q=85&s=bab232cba5bc849fa0106c95963fa6ad" alt="Styles" width="2144" height="376" data-path="images/produkt-coupon-styles.jpg" />
  </Frame>
</div>

<ParamField path="Icon Hauptwidget" type="icon">
  Wähle ein passendes Symbol aus, das neben dem Coupontext stehen soll.
</ParamField>

<ParamField path="Widgetstyle" type="select">
  Bestimme hier den visuellen Rahmen deines Widgets. Wähle aus verschiedenen Darstellungsoptionen, wie das Widget angezeigt werden soll.

  **Optionen:**

  * **Clean:** Aufgeräumte, minimalistische Darstellung ohne Rahmen
  * **Card:** Widget wird als Karte mit Hintergrund dargestellt
  * **Bordered:** Widget mit sichtbarem Rahmen
  * **Full:** Widget erstreckt sich über die volle Breite
  * **Alert Info:** Darstellung als informativer Hinweis
  * **Alert Warning:** Darstellung als Warnhinweis
  * **Alert Danger:** Darstellung als Gefahrenhinweis
  * **Alert Success:** Darstellung als Erfolgshinweis
</ParamField>

<ParamField path="Farbe Icon" type="color">
  Wähle hier die Farbe, die für das Icon des Widgets verwendet werden soll.
</ParamField>

<br />

### Einfügeoptionen

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/rb60schnpQzwPG9f/images/produkt-coupon-einfuegeoptionen.jpg?fit=max&auto=format&n=rb60schnpQzwPG9f&q=85&s=76e45ef05f860c83009ceea1f0b083b8" alt="Einfügeoptionen" width="2158" height="280" data-path="images/produkt-coupon-einfuegeoptionen.jpg" />
  </Frame>
</div>

<ParamField path="Einfügemethode" type="select">
  Wähle aus verschiedenen Einfügemethoden, wie das Widget an den CSS-Selektor eingefügt werden soll.

  **Optionen:**

  * **Anhängen:** Hängt das Widget an den restlichen Inhalt an
  * **Voranstellen:** Stellt das Widget dem restlichen Inhalt voran
  * **Vor dem Container:** Fügt das Widget vor dem Container ein
  * **Nach dem Container:** Hängt das Widget an den Container an
  * **Ersetzen:** Ersetzt den restlichen Inhalt des Containers mit dem Widget
</ParamField>

<ParamField path="Selektor" type="string" default="#dzm_coupon_for_product_container">
  Wähle hier einen oder mehrere CSS Selektoren in die das Widget geladen wird. Du kannst mehrere Selektoren mit Komma (,) trennen. Wenn du das Feld komplett leer lässt, wird das Widget nicht injiziert und du kannst es per Portlet einbinden wo du möchtest.
</ParamField>

## Widget als Portlet nutzen

Um das Widget als Portlet zu nutzen, muss das Widget in den Einstellungen aktiviert sein. Dadurch kann das Widget flexibel im OnPage-Composer (OPC) verwendet werden. Du kannst es per Drag & Drop an den gewünschten Mountpoints an beliebigen Stellen in deinem Shop platzieren.

<div style={{height: '1px', backgroundColor: 'silver', margin: '24px 0'}} />