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

# Mountpoints

## Übersicht

In diesem Tab kannst du zusätzliche Mountpoints (Ankerpunkte) für den OnPage Composer aktivieren. So kannst du Portlets an vielen zusätzlichen Stellen in deinem Onlineshop platzieren und erhältst dadurch mehr Gestaltungsfreiheit in deinem Shop.

<Info>
  **Was sind Mountpoints?**

  Mountpoints sind vordefinierte Positionen im Shop-Template, an denen du über den OnPage Composer (OPC) Inhalte platzieren kannst. Standardmäßig bietet JTL-Shop bereits viele Mountpoints - mit diesem Tool erhältst du Zugriff auf zusätzliche, erweiterte Positionen.
</Info>

<br />

## Features

<CardGroup cols={2}>
  <Card title="Erweiterte Platzierung" icon="location-dot" color="#0285c7">
    Platziere OPC-Portlets an zusätzlichen Stellen, die standardmäßig nicht verfügbar sind.
  </Card>

  <Card title="Mehr Flexibilität" icon="maximize" color="#16a34a">
    Erhalte volle Kontrolle über die Positionierung deiner Inhalte im gesamten Shop-Layout.
  </Card>

  <Card title="Einfache Aktivierung" icon="toggle-on" color="#ea580c">
    Aktiviere nur die Mountpoints, die du tatsächlich benötigst - kein unnötiger Overhead.
  </Card>

  <Card title="Template-kompatibel" icon="puzzle-piece" color="#7c3aed">
    Funktioniert mit allen Standard-Templates und den meisten Custom-Templates.
  </Card>
</CardGroup>

<br />

## Mountpoint-Verwaltung

### Mountpoints aktivieren

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/UlnRVWrG5FuToQ3g/images/mountpoints-einstellungen.jpg?fit=max&auto=format&n=UlnRVWrG5FuToQ3g&q=85&s=333fed4b3d558881bb09e1b6eb6784b8" alt="Mountpoints Einstellungen" width="2070" height="1158" data-path="images/mountpoints-einstellungen.jpg" />
  </Frame>
</div>

<Steps>
  <Step title="Gewünschte Mountpoints auswählen">
    Aktiviere den Toggle neben den Mountpoints, die du verwenden möchtest.

    <Tip>
      Du kannst mehrere Mountpoints gleichzeitig aktivieren. Aktiviere nur die, die du wirklich benötigst.
    </Tip>
  </Step>

  <Step title="Einstellungen speichern">
    Klicke auf "Speichern", um die Änderungen zu übernehmen.

    <Info>
      Die Mountpoints sind sofort im OnPage Composer verfügbar - kein Cache-Leeren erforderlich.
    </Info>
  </Step>

  <Step title="Im OPC verwenden">
    Öffne den OnPage Composer und wähle die neue Position aus der Mountpoint-Liste aus.
  </Step>
</Steps>

<br />

## Verfügbare Mountpoints

<ParamField path="Vor der Topbar" type="boolean">
  Fügt einen Mountpoint direkt vor der Topbar ein. Geeignet für Announcement-Bars oder Info-Leisten.
</ParamField>

<br />

<ParamField path="Nach der Topbar" type="boolean">
  Fügt einen Mountpoint direkt nach der Topbar ein.
</ParamField>

<br />

<ParamField path="Über der Sidebar" type="boolean">
  Fügt einen Mountpoint oberhalb der Sidebar ein. Ideal für Filter-Erweiterungen oder Featured-Content.
</ParamField>

<br />

<ParamField path="Unter der Sidebar" type="boolean">
  Fügt einen Mountpoint unterhalb der Sidebar ein. Geeignet für zusätzliche Widgets oder Infos.
</ParamField>

<br />

<ParamField path="Vor dem Hauptcontainer" type="boolean">
  Fügt einen Mountpoint vor dem Haupt-Content-Bereich ein. Nützlich für seitenweite Hinweise oder Banner.
