> ## 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.

# Beobachtet gerade

> Zeige wie viele Besucher das Produkt gerade ansehen

## Allgemeine Beschreibung

**Beobachtet gerade** spielt auf der Artikeldetailseite ein Widget aus, welches dem Besucher anzeigt, wie viele andere Besucher sich auch noch diese Seite gerade anschauen, um ein Gefühl von Dringlichkeit zu erzeugen.

Es ist ganz simpel, aber super effektiv: Es zeigt deinen Kunden in Echtzeit, wie viele Leute gerade dasselbe Produkt anschauen. Und das ist wie ein kleiner, virtueller Nudge, der sagt: "Hey, du bist nicht allein, das Teil ist beliebt – also schnapp zu, bevor es zu spät ist!".

Wenn in Deinem Shop mal nicht so viel los ist, hast du auch die Möglichkeit ein alternatives Widget zu nutzen, dass nur angezeigt wird, wenn ein einzelner Nutzer auf der Seite ist.

## Featureübersicht

<AccordionGroup>
  <Accordion title="Widget auf allen Produktseiten">
    Das Widget wird automatisch auf all Deinen Produktseiten ausgespielt.
  </Accordion>

  <Accordion title="Alternatives Widget">
    Wenn sich gerade nur 1 Nutzer auf der Artikelseite befindet, hast du die Möglichkeit ein alternatives Widget auszuspielen.
  </Accordion>

  <Accordion title="Auch als Portlet verfügbar">
    Möchtest Du es an mehreren Stellen auf der Produktseite platzieren, kannst Du das Widget ganz einfach per OnPage-Composer an der gewünschten Stelle platzieren.
  </Accordion>

  <Accordion title="Anpassbarer Text">
    Passe den angezeigten Text ganz einfach per Sprachvariable an.
  </Accordion>

  <Accordion title="Anpassbare Styles">
    Passe das Aussehen des Widgets nach Belieben an.
  </Accordion>

  <Accordion title="Verschiedene Einfügeoptionen">
    Entscheide selbst per CSS-Selektor an welcher Stelle das Widget auf der Produktdetailseite ausgespielt werden soll.
  </Accordion>
</AccordionGroup>

## Settings

### Funktionen

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/UsOU8Q_XqKaR1-EW/images/beobachtet-gerade-funktionen-v2.jpg?fit=max&auto=format&n=UsOU8Q_XqKaR1-EW&q=85&s=9a616a66e9bfc0fab62a294b88a7c61a" alt="Funktionen" width="2072" height="264" data-path="images/beobachtet-gerade-funktionen-v2.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>

<ParamField path="Alternatives Widget nutzen" type="boolean">
  Aktiviere hier das alternative Widget, welches dann angezeigt wird, wenn der Besucher alleine auf der Artikelseite ist.
</ParamField>

<ParamField path="Grenzwert" type="number">
  Widget nur anzeigen, wenn die Anzahl der Beobachter den eingestellten Grenzwert übersteigt. Das ist dann nützlich, wenn du das Produktansichten-Widget als Alternative zum Beobachter-Widget eingestellt hast. So kannst du die Dringlichkeit verdeutlichen, wenn sich viele Besucher auf dem Produkt tummeln. Ist mal weniger los, springt das Produktansichten-Widget für dich ein und zeigt gegebenenfalls eine größere Anzahl an Seitenaufrufen.

  <Note>
    Nutzt du die Alternativansicht und es befinden sich keine Besucher auf der Seite, wird diese weiterhin ausgespielt. Wenn du das nicht möchtest und stattdessen das Produktansicht-Widget ausgespielt werden soll, deaktiviere das Alternative Widget.
  </Note>
</ParamField>

<ParamField path="Demomodus" type="boolean">
  Wenn du den Demomodus aktivierst, werden nicht die wirklichen Besucher gezählt sondern bei jedem Aufruf der Seite eine zufällige Zahl zwischen 1 und 12 generiert.

  <Warning>
    Nicht für produktive Shops erlaubt.
  </Warning>
</ParamField>

<br />

### Sichtbarkeit

Du kannst das Widget gezielt bei Produkten ausblenden, indem du dem Artikel das Funktionsattribut `dzm_hide_observers` 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_observers` vom Typ Checkbox mit aktiver Checkbox angehängt haben.
</ParamField>

<br />

### Vorschau

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/f2GlDRMn5NRHezKE/images/beobachtet-gerade-vorschau.jpg?fit=max&auto=format&n=f2GlDRMn5NRHezKE&q=85&s=b96a7b9da367bddd3e279489c18a3280" alt="Vorschau" width="2152" height="318" data-path="images/beobachtet-gerade-vorschau.jpg" />
  </Frame>
</div>

Hier siehst du beide Widgets in der Vorschau. Das erste zeigt die Option, wenn noch andere Besucher den gleichen Artikel betrachten. Das zweite Widget kannst du optional anzeigen lassen, wenn der Besucher alleine auf der Seite ist.

<br />

### Styles

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/f2GlDRMn5NRHezKE/images/beobachtet-gerade-styles.jpg?fit=max&auto=format&n=f2GlDRMn5NRHezKE&q=85&s=1df235ae9ec02972622e5bbd691b3c51" alt="Styles" width="2162" height="642" data-path="images/beobachtet-gerade-styles.jpg" />
  </Frame>
</div>

<ParamField path="Icon Hauptwidget" type="icon">
  Wähle das angezeigte Icon für das Hauptwidget - du kannst aus einer umfangreichen Bibliothek frei wählen.
</ParamField>

<ParamField path="Icon Alternative" type="icon">
  Wähle das angezeigte Icon für das alternative Widget - du kannst aus einer umfangreichen Bibliothek frei wählen.
</ParamField>

<ParamField path="Stil Hauptwidget" type="select">
  Wähle aus verschiedenen Darstellungsoptionen, wie das Hauptwidget angezeigt werden soll.

  <Tip>
    **Für Profis:** Du kannst ein eigenes Custom Template im Pluginordner anlegen und das Widget völlig frei gestalten. Erstelle dazu ein File unter:

    `dzm_opc_salesbooster/Portlets/DZMObservers/DZMObservers_custom.tpl`
  </Tip>
</ParamField>

<ParamField path="Stil Alternative" type="select">
  Wähle aus verschiedenen Darstellungsoptionen, wie das alternative Widget angezeigt werden soll.
</ParamField>

<ParamField path="Farbe Icon Hauptwidget / Alternative" type="color">
  Wähle hier die Farben, die für die Icons der entsprechenden 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/f2GlDRMn5NRHezKE/images/beobachtet-gerade-einfuegeoptionen.jpg?fit=max&auto=format&n=f2GlDRMn5NRHezKE&q=85&s=eccb6a3398f5bfa2270a6aac756d9d74" alt="Einfügeoptionen" width="2162" height="284" data-path="images/beobachtet-gerade-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" default="#dzm_observer_container" type="string">
  Wähle hier einen oder mehrere CSS Selektoren in die das Widget geladen wird. Du kannst mehrere Selektoren mit Komma (,) trennen. Der Standard Selektor fügt das Widget über der Lagerbestandsanzeige ein. 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>

<br />

## 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. Lässt du den CSS-Selektor leer, erscheint das Widget nicht automatisch auf allen Produktseiten, und du kannst es stattdessen flexibel per Drag & Drop an den gewünschten Mountpoints auf den jeweiligen Produktseiten 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.