feat: confirmation dialog with custom text when clicking product teaser

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/teaser_popup_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+
+    static values = { text: String }
+
+    open(e) {
+        if (this.hasTextValue && confirm(this.textValue)) {
+            return
+        }
+
+        e.preventDefault()
+    }
+}

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html

@@ -14,6 +14,11 @@
     <f:section name="TeaserImage">
         <div class="relative{f:if(condition: landscape, then: ' sm:w-2/5')}">
             <a href="{ep:uri.product(forceHotelUid: forceHotelUid, product: product, hotel: hotel, dateFrom: dateFrom, dateTo: dateTo, ref: referringPageUri)}"
+               <f:if condition="{concept.popupText}">
+               data-controller="teaser-popup"
+               data-teaser-popup-text-value="{concept.popupText}"
+               data-action="teaser-popup#open"
+               </f:if>
                title="{region.name} {product.name} Details und Buchen">
                 <f:if condition="{productImage}">
                     <f:then>
@@ -73,6 +78,11 @@
     <f:section name="TeaserContent">
         {f:variable(name: 'including', value: '{f:render(section: \'Including\', arguments: \'{_all}\') -> v:format.trim()}')}
         <a href="{ep:uri.product(forceHotelUid: forceHotelUid, product: product, hotel: hotel, dateFrom: dateFrom, dateTo: dateTo, ref: referringPageUri)}"
+            <f:if condition="{concept.popupText}">
+                data-controller="teaser-popup"
+                data-teaser-popup-text-value="{concept.popupText}"
+                data-action="teaser-popup#open"
+            </f:if>
            title="{region.name} {product.name} Details und Buchen"
            class="flex-1 flex flex-col space-y-1 px-2 py-4 md:p-4">
             <div class="product-teaser__label-name">