</ParamField>

<br />

<ParamField path="Vor dem Footer" type="boolean">
  Fügt einen Mountpoint direkt vor dem Footer ein. Beliebt für Newsletter-Boxen oder Instagram-Feeds.
</ParamField>

<br />

<ParamField path="Vor der Fußnote im Footer" type="boolean">
  Fügt einen Mountpoint vor der Footer-Fußnote ein.
</ParamField>

<br />

<ParamField path="Nach der Fußnote im Footer" type="boolean">
  Fügt einen Mountpoint nach der Footer-Fußnote ein.
</ParamField>

<br />

<ParamField path="Nach dem Footer" type="boolean">
  Fügt einen Mountpoint direkt nach dem Footer ein. Geeignet für Bottom-Banner oder Copyright-Erweiterungen.
</ParamField>

<br />

<ParamField path="Vor der Preisanzeige (Artikeldetail)" type="boolean">
  Fügt einen Mountpoint vor der Preisanzeige auf der Artikeldetailseite ein. Ideal für Trust-Elemente oder Garantie-Hinweise.
</ParamField>

<br />

<ParamField path="Nach der Preisanzeige (Artikeldetail)" type="boolean">
  Fügt einen Mountpoint nach der Preisanzeige auf der Artikeldetailseite ein. Geeignet für Zusatzinfos oder Cross-Selling.
</ParamField>

<br />

<ParamField path="Nach der Seitenpagination" type="boolean">
  Fügt einen Mountpoint nach der Seitenpagination ein. Nützlich für zusätzliche Inhalte am Ende von Listenansichten.
</ParamField>

<br />

## Template-Kompatibilität

<AccordionGroup>
  <Accordion title="NOVA Template">
    **Voll kompatibel ✓**

    Alle Mountpoints funktionieren out-of-the-box mit dem NOVA Template.

    * Keine zusätzliche Konfiguration nötig
    * Responsive Design automatisch übernommen
    * Alle Positionen visuell optimal integriert
  </Accordion>

  <Accordion title="EVO Template">
    **Voll kompatibel ✓**

    Das EVO Template unterstützt alle erweiterten Mountpoints.

    * Automatische Integration in das Grid-System
    * Mobile-First Ansatz wird beibehalten
    * Styling passt sich automatisch an
  </Accordion>

  <Accordion title="Custom Templates">
    **Eingeschränkt kompatibel ⚠**

    Bei Custom Templates hängt die Kompatibilität vom Template-Aufbau ab.

    **Was funktioniert:**

    * Alle Standard-Hook-Positionen
    * Container-basierte Mountpoints

    **Was möglicherweise angepasst werden muss:**

    * CSS-Styling für optimale Darstellung
    * Responsive Breakpoints
    * Z-Index bei Overlays

    <Tip>
      Teste neue Mountpoints zunächst im Staging-System, bevor du sie live schaltest.
    </Tip>
  </Accordion>

  <Accordion title="Child Templates">
    **Voll kompatibel ✓**

    Child Templates erben die Mountpoint-Unterstützung vom Parent Template.

    * Kann in Child Template überschrieben werden
    * Styling kann angepasst werden
    * Funktionalität bleibt erhalten
  </Accordion>
</AccordionGroup>

<br />

## Best Practices

