> ## 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">
  Aktiviere oder deaktiviere die automatische Einbindung ins Template. Manuell im OPC platzierte Portlets bleiben davon unberührt, die blendest du über die Sichtbarkeits-Einstellungen des jeweiligen Portlets aus.
</ParamField>

<br />

### Sichtbarkeit

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

Du kannst das Widget gezielt bei Produkten ausblenden, indem du dem Artikel das Funktionsattribut `dzm_hide_coupon_for_product` vom Typ Checkbox anhängst und die Checkbox aktivierst. Das Attribut wird je Artikel gepflegt, auch bei Variationskombinationen, und vererbt sich nicht auf Kindartikel.

<ParamField path="Nur bei Attribut sichtbar schalten" type="boolean">
  Alternativ kannst du die Wirkung umkehren und das Widget nur gezielt bei Artikeln anzeigen lassen, die das Funktionsattribut `dzm_show_coupon_for_product` vom Typ Checkbox mit aktiver Checkbox angehängt haben.
</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

Ein per Drag & Drop im OnPage-Composer (OPC) platziertes Portlet ist durch seine Platzierung aktiv – unabhängig vom Schalter "Widget aktiv" in den Einstellungen. Dieser Schalter steuert ausschließlich die automatische Einblendung über den CSS-Selektor. Du kannst das Widget also flexibel per Drag & Drop an den gewünschten Mountpoints an beliebigen Stellen in deinem Shop platzieren.

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.