Widget richtig einbauen

Druckbare Version

26.06.2023, 17:09
rauel

Widget richtig einbauen

Hallo,

ich muss für meinen Kunden eien Widget einbauen.

HTML-Code:

<div id="someContainerIdFromDom"></div> <script> const html = ` <booking-form data-locale="de" data-platform-id="VETGURU" data-api-url="https://live.vetguru.de <https://live.vetguru.de/> " data-expert-calendar-uuid="b500b50c-b21c-4c5b-b7cf-1b5f4b7fb3d5" data-widget-collapsed="false" data-widget-color-scheme="red" data-widget-box-shadow-enabled="true" data-widget-border-radius="10px"></booking-form> <script src="https://widgets.xpertyme.com/expert-online-booking-form/widget.js"><\/script> `; const scriptEl = document.createRange().createContextualFragment(html); document.querySelector('#someContainerIdFromDom').append(scriptEl); </script>

1. Dazu habe ich in den erlaubten HTML-Tags das <script> eingetragen!
2. Dann bei HTML Attribute folgendes bei Script: booking-form data-locale,data-api-url,data-expert-calendar-uuid,data-platform-id,data-widget-border-radius,data-widget-box-shadow-enabled,data-widget-collapsed,data-widget-color-scheme

Trotzdem wird mir ein Code angezeigt anstatt das das Script ausgeführt wird.

HTML-Code:

<booking-form data-locale="de" data-platform-id="VETGURU" data-api-url="https://live.vetguru.de <https://live.vetguru.de/> " data-expert-calendar-uuid="b500b50c-b21c-4c5b-b7cf-1b5f4b7fb3d5" data-widget-collapsed="false" data-widget-color-scheme="red" data-widget-box-shadow-enabled="true" data-widget-border-radius="10px"></booking-form>

Kann mir jemand bitte helfen. Dank im Voraus.
26.06.2023, 17:36
Spooky

Das würde ich eher in ein Template geben (bspw. ce_html_booking.html5) und dann via HTML Inhaltselement ausgeben lassen.
26.06.2023, 17:47
rauel

Zitat:

Zitat von Spooky

Das würde ich eher in ein Template geben (bspw. ce_html_booking.html5) und dann via HTML Inhaltselement ausgeben lassen.

Es gibt kein Template ce_html_booking.html5 im Template-Ordner das ich anpassen kann.
26.06.2023, 17:59
Spooky

Das erzeugst du selbst (bzw. du legst ein ce_html Template an und benennst es dann um).
26.06.2023, 18:18
rauel

Liste der Anhänge anzeigen (Anzahl: 1)

Zitat:

Zitat von Spooky

Das erzeugst du selbst (bzw. du legst ein ce_html Template an und benennst es dann um).

Danke das habe ich nun gemacht und nun gibt es ein ce_html_booking.html5.

Dann habe ich beim News-Eintrag ein neues Inhaltelement mit Typ HTML angelegt und dort plaziert wo es erscheinen soll.
Anhang 26524 Anhang 26524

Auf der Webseite wird es mir nicht angezeigt:

https://tierarztpraxis-düsseltal.de/...selpfoten.html
26.06.2023, 18:23
Spooky

Und in der Datei ce_html_booking.html5 hast du den neu kopierten Inhalt eingefügt?
26.06.2023, 18:24
rauel

Liste der Anhänge anzeigen (Anzahl: 1)

Zitat:

Zitat von Spooky

Und in der Datei ce_html_booking.html5 hast du den neu kopierten Inhalt eingefügt?

ja genau.Anhang 26525

muss ich das template direkt im template Ordner ablegen?
26.06.2023, 20:54
tschero

Liste der Anhänge anzeigen (Anzahl: 1)

Moin,

das Template würde ich direkt in dem Verzeichnis Templates ablegen. Es muss jedoch dem HTML-Inhalktselement zugeordnet sein.
Siehe Screenshot.

Anhang 26526

Grüße
27.06.2023, 06:45
derRenner

Liste der Anhänge anzeigen (Anzahl: 1)

Zitat:

Zitat von rauel

Auf der Webseite wird es mir nicht angezeigt:

Hallo,

korrekt, angezeigt wird's nicht - jedoch ist das <div> vorhanden ... hat nur keine Höhe mitbekommen. Das Einbinden dürfte soweit also funktionieren - das CSS ggf. dazu nicht

https://community.contao.org/de/atta...7&d=1687844678

Anhang 26527
27.06.2023, 08:39
rauel

Liste der Anhänge anzeigen (Anzahl: 1)

[QUOTE=derRenner;573866]Hallo,

korrekt, angezeigt wird's nicht - jedoch ist das <div> vorhanden ... hat nur keine Höhe mitbekommen. Das Einbinden dürfte soweit also funktionieren - das CSS ggf. dazu nicht

https://community.contao.org/de/atta...7&d=1687844678

Hallo,

danke, ich habe jetzt das template direkt in den template-Ordner verschoben.

Du sagst das Css müsste angepasst werden? Die Datei habe ich vom Anbeiter Verguru so bekommen.....:confused:

Eigentlich hieß es ich brauche:eek: nur den Code einzubinden....