<AccordionGroup>
  <Accordion title="Weniger ist mehr">
    **Grundregel:** Aktiviere nur Mountpoints, die du wirklich nutzt

    **Warum:**

    * Jeder aktive Mountpoint bedeutet zusätzliche DOM-Nodes
    * Kann minimale Performance-Auswirkungen haben
    * Übersichtlichkeit im OPC bleibt erhalten

    **Empfehlung:**
    Starte mit 2-3 Mountpoints und erweitere nach Bedarf
  </Accordion>

  <Accordion title="Mobile First">
    **Bei der Platzierung bedenken:**

    * Wie sieht der Mountpoint auf mobilen Geräten aus?
    * Ist der Inhalt auch mobil sinnvoll?
    * Beeinträchtigt es die User Experience?

    **Testing:**

    * Teste auf echten Mobilgeräten
    * Prüfe verschiedene Bildschirmgrößen
    * Achte auf Touch-Bedienbarkeit

    <Tip>
      Nutze im OPC die mobile Vorschau, um Inhalte zu optimieren.
    </Tip>
  </Accordion>

  <Accordion title="Performance beachten">
    **Kritische Bereiche:**

    * Header-Mountpoints: Können above-the-fold Performance beeinflussen
    * Sidebar-Mountpoints: Bei vielen Elementen CPU-intensive
    * Checkout-Mountpoints: Sollten leichtgewichtig sein

    **Optimierung:**

    * Bilder lazy loaden
    * Scripts asynchron laden
    * CSS inline für critical content
    * Minimale DOM-Struktur verwenden
  </Accordion>

  <Accordion title="Konsistenz wahren">
    **Design-Prinzipien:**

    * Halte das Design konsistent
    * Verwende Shop-Farben und -Fonts
    * Achte auf einheitliche Abstände
    * Befolge das Grid-System des Templates

    **Content-Strategie:**

    * Klare Hierarchie beachten
    * Nicht zu viele Call-to-Actions
    * Fokus auf User Journey
  </Accordion>
</AccordionGroup>

<br />

## Anwendungsbeispiele

<Tabs>
  <Tab title="Trust-Elemente">
    **Ziel:** Vertrauen beim Checkout steigern

    **Mountpoint:** Checkout Top

    **Inhalt:**

    * Zahlungsarten-Icons
    * SSL-Verschlüsselung Badge
    * "Käuferschutz" Siegel
    * "30 Tage Rückgabe" Hinweis

    <Steps>
      <Step title="Mountpoint aktivieren">
        Aktiviere "Checkout Top" im Resources & Health Dashboard
      </Step>

      <Step title="Portlet erstellen">
        Erstelle ein HTML-Portlet im OPC mit Trust-Elementen
      </Step>

      <Step title="Platzieren">
        Wähle "Checkout Top" als Position im OPC
      </Step>

      <Step title="Styling">
        Passe CSS an für optimale Darstellung
      </Step>
    </Steps>
  </Tab>

  <Tab title="Kategorie-Banner">
    **Ziel:** Kategorieseiten visuell aufwerten

    **Mountpoint:** Before Content

    **Inhalt:**

    * Hero-Image für Kategorie
    * Kategoriebeschreibung
    * Featured Products
    * Filter-Shortcuts

    **Vorteile:**

    * Bessere SEO durch mehr Content
    * Visuell ansprechender
    * Höhere Conversion
  </Tab>

  <Tab title="USP-Banner">
    **Ziel:** Alleinstellungsmerkmale kommunizieren

    **Mountpoint:** Top Header

    **Inhalt:**

    * "Versandkostenfrei ab 50€"
    * "24h Express-Versand"
    * "100 Tage Rückgabe"
    * "Kauf auf Rechnung"

    **Design:**

    * Schmal und kompakt
    * Auffällige Farben
    * Icons für visuelle Unterstützung
    * Optional: Slider für mehrere USPs
  </Tab>

  <Tab title="Cross-Selling">
    **Ziel:** Zusatzverkäufe generieren

    **Mountpoint:** After Product Details

    **Inhalt:**

    * "Kunden kauften auch"
    * Produkt-Bundles
    * Zubehör-Empfehlungen
    * "Ähnliche Produkte"

    **Strategie:**

    * Relevante Produkte zeigen
    * Attraktive Bundle-Preise
    * Social Proof ("X Kunden kauften")
  </Tab>
</Tabs>

<br />

## Troubleshooting

