Widget richtig einbauen

[rauel]

Hallo,

ich muss für meinen Kunden eien Widget einbauen.

<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.

<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.

[Spooky]

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

[rauel]

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.

[Spooky]

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

[rauel]

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.
screen-booking-template.jpgscreen-booking-template.jpg

Auf der Webseite wird es mir nicht angezeigt:

https://tierarztpraxis-düsseltal.de/...selpfoten.html

[Spooky]

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

[rauel]

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

ja genau.screen-booking-template-2.jpg

muss ich das template direkt im template Ordner ablegen?

[tschero]

Moin,

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

ce_html_booking.jpg

Grüße

[derRenner]

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




2023-06-27 07_41_34-Window.png

[rauel]

[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





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.....

Eigentlich hieß es ich brauche 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.
screen-booking-template.jpg

[Spooky]

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

[rauel]

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?

[Spooky]

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

<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> 

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

Ändere das mal auf

jQuery(document).ready(function() { 

[rauel]

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

<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> 

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

Ändere das mal auf

jQuery(document).ready(function() { 

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

 jQuery(document).ready(function() {

ohne $

aber daran scheint es nicht gelegen zu haben.

[Spooky]

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

[rauel]

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.

[Spooky]

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

[rauel]

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

kann man sehen in welcher JS Datei?

[Spooky]

Das ist vermutlich ein Template, keine JavaScript Datei. Welches Template siehst du über den Debug-Modus.

[derRenner]

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

[rauel]

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

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

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

Danke