Ich habe der Box nun eine Höhe von 500px geben und man sieht auch den Abstand ab sonst nichts.
:(

kann es sein, dass ich in dem Inhaltselement was falsch gemacht habe.
Anhang 26528
27.06.2023, 08:42
Spooky

Ich denke das Problem ist vielleicht auch, dass sich auf deiner Seite sehr viele JavaScript Fehler befinden, die du zuerst alle beheben musst.
27.06.2023, 09:00
rauel

Zitat:

Zitat von Spooky

Ich denke das Problem ist vielleicht auch, dass sich auf deiner Seite sehr viele JavaScript Fehler befinden, die du zuerst alle beheben musst.

klasse, das Theme ist gekauft :(

meinst du Fehler in der Script-Datei von vetguru?
27.06.2023, 09:06
Spooky

Öffne die Browser Konsole und analysiere die JavaScript Fehler. Der erste Fehler passiert hier:

PHP-Code:

<script> $(document).ready(function() { /* $('div.scrolltop').hide(); $(window).scroll(function(){ var value = 200; var scrolling = $(window).scrollTop(); if (scrolling > value) { $('div.scrolltop').fadeIn(); } else { $('div.scrolltop').fadeOut(); } }); */ $('div.scrolltop').click(function(){ $('html, body').animate({scrollTop:'0px'}, 1000); return false; }); if ($(this).scrollTop() > 0) { if (!$(".bangb1").hasClass("fixedTop")) $(".bangb1").addClass("fixedTop").hide().fadeIn(400); } else { $(".bangb1").show().removeClass("fixedTop"); } }); $(window).scroll(function() { //if ($(this).scrollTop() == 120) // $(".bangb1").hide(); if ($(this).scrollTop() > 90) { if (!$(".bangb1").hasClass("fixedTop")) $(".bangb1").addClass("fixedTop").hide().fadeIn(400); } else { $(".bangb1").show().removeClass("fixedTop"); } }); </script>

Code:

Uncaught TypeError: $(...).ready is not a function

Ändere das mal auf

PHP-Code:

jQuery(document).ready(function() {
27.06.2023, 09:25
rauel

Zitat:

Zitat von Spooky

Öffne die Browser Konsole und analysiere die JavaScript Fehler. Der erste Fehler passiert hier:

PHP-Code:

<script> $(document).ready(function() { /* $('div.scrolltop').hide(); $(window).scroll(function(){ var value = 200; var scrolling = $(window).scrollTop(); if (scrolling > value) { $('div.scrolltop').fadeIn(); } else { $('div.scrolltop').fadeOut(); } }); */ $('div.scrolltop').click(function(){ $('html, body').animate({scrollTop:'0px'}, 1000); return false; }); if ($(this).scrollTop() > 0) { if (!$(".bangb1").hasClass("fixedTop")) $(".bangb1").addClass("fixedTop").hide().fadeIn(400); } else { $(".bangb1").show().removeClass("fixedTop"); } }); $(window).scroll(function() { //if ($(this).scrollTop() == 120) // $(".bangb1").hide(); if ($(this).scrollTop() > 90) { if (!$(".bangb1").hasClass("fixedTop")) $(".bangb1").addClass("fixedTop").hide().fadeIn(400); } else { $(".bangb1").show().removeClass("fixedTop"); } }); </script>

Code:

Uncaught TypeError: $(...).ready is not a function

Ändere das mal auf

PHP-Code:

jQuery(document).ready(function() {

Ich habe in der animate.js nun die Zeile so geändert:

HTML-Code:

jQuery(document).ready(function() {

ohne $

aber daran scheint es nicht gelegen zu haben.
27.06.2023, 09:27
Spooky

Das war vermutlich nicht die richtige Stelle, der selbe Fehler existiert immer noch. Hast du das nicht selbst überprüft?
27.06.2023, 09:31
rauel

Zitat:

Zitat von Spooky

Das war vermutlich nicht die richtige Stelle, der selbe Fehler existiert immer noch. Hast du das nicht selbst überprüft?

mir wird der Fehler nicht mehr in der Browserkonsole angezeigt!

Ich gebe auf. Danke für Eure Hilfe.

Ich kaufe mir die Themes weil ich keine Ahnung von PHP und Javascript habe.
27.06.2023, 09:33
Spooky

Auf https://tierarztpraxis-düsseltal.de/...selpfoten.html ist der Fehler nach wie vor vorhanden zumindest.
27.06.2023, 09:42
rauel

Zitat:

Zitat von Spooky

Auf https://tierarztpraxis-düsseltal.de/...selpfoten.html ist der Fehler nach wie vor vorhanden zumindest.

kann man sehen in welcher JS Datei?
27.06.2023, 09:50
Spooky

Das ist vermutlich ein Template, keine JavaScript Datei. Welches Template siehst du über den Debug-Modus.
27.06.2023, 13:48
derRenner

scheint mittlerweile zu funktionieren ;)
zumindest sehe ich ein Buchungsformular - vielleicht kannst du hier noch kurz vermerken, wo schlussendlich der Fehler behoben werden konnte
28.06.2023, 09:30
rauel

Zitat:

Zitat von derRenner

scheint mittlerweile zu funktionieren ;)
zumindest sehe ich ein Buchungsformular - vielleicht kannst du hier noch kurz vermerken, wo schlussendlich der Fehler behoben werden konnte

Gerne :-)

Im Quellcode den ich per Email erhalten habe hatte sich die URL

HTML-Code:

data-api-url="https://live.vetguru.de <https://live.vetguru.de/> "

gedoppelt.
Beim herauskopieren wurde das so übernommen und nicht bemerkt.

Danke :)