> ## 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/f2GlDRMn5NRHezKE/images/beobachtet-gerade-funktionen.jpg?fit=max&auto=format&n=f2GlDRMn5NRHezKE&q=85&s=49dd5264a96fffb6fdb21247fe082961" alt="Funktionen" width="2158" height="420" data-path="images/beobachtet-gerade-funktionen.jpg" />
  </Frame>
</div>

<ParamField path="Widget aktiv" type="boolean">
  Entscheide, ob das Widget aktiv und automatisch an der per CSS-Selektor gewählten Stelle platziert werden soll.
</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">
  Lege hier den Grenzwert fest, welche Anzahl von Besuchern überschritten werden muss, damit das Widget angezeigt wird.

  <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, deaktivere das Alternative Widget.
  </Note>
</ParamField>

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

  <Warning>
    Diese Funktion dient nur zur Veranschaulichung des Plugins und ist nicht für den produktiven Einsatz im Shop bestimmt.
  </Warning>
</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

Um das Widget als Portlet zu nutzen, muss das Widget in den Einstellungen aktiviert sein. Um zu vermeiden, dass es auf allen Produktseiten erscheint, muss der CSS-Selektor leer gelassen werden. Dadurch kann das Widget flexibel im OnPage-Composer (OPC) verwendet werden. Du kannst es per Drag & Drop an den gewünschten Mountpoints auf den jeweiligen Produktseiten platzieren.

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