Wie füge ich einer Option ein Modal (Popup) mit zusätzlichen Informationen hinzu?

Möchten Sie den Optionsblock im Reservierungsdialog mit zusätzlichen Informationen versehen? Das ist mit einem sogenannten Modal möglich. Ein Modal ist ein Popup-Fenster, das Sie über ein anklickbares Info-Symbol in der Spalte Memo des Optionsblocks öffnen. Die zusätzlichen Informationen können sowohl aus Text als auch aus Bildern bestehen oder aus einer Kombination davon.
Befolgen Sie die untenstehenden Schritte, um eine oder mehrere Optionen mit einem Info-Modal zu versehen.

Fügen Sie die Spalte Memo zum Optionsblock hinzu

Standardmäßig zeigt der Optionsblock die Spalten Option, Preis und Anmerkungen.
Ein Bild können Sie in der Spalte Memo hinzufügen, nehmen Sie diese Spalte wie folgt auf:

1. Wechseln Sie in den Konfigurationsmodus
2. Klicken Sie auf Kundenseite > Reservierungsdialog
3. Klicken Sie auf den Block Optionen
4. Sie sehen einen Block mit einem Namen wie 'Block-Options-DEFAULT'
5. Klicken Sie in diesem Block auf die Schaltfläche 'Auswählen' in der Zeile 'Spalten'
6. Doppelklicken Sie im Popup 'Spalten auswählen' auf das Feld Memo in der linken Spalte, sodass es in die rechte Spalte verschoben wird (oder ziehen Sie das Feld manuell von der linken in die rechte Spalte)
7. Klicken Sie auf Speichern

Fügen Sie das Bild zur Medienverwaltung hinzu

Verwenden Sie vorzugsweise Bilder, die nicht größer sind als das 2-fache der maximalen Breite des Modals (1600px).

1. Wechseln Sie in den Konfigurationsmodus
2. Klicken Sie auf Vorlagen > Medien verwalten
3. Klicken Sie auf den Ordner Images
4. Laden Sie das/die Optionsbild(er) hoch

Die URL des Bildes ermitteln

Zum Einstellen eines Bildes bei einer Option benötigen Sie die vollständige URL. In Medien verwalten können Sie schnell die URL eines Bildes ermitteln:

1. Rechtsklicken Sie auf das Bild im Ordner Images und klicken Sie auf Ansehen im Popup-Menü
2. Das Bild öffnet sich, rechtsklicken Sie darauf und klicken Sie auf etwas wie 'Bildadresse kopieren' oder 'Bildlink kopieren
3. Fügen Sie die kopierte URL vorübergehend in eine Textdatei ein, Sie benötigen diese URL gleich zum Ausfüllen des src-Attributs des Bildes.

Stellen Sie das Info-Symbol und das Modal bei einer Option ein

Die untenstehenden Schritte müssen Sie für jedes Produkt ausführen, bei dem Sie die Modal-Funktionalität zu einer oder mehreren Optionen hinzufügen möchten.

1. Wechseln Sie in den Konfigurationsmodus
2. Klicken Sie auf Objekte > Produkte verwalten
3. Öffnen Sie die Ansicht Extra für das Produkt, bei dem Sie das Modal zu einer Option hinzufügen möchten
4. Im Block Optionsdetails klicken Sie auf das erste Stiftsymbol der Option, zu der Sie das Modal hinzufügen möchten
5. Im Popup 'Option ändern' klicken Sie im Feld 'Erweitert' auf das Quellcode-Symbol (< >) in der Symbolleiste des Editors
6. Im Popup 'Quellcode' fügen Sie den untenstehenden Code ein:

   <!-- Info Icon (open modal) --> 
   <div class="d-flex justify-content-md-center">
     <div class="d-inline fa-regular fa-circle-info fa-2x" role="button" data-bs-toggle="modal" data-bs-target="#NAAM"> </div>
   </div> 
   <!-- Modal -->
   <div class="modal fade" id="NAAM" tabindex="-1" aria-hidden="true" aria-labelledby="NAAMLabel">
     <div class="modal-dialog modal-lg">
       <div class="modal-content">
         <div class="modal-header ">
           <h1 class="modal-title fs-5" id="drankenLabel">Titel</h1>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">
           <img class="img-fluid w-100" src="URL-NAAR-AFBEELDING" alt="OMSCHRIJVING">
           ...
         </div>
         <div class="modal-footer"> 
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Sluiten</button>
         </div>      
       </div>
     </div>
   </div>
   

7. Geben Sie diesem Modal einen eindeutigen Namen, indem Sie im eingefügten Code an 3 Stellen NAAM in einen eindeutigen Namen ändern, der zur betreffenden Option passt. Angenommen, Sie geben im Modal Erläuterungen zu einem Mittagessen, dann ändern Sie 3x NAAM in lunch. Verwenden Sie Kleinbuchstaben, keine Leerzeichen und keine 'fremden' Zeichen wie #, @, é, ü, usw.
   Haben Sie mehrere Mittagessen-Optionen im Angebot? Verwenden Sie dann einen Zusatz, um sie zu unterscheiden, zum Beispiel luxe_lunch, vega_lunch, lunch_met_soep.
8. Im Beispielcode verwenden wir ein Bild, das über die gesamte Breite des Modals angezeigt wird.
   Möchten Sie Ihr Bild nicht über die gesamte Breite anzeigen? Entfernen Sie dann w-100 aus der img-class-Einstellung.
9. Setzen Sie die vollständige URL des Bildes an die Stelle, an der im Beispielcode jetzt 'URL-NAAR-AFBEELDING' steht.
10. Ändern Sie den Text OMSCHRIJVING des alt-Attributs in eine kurze Beschreibung des Bildes.
11. Klicken Sie auf Speichern, um das Popup 'Quellcode' zu schließen
12. Unter dem Bild, an der Stelle der ..., können Sie Text hinzufügen.
    Möchten Sie sich nicht um den richtigen HTML-Code kümmern? Wählen Sie dann die drei Punkte aus und tippen Sie Ihren Text im Editor. Dabei können Sie auch die Formatierungsmöglichkeiten des Editors verwenden.
    Sind Sie mit HTML vertraut? Dann arbeiten Sie vielleicht lieber direkt im Quellcode. Öffnen Sie den Quellcode und codieren Sie drauflos, klicken Sie auf Speichern, um das Popup 'Quellcode' zu schließen..
13. Klicken Sie erneut auf Speichern, um das Popup 'Option ändern' zu schließen.

Kontrolle

Zum Schluss überprüfen Sie kurz, ob das anklickbare Info-Symbol und das Modal im Reservierungsdialog des betreffenden Produkts angezeigt werden. Ist das der Fall, können Sie die Modal-Funktionalität zu den Optionen hinzufügen, bei denen dies erforderlich ist. Lesen Sie kurz den Tipp unten, wenn Sie mehrere Optionen desselben Produkts mit einem Modal versehen möchten!

Sehen Sie kein Info-Symbol oder funktioniert das Modal nicht? Aktualisieren Sie dann kurz die Seite oder leeren Sie Ihren Browser-Cache.
Immer noch kein Ergebnis? Durchlaufen Sie dann alle Schritte und überprüfen Sie, ob Sie nichts vergessen haben und ob Sie keinen Fehler beim Aufnehmen und Anpassen des Beispielcodes im Feld 'Erweitert' der Option gemacht haben.