oveleon/cookiebar - OpenStreetMap blockieren mit Bootstrap und Leaflet zusammen

Also ich muss jetzt auch mal hier fragen, weil für mich erschließt es sich nicht richtig wie ich die Cookiebar einstellen muss.

Zu meinen Setup:
Contao 4.13.35 auf PHP 8.1.26

mit der
oveleon/cookiebar Version 1.13.1
Leaflet Maps für Contao Version 3.2.4
Bootstrap für Contao mit seinen aktuellen Modulen.

Die OpenStreetMap ist im Theme als Modul eingebunden im Fuß der Seite.
soweit klappt das alles auch die Cookiebar wird erfolgreich eingebunden in dem das Tempalte "fe_page_bootstrap.html5" abgeändert wurde.

In der Cookiebar wurde eine 2te Gruppe erstellt diese heißt "erleichterte Bedienung" mit den Cookie (ID 4) und den Namen OpenStreetMap und den Cookie-Typ IFRAME.

IFRAME-Typ ist ausgewählt "OpenStreetMap".

auch in der config/config.yml habe ich dies eingetragen:

Code:

---

contao_cookiebar:
    page_templates:
        - fe_page_bootstrap
    iframe_types:
        openstreetmap:
            - ce_html_openstreetmap
            - mod_html_openstreetmap

---

vielleicht kann mir hier jemand den Tipp geben wo gerade mein Kopf sich querstellt?

Im speziellen kann ich nicht helfen, und ich weiß nicht inwiefern da dein Bootstrap überhaupt eine Rolle spielt (ich nutze das nie) aber ich nutze das leaflet Modul auch regelmäßig mit dieser der consent Erweiterung und baue es immer so ein, wie es in diesem Thread beschrieben ist… das klappt wunderbar.

Ich habe das Bootstrap und alles nur erwähnt das man mein Setup weiß.

Also so wie ich den verlinkten Thread verstehe, muss man ich dann im Modul Leaflet das JS noch anpassen und bzw das aus den Thread integrieren.

Also geht es nur so wie dort beschrieben oder gibt es auch noch einen anderen Weg?

Für das Leflet Modul von netzmacht, mache ich folgendes:

1. Unter CookieBar in einer passenden Gruppe ein benutzerdefiniertes Script z.B. "LeafletMap" anlegen, ID merken, bei mir in diesem Fall 4

2. Eigener JS Code (Seitenlayout) einfügen. Bei mir:

Code:

---

<script>
        document.addEventListener("DOMContentLoaded", function () {
    cookiebar.addModule(4, initializeLeaflet, {
        selector: '#map',
        message: '<h3>Externe Inhalte (z.B. Karte) wurden blockiert!</h3>',
        button: {
            show: true,
            text: 'Klicken, um externe Inhalte nachzuladen'
        }
    });
});
</script>

---

Da wo die "4" steht, kommt natürlich deine ID hin. Der Selektor, in meinem Fall, die ID map, muss für das FontendModul auch gesetzt werden.

3. Anpassung des ce_leaflet_map Templates. Bei mir dann:

Code:

---

<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>

    <?php if ($this->headline): ?>
    <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<div id="<?php echo $this->mapId; ?>" style="<?php echo $this->mapStyle; ?>"></div>

</div>
<!-- indexer::continue -->
<script>
        function initializeLeaflet(){
        <?= $this->javascript ?>
        }
</script>

---

Funktioniert so bei mir problemlos.

//EDIT
Kann natürlich sein, weil dein Bootstrap das Seitentemplate ändert bzw. ein anderes nutzt, das du zusätzliche Anpassungen machen musst in der config.yml - so stehts wohl in der Doku. Ich versuche, wenns geht niemals die fe_page zu ändern, daher hab ich da keine Erfahrungswerte.

Danke an euch alle und vorallem an @tblumrich

Klappt bei mir nun auch. Musste statt dem CE das MOD anpassen.

Werde mal schauen "nachdem ich es nun besser verstehe" wie man die Felder vom "Script" nehmen kann um noch weniger im Templates anzupassen.