Hoe voeg ik een modal (popup) met extra info toe aan een optie?

Wil je het optieblok in de reserveringsdialoog voorzien van extra informatie? Dat kan met een zogenaamde modal. Een modal is een popup venster dat je opent door een klikbaar info icoontje in de kolom Memo van het optieblok. De extra informatie kan zowel uit tekst als uit afbeeldingen bestaan of of een combinatie daarvan.
Volg onderstaande stappen om één of meerdere opties te voorzien van een info modal.

Voeg de kolom Memo toe aan het optieblok

Standaard toont het optieblok de kolommen Optie, Prijs en Opmerkingen.
Een afbeelding kun je toevoegen in de kolom Memo, neem deze kolom als volgt op:

1. Switch naar de configuratie modus
2. Klik op Klant pagina > Reserveringsdialoog
3. Klik op het blok Opties
4. Je ziet een blok met een naam als 'Block-Options-DEFAULT'
5. Klik in dit blok op de knop 'Selecteren' in de rij 'Kolommen'
6. Dubbelklik in de popup 'Selecteer kolommen' op het veld Memo in de linker kolom zodat het wordt verplaatsts naar de rechter kolom (of sleep handmatig het veld van de linker naar de rechter kolom)
7. Klik op Opslaan

Voeg de afbeelding toe aan Mediabeheer

Gebruik bij voorkeur afbeeldingen die niet groter zijn dan de 2x de maximale breedte van de modal (1600px).

1. Switch naar de configuratie modus
2. Klik op Templates > Beheer media
3. Klik op de map Images
4. Upload de optie afbeelding(en)

Url van de afbeelding achterhalen

Voor het instellen van een afbeelding bij een optie, heb je de volledige url nodig. In Beheer media kun je snel de url van een afbeelding achterhalen:

1. Rechtsklik op de afbeelding in de map Images en klik op Bekijken in het popup-menu
2. De afbeelding opent, rechtsklik erop en klik op zoiets als 'Adres afbeelding kopieren' of 'Afbeeldingskoppeling kopiëren
3. Plak de gekopieerde url even tijdelijk in een tekst bestand, je het deze url straks nodig voor het invullen van het src attribuut van de image.

Stel het info icoon én de modal in bij een optie

Onderstaande stappen moet je voor elk product uitvoeren waarbij je de modal functionaliteit wilt toevoegen aan één of meerdere opties.

1. Switch naar de configuratie modus
2. Klik op Objecten > Beheer producten
3. Open de weergave Extra voor het product waarbij je de modal aan een optie wilt toevoegen
4. In het blok Optie Details klik je op het eerste potloodje van de optie waar je de modal aan toe wilt voegen
5. In de popup 'Wijzigen optie' klik je in het veld 'Uitgebreid' op het broncode (< >) icoontje in de werkbalk van de editor
6. In de popup 'Broncode' plak je onderstaande code:

   <!-- 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. Geef deze modal een unieke naam door in de geplakte code op 3 plekken NAAM te wijzigen in een unieke naam die past bij betreffende optie. Stel je geeft in de modal uitleg over een lunch, dan wijzig je 3x NAAM in lunch. Gebruik kleine letters, geen spaties en geen 'vreemde' tekens zoals #, @, é, ü, etcetera.
   Heb je meerdere lunch opties in de aanbieding? Gebruik dan een toevoeging om ze te onderscheiden, bijvoorbeeld luxe_lunch, vega_lunch, lunch_met_soep.
8. In de voorbeeld code gebruiken we een afbeelding die over de gehele breedte van de modal wordt getoond.
   Wil je jouw afbeelding niet over de gehele breedte tonen? Haal dan w-100 uit de img class setting weg.
9. Plaats je de volledige url van de afbeelding op de plek zet waar in de voorbeeld code nu 'URL-NAAR-AFBEELDING' staat.
10. Wijzig de tekst OMSCHRIJVING van het alt attribuut in een korte omschrijving van de afbeelding.
11. Klik op Opslaan om de popup 'Broncode' te sluiten
12. Onder de afbeelding, op de plek van de ..., kun je tekst toe voegen.
    Wil je je niet druk maken over de juiste html code? Selecteer dan de drie puntje en type je tekst in de editor. Je kan daarbij ook de opmaak mogelijkheden van de editor gebruiken.
    Ben je bekend met html? Dan vind je het misschien fijner om direct in de broncode te werken. Open de broncode en codeer erop los, klik op Opslaan om de popup 'Broncode' te sluiten..
13. Klik nogmaals op Opslaan om de popup 'Wijzigen optie' te sluiten.

Checkup

Als laatste controleer je even of het klikbare info icoontje en de modal worden getoond in de reserveerdialoog van betreffend product. Als dat het geval is, kun je de de modal functionaliteit aan de opties toevoegen waarbij dat nodig is. Lees even de tip hieronder wanneer je meerdere opties van hetzelfde product van een modal wilt voorzien!

Zie je geen info icoontje of werkt de modal niet? Ververs dan even de pagina of leeg je browsercache.
Nog steeds geen resultaat? Doorloop dan alle stappen en controleer of je niets vergeten bent en of je geen foutje hebt gemaakt bij het opnemen en aanpassen van de voorbeeld code in het veld 'Uitgebreid' van de optie.