How do I add a modal (popup) with extra information to an option?

Would you like to add extra information to the option block in the reservation dialog? You can do this using a so-called modal. A modal is a popup window that opens when you click a clickable info icon in the Memo column of the option block. The additional information can consist of text, images, or a combination of both.
Follow the steps below to add an info modal to one or more options.

Add the Memo column to the option block

By default, the option block shows the columns Option, Price and Remarks.
You can add an image in the Memo column; include this column as follows:

1. Switch to configuration mode
2. Click Front pages > Booking dialog
3. Click the Options block
4. You will see a block with a name such as 'Block-Options-DEFAULT'
5. In this block, click the 'Select' button in the 'Columns' row
6. In the 'Select columns' popup, double-click the Memo field in the left column so that it is moved to the right column (or manually drag the field from the left to the right column)
7. Click Save

Add images in Media Management

Preferably use the same format for option images, ideally square. This creates a neat, clean, and calm appearance. Keep in mind that option images are displayed small, so preferably do not upload option images that are wider or taller than 520 pixels.

1. Switch to configuration mode
2. Click Templates > Manage media
3. Click the Images folder
4. Upload the option image(s)

Find the URL of the image

To set an image for an option, you need the full URL. In Manage media, you can quickly find the URL of an image:

1. Right-click the image in the Images folder and click View in the popup menu
2. The image opens; right-click it and click something like 'Copy image address' or 'Copy image link'
3. Temporarily paste the copied URL into a text file; you will need this URL later to fill in the src attribute of the image.

Set the info icon and the modal for an option

You need to perform the steps below for each product to which you want to add modal functionality for one or more options.

1. Switch to configuration mode
2. Click Objects > Manage products
3. Open the view 'Extra' for the product to which you want to add the modal to an option
4. In the Option Details block, click the first pencil icon of the option to which you want to add the modal
5. In the 'Edit option' popup, click the source code (< >) icon in the editor toolbar in the 'Advanced' field
6. In the 'Source code' popup, paste the code below:

   <!-- 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="#NAME"> </div>
   </div> 
   <!-- Modal -->
   <div class="modal fade" id="NAME" tabindex="-1" aria-hidden="true" aria-labelledby="NAMELabel">
     <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-TO-IMAGE" alt="DESCRIPTION">
           ...
         </div>
         <div class="modal-footer"> 
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
         </div>      
       </div>
     </div>
   </div>
   

7. Give this modal a unique name by changing NAME to a unique name that matches the relevant option in three places in the pasted code. For example, if the modal provides information about a lunch, replace NAME with lunch three times. Use lowercase letters, no spaces, and no “special” characters such as #, @, é, ü, etc.
   Do you offer multiple lunch options? Then use a suffix to distinguish them, for example: luxe_lunch, vega_lunch, lunch_met_soep.
8. In the example code, we use an image that is displayed across the full width of the modal.
   If you do not want your image to be displayed at full width, remove w-100 from the img class setting.
9. Paste the full URL of the image in the place where the example code currently shows 'URL-TO-IMAGE'.
10. Change the text DESCRIPTION of the alt attribute to a short description of the image.
11. Click Save to close the 'Source code' popup.
12. Below the image, at the location of the ..., you can add text.
    Don’t want to worry about writing the correct HTML code? Then select the three dots and type your text in the editor. You can also use the editor’s formatting options.
    Are you familiar with HTML? Then you may prefer to work directly in the source code. Open the source code and start coding; click Save to close the 'Source code' popup.
13. Click Save again to close the 'Edit option' popup.

Checkup

Finally, check whether the clickable info icon and the modal are displayed in the reservation dialog of the relevant product. If so, you can add the modal functionality to the options where it is needed. Be sure to read the tip below if you want to add a modal to multiple options of the same product!

Do you not see an info icon, or does the modal not work? Then refresh the page or clear your browser cache.
Still no result? Then go through all steps again and check whether you missed anything and whether you made a mistake when adding and editing the example code in the 'Advanced' field of the option.