<AccordionGroup>
  <Accordion title="Mountpoint erscheint nicht im OPC">
    **Mögliche Ursachen:**

    1. Mountpoint nicht aktiviert
    2. Cache nicht geleert
    3. Template nicht kompatibel
    4. OPC-Editor nicht neu geladen

    **Lösung:**

    <Steps>
      <Step title="Aktivierung prüfen">
        Kontrolliere ob der Haken gesetzt und gespeichert wurde
      </Step>

      <Step title="Cache leeren">
        Leere Shop-Cache und OPC-Cache
      </Step>

      <Step title="OPC neu laden">
        Schließe den OPC-Editor komplett und öffne ihn neu
      </Step>

      <Step title="Template testen">
        Teste mit Standard-Template ob es funktioniert
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Inhalt wird nicht angezeigt">
    **Diagnose:**

    * Ist das Portlet korrekt zugewiesen?
    * Sind Sichtbarkeits-Regeln gesetzt?
    * Gibt es CSS-Konflikte?
    * Ist der Inhalt vorhanden?

    **Debugging:**

    ```css theme={null}
    /* Temporär zum Testen hinzufügen */
    [data-mountpoint="your-mountpoint"] {
      background: red !important;
      min-height: 50px !important;
      display: block !important;
    }
    ```

    <Tip>
      Nutze die Browser-Entwicklertools um zu prüfen ob der Container gerendert wird.
    </Tip>
  </Accordion>

  <Accordion title="Layout-Probleme">
    **Symptome:**

    * Überlappende Elemente
    * Falsche Breiten
    * Responsive Probleme
    * Z-Index Konflikte

    **Fixes:**

    ```css theme={null}
    /* Container korrekt einbinden */
    .your-mountpoint-content {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* Responsive anpassen */
    @media (max-width: 768px) {
      .your-mountpoint-content {
        padding: 10px;
      }
    }
    ```
  </Accordion>
</AccordionGroup>

<br />

## Erweiterte Konfiguration

Für fortgeschrittene Nutzer können Mountpoints auch programmatisch erweitert werden:

<Accordion title="Custom Mountpoints hinzufügen (Entwickler)">
  **Template-Datei bearbeiten:**

  ```php theme={null}
  // In deiner Template-Datei (z.B. index.tpl)
  {if $dzm_mountpoint_custom_position}
      <div class="mountpoint-custom-position">
          {$dzm_mountpoint_custom_position}
      </div>
  {/if}
  ```

  **Im Plugin registrieren:**

  ```php theme={null}
  // In deinem Plugin oder Child-Template
  Shop::Smarty()->assign('dzm_mountpoint_custom_position', 
      $opc->renderMountpoint('custom_position'));
  ```

  <Warning>
    Dies erfordert PHP- und Smarty-Kenntnisse. Für Standard-Anwendungsfälle nutze die vordefinierten Mountpoints.
  </Warning>
</Accordion>

<Check>
  **Erfolg:** Du hast jetzt volle Kontrolle über die Platzierung deiner Inhalte im Shop. Nutze die zusätzlichen Mountpoints, um dein Shop-Design auf das nächste Level zu heben!
</Check>

<br />

## Weiterführende Ressourcen

<CardGroup cols={2}>
  <Card title="OnPage Composer Docs" icon="book" href="https://guide.jtl-software.de/jtl-shop/onpage-composer/">
    Offizielle JTL-Dokumentation zum OnPage Composer
  </Card>

  <Card title="Template Guide" icon="palette" href="https://guide.jtl-software.de/jtl-shop/templates/">
    Template-Entwicklung und -Anpassung
  </Card>

  <Card title="Portlet-Erstellung" icon="puzzle-piece" href="https://guide.jtl-software.de/jtl-shop/onpage-composer/portlets/">
    Eigene Portlets erstellen und anpassen
  </Card>

  <Card title="Responsive Design" icon="mobile" href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">
    Best Practices für responsives Design
  </Card>
</CardGroup>