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

# Produktansichten

> Zeigt Besuchern wie viele andere Besucher sich das Produkt in den letzten 24h angesehen haben

## Allgemeine Beschreibung

Das **Produktansichten**-Widget spielt auf der Artikeldetailseite ein Widget aus, welches dem Besucher anzeigt, wie viele andere Besucher sich das Produkt innerhalb der letzten 24 Stunden angesehen haben. Das Konzept dahinter ist eine Mischung aus Dringlichkeit und Social Trust.

## Einsatzmöglichkeiten

* **Kaufanreiz schaffen:** Nutze das Widget, um durch Social Proof (soziales Vertrauen) die Kaufentscheidung unentschlossener Kunden zu beschleunigen. Wenn andere Kunden sich den Artikel ansehen, wirkt er begehrter.
* **Verknappung suggerieren:** Besonders bei Artikeln mit geringem Bestand erzeugt die Anzeige hoher Besucherzahlen ein Gefühl der Dringlichkeit (FOMO – Fear of Missing Out), was die Conversion Rate steigern kann.

## Featureübersicht

<AccordionGroup>
  <Accordion title="Dringlichkeit & Trust">
    Zeigt automatisch die Seitenaufrufe der letzten 24 Stunden direkt am Artikel an.
  </Accordion>

  <Accordion title="Smarte Zählung">
    Du kannst gezielt einstellen, ob Mehrfachaufrufe desselben Nutzers ignoriert werden sollen, um realistische Zahlen zu gewährleisten.
  </Accordion>

  <Accordion title="Variations-Unterstützung">
    Die Aufrufe von Haupt- und Kindartikeln (Variationen) lassen sich bequem zusammenrechnen.
  </Accordion>

  <Accordion title="Optische Anpassung">
    Flexibel wählbare Icons und verschiedene Widget-Stile zur nahtlosen Integration in dein Shop-Design.
  </Accordion>

  <Accordion title="Flexible Platzierung">
    Einfache Positionierung im Shop über CSS-Selektoren und verschiedene Einfügemethoden.
  </Accordion>
</AccordionGroup>

## Settings

### Funktionen

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/VEjx3IJjMCHHFcLn/images/produktansichten-funktionen.jpg?fit=max&auto=format&n=VEjx3IJjMCHHFcLn&q=85&s=161f3d40308824999724fb6338ef3ceb" alt="Funktionen" width="2066" height="528" data-path="images/produktansichten-funktionen.jpg" />
  </Frame>
</div>

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

<ParamField path="Als Alternative zum Widget 'Beobachtet gerade' verwenden" type="boolean">
  Aktiviere diesen Schalter, wenn du die Anzeige der "letzten 24h" als Ersatz für eine Live-Beobachter-Funktion nutzen möchtest.
</ParamField>

<ParamField path="Parent- und Childproducts kombinieren" type="boolean">
  Wenn aktiv, werden die Seitenaufrufe eines Hauptartikels (Parent) und all seiner zugehörigen Varianten (Child) addiert und als Gesamtwert angezeigt.
</ParamField>

<ParamField path="Keine Mehrfachaufrufe zählen" type="boolean">
  Wenn aktiviert, wird verhindert, dass ein einzelner Besucher, der die Seite mehrmals neu lädt, die Zählung künstlich in die Höhe treibt.
</ParamField>

<ParamField path="Demomodus" type="boolean">
  Schalte diesen Modus ein, um die Anzeige des Widgets erst einmal sicher im Hintergrund testen zu können.

  <Warning>
    Diese Funktion ist nicht für den produktiven Shop geeignet.
  </Warning>
</ParamField>

<br />

### Vorschau

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

Hier siehst du das Widget in der Vorschau. Dir wird direkt angezeigt, wie das Icon und der Text auf der Seite zusammenwirken.

<br />

### Styles

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

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

<ParamField path="Stil Widget" 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 Widget" 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/VEjx3IJjMCHHFcLn/images/produktansichten-einfuegeoptionen.jpg?fit=max&auto=format&n=VEjx3IJjMCHHFcLn&q=85&s=a648f185d44024fce5661570fd29bda9" alt="Einfügeoptionen" width="2072" height="318" data-path="images/produktansichten-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_latest_views_container">
  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>

## 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'}} />