Welcher Techniker kann helfen - Widget Buchungstool

Hallo Siya,

bitte stelle den Code mal über </> als Quellcode ins Forum. Dann können die Experten das mal kopieren und ausprobieren.

Hallo Siya,

das Script besteht aus 2 Teilen. Der erste Teil muss im Head der Seite untergebracht werden. Gehe dazu auf die Seiteneigenschaften der Seite, auf der das Buchungstool erscheinen soll. Unter Attribute suchst Du "additional_meta" Dort fügst Du die Zeile 3 des Scriptes ein. Mit OK bestätigen.

Die Zeilen 5 bis 20 kommen dann in das Quelltext-Widget.

Dies jetzt erst mal nur so aus der Ferne, bin gerade an einem Rechner ohne Zeta.

Hallo Siya,

habe es jetzt unter Zeta testen können. Der Kommentar in Zeile 2 hatte mich ja dazu verleitet, das Script zu splitten und die Zeile 3 unter "additional_meta" unterzubringen, der war aber anscheinend falsch. Bei einem Split wird sofort ein Scriptfehler angezeigt. Bringt man hingegen das komplette Script in ein Quelltext-Widget, funktioniert es zumindest bis auf den Darstellungsfehler.

Sorry, dass ich Dir da nicht weiterhelfen kann.

Ich habe mir das auch mal angesehen.

Ich konnte mit CSS die Darstellung etwas verbessern. LINK. Ist aber sicher so nicht Sinn der Sache.

Theoretisch kann es nur 2 Ursachen haben.

1. Der Code ist fehlerhaft. Was ich allerdings nicht glaube.
2. Es werden Id- oder Klassennamen verwendet die auch Zeta Producer verwendet. Hierzu kann sicher der Support am Montag etwas sagen.

Eigentlich sagt die erste Codezeile .....

<!-- bookingWidget requires jQuery and jQueryUI -->

.... bereits aus was benötigt wird. Da ich diese Komponenten im Quelltext nicht erkennen kann, wird der Benutzer des Widget offenbar selbst dafür sorgen müssen, dass sie geladen werden.

Das Hinzufügen von 2 Zeilen Quellcode sollte reichen, um den Datepicker vernünftig darzustellen.

<link rel="stylesheet" href="jquery-ui.min.css">
<script src="//code.jquery.com/jquery-3.2.1.js"></script>

Der komplette Code würde demnach so aussehen:

<!-- bookingWidget requires jQuery and jQueryUI -->
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="//code.jquery.com/jquery-3.2.1.js"></script>
<!-- Include the following line ONCE ONLY on the page, preferably in the document head -->
<script src='https://media.xmlcal.com/widget/1.00/js/bookWidget.min.js'></script>
<!-- Place this div on your page where you want the widget to show -->
<div id='bookWidget-26002-46505-0-1519475782'> </div>
<!-- The following will initialize the widget in the above div -->
<script>
jQuery(document).ready(function() {
    jQuery('#bookWidget-26002-46505-0-1519475782').bookWidget({
        propid:46505,
        buttonBackgroundColor:'#038d22',
        formAction:'https://login.snooze-hotelsoftware.de/booking.php',
        widgetLang:'de',
        widgetType:'BookingBox',
        width:'900px'
    });
});
</script>

Einbinden über das Widget Quelltext.

Hallo NoName,

wer lesen kann ist klar im Vorteil.

Ich habe das nochmal getestet.

• Das Script "//code.jquery.com/jquery-3.2.1.js" wird benötigt.
• Die Verlinkung zur "jquery-ui.min.css" ist für die richtige Darstellung allerdings nicht nötig.

Eventuell kann der Support nochmal kurz melden ob die "jquery-ui.min.css" möglicherweise in Zeta Producer bereits inkludiert ist.

Hallo,

jQuery ist ja bereits in ZP enthalten. Was aber auch vom Script als Anforderung genannt wird und nur bei Verwendung von bestimmten Widgets in ZP enthalten ist, ist jQuery-UI (JS!) ich denke, dass dessen Fehlern die falsche Darstellung verursacht.

Wir können hier aber wirklich keine Fremdskripts supporten. In solchen Fällen empfähle ich daher zunächst einen sauberen Testfall zu machen indem man das alles losgelöst in einer einfachen HTML-Datei testet. Wenn da der Fehler auch auftritt (was er bei fehlendem jQuery-UI sicher tut), dann ist schon mal klar, dass es nicht an ZP liegt.

Danke Stefan, das hilft.

Hallo siya, das CSS benötigst du nicht, es funktioniert ja auch ohne LINK.

Die Frage war nur ob die Verlinkung zur jQuery nötig ist.

Gehe folgendermaßen vor.

Füge folgendes per Widget > Quelltext ein:

<div id='bookWidget-26002-46505-0-1519475782'> </div>
<script>
jQuery(document).ready(function() {
    jQuery('#bookWidget-26002-46505-0-1519475782').bookWidget({
        propid:46505,
        buttonBackgroundColor:'#038d22',
        formAction:'https://login.snooze-hotelsoftware.de/booking.php',
        widgetLang:'de',
        widgetType:'BookingBox',
        width:'900px'
    });
});
</script>

Gehe wie HIER BESCHRIEBEN zum Attribut mobile_script und gib dort folgendes ein. Wichtig hier lässt du die angaben <style> und </style> weg.

<script src="//code.jquery.com/jquery-3.2.1.js"></script>
<script src='https://media.xmlcal.com/widget/1.00/js/bookWidget.min.js'></script>

Teste nun. Wenn alles wie gewünscht funktioniert bist du fertig.

Wenn nicht fügst du dem Attribut mobile_script noch folgende Zeile hinzu:

<link rel="stylesheet" href="jquery-ui.min.css">