Wie kann ich ein Reservierungs-Widget einbinden?

avoca77 commented 1 month ago

Prerequisites

[X] I checked for duplicate feature requests (open and closed)
[X] I am willing to help and contribute (financially, work or other measures) to have this feature implemented

Proposal

Ich muss ein Reservierungs-Widget einbinden und bekomme es nicht hin. Ich habe so ziemlich alles an Dokumentationen und Forenbeiträge gelesen, aber ich schaffe es einfach nicht, dieses Widget in die Cookiebar einzubinden (Cookiebar funktioniert).

Folgender Code:

<link rel="stylesheet" href="https://domain.tld/widgets/styles.css" />
<script src="https://domain.tld/widgets/elements.js"></script>
<reservation-widget client="xxxxxx"></reservation-widget>

Ich habe einen Cookie-Typen "Benutzerdefiniertes Script" angelegt und bei "Script bestätigt" eingefügt. Den Link zur CSS ins Seitenlayout und den Html-Schnipsel an die entsprechende Stelle wo es ausgegeben werden soll. Ich bekomme nichts angezeigt ob bestätigt oder unbestätigt.

Wie kann ich das Widget einbinden und noch eine Meldung ausgeben - ähnlich YouTube? Ich habe mir die addModule-Lösung angeschaut. Ich habe keine Idee ob und wie ich diese wo einsetzen soll.

Context

Ich hoffe jemand kann mir weiterhelfen. Ich habe keine Ideen mehr.

zoglo commented 1 month ago

Hey @avoca77, dies könnte eventuell mit der addModule-Methode funktionieren.

Wenn du es selber nicht schaffst, kannst du uns über die info@oveleon.de beauftragen. Schicke uns hier auch bitte weitere Informationen.

avoca77 commented 1 month ago

@zoglo, ich habe jetzt mit der addModule-Methode das Script hinbekommen.

<script>
  document.addEventListener("DOMContentLoaded", function () {
    cookiebar.addModule(16, function () {
      let script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://domain.tld//widgets/elements.js';
      document.head.append(script);
    }, {
      selector: '#reservierung',
      message: 'Zur Anzeige des Reservierungstools benötigen wir Ihre Zustimmung',
      button: {
        show: true,
        text: 'Akzeptieren und anzeigen',
        type: 'button',
        classes: 'res-btn'
      }
    });
  });
</script>

Habe dazu einen Cookie-Typen Hinweis nur für die ID (16) angelegt und das obige Script im Seitenlayout unter eigener JavaScript-Code eingefügt. CSS-Link im Seitenlayout bei Zusätzliche <head>-Tags platziert. Das Widget wurde per HTML-Element auf der Seite eingebunden:

<div id="reservierung">
    <reservation-widget client="xxxxxx"></reservation-widget>
</div>

Ist das soweit richtig? Es funktioniert zwar, aber ich bin nicht sicher, ob das so richtig ist.

Edit by author: Added formatting

zoglo commented 1 month ago

@avoca77 yeah, that's what I meant by the addmodule method :)

oveleon / contao-cookiebar