Externes Widget - Problem mit CSS Formatierung - jQuery

[n!ck]

Grüße Euch,

ich versuche im Moment ein Reservierungs-Widget von OpenTable (=Reservierungssystem für die Gastronomie) in Contao 3.5.12 einzubinden.
Auf Grund von Darstellungsfehlern habe ich den Support von OpenTable angeschrieben und habe einige Styles bekommen, welche ich an den bestehenden Code des Widget einbinden sollte.
Leider hatte das im ersten Versuch ein paar Dropdowns auf der Seite deaktiviert, weshalb mir der Support noch den Tipp gegeben hat, auf die jquery-migrate-1.1.1.min.js zu verweisen.

Das Widget habe ich als Modul (eigener HTML-Code) eingebunden:

<script type="text/javascript" src="https://www.opentable.de/frontdoor/default.aspx?rid=000000&restref=000000&bgcolor=F6F6F3&titlecolor=0F0F0F&subtitlecolor=0F0F0F&btnbgimage=https://www.opentable.de/frontdoor/img/ot_btn_red.png&otlink=FFFFFF&icon=dark&mode=wide&hover=1"></script>
<style>.OT_title{margin: 5px 0 0 15px !important; font-size: 14px !important; font-style: normal !important;}.OT_subtitle{margin: 0 0 0 15px !important; font-size: 8px !important; font-style: normal !important;}.OT_list{padding: 0 !important; margin: 0 0 0 195px !important;}.OT_day, .OT_time, .OT_party{width: 163px !important; height: 39px !important; padding: 6px 0 13px 35px !important;}.OT_submit{width: 163px !important; height: 39px !important; padding: 8px 0 11px 15px !important;}.OT_searchTimeField, .OT_searchDateField, .OT_searchPartyField{width: 116px !important; height: 21px !important;}</style> <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

script habe ich natürlich in die Liste der erlaubten HTML-Tags eingefügt.

Nun wird zwar das Widget fehlerfrei angezeigt, jedoch hat der Code irgendwie einen Einfluss auf das CSS des restlichen Inhalts. Beispielsweise von einem Akkordeon. Hier werden z.B. Rahmen, Listen Icons und Schriften verändert.
OpenTable hatte Contao bisher leider noch nicht auf dem Schirm, weshalb das Widgets für Contao noch nicht angepasst wurde. Ich habe daraufhin auf den CMS Crawler und das Ranking von Contao hingewiesen... ;-) Contao soll nun auf die Liste der unterstützten CMS aufgenommen werden. Leider wird das wohl noch eine weile dauern...

Gibt es eine Möglichkeit das Widget "einzusperren", damit der Code die restliche Seite nicht beeinflusst bzw. danach das "normale" CSS von Contao wieder greift?
Meine aktive Zeit mit HTML und CSS ist leider schon lange her. Ich komme seit Tagen nicht mehr weiter..

Ich hoffe es ist verständlich was mein Problem ist. Aktuell ist die Seite nur bei mir lokal und noch nicht live im Einsatz.

[mlweb]

Ohne das direkt sehen und untersuchen zu können wird es da wie Lesen aus dem Kaffeesatz.
Die Klassen im style selbst sind ja spezifisch und kolidieren im Normalfall nicht mit Contao-Klassen.

[Samuell]

Ein Link zu der betreffenden Seite wäre gut, damit man sich nicht erst eine Demo nachbauen muss.

Generell kannst Du das widget doch in ein div mit einer Klasse Deiner Wahl "einsperren" und das CSS entsprechend abändern.
Allerdings klappt das nur, wenn das Widget nicht noch CSS mit lädt, dass Du nicht beeinflsusen kannst.

[Andreas]

Funktioniert denn dein Akkordeon überhaupt noch? Ich könnte mir vorstellen, dass es dort JS-Konflikte gibt und deswegen die CSS-Klassen im Akkordeon fehlen. Prüfe mal auf JS-Fehler im FE.

[n!ck]

Hallo nochmal,

sorry dass ich mich nicht mehr zu euren Antworten gemeldet habe. Ich habe die Seite nun auf den Live-Server gezogen. So ist es einfacher direkt zu sehen was mein Problem ist.

Die Seite mit Widget: http://dev.josephs-koeln.de
Zum Vergleich ohne Widget: http://dev.josephs-koeln.de/ohne-widget.html

Nach wie vor kann ich nicht nachvollziehen woher die Änderungen am Akkordeon kommen. So wie ich das sehe bringt das Widget selbst doch keinerlei Formatierung mit, die einen Einfluss haben könnten, oder?

[Andreas]

So wie ich das sehe bringt das Widget selbst doch keinerlei Formatierung mit, die einen Einfluss haben könnten, oder?

Doch, das Widget bring ein jQuery User Interface mit, welches automatisch dein Akkordeon formatiert.

[n!ck]

Hallo Andreas.

Guter Hinweis! Habe daraufhin mit DevTools nachgesehen wo der Ursprung ist. So wie es aussieht wird ein "jquery-ui-1.8.5.custom.css" geladen.
Das Akkordeon scheint ebenfalls auf dieses bzw. einem ähnlichen jQuery UI aufzubauen, weshalb sich das CSS an manchen Stellen gleicht.

Puh. Wie bekomme ich dass nun in den Griff? Ich finde nicht mal einen Ansatz. Auf das Widget habe ich ja keinerlei Einfluss.

[Andreas]

Ich habe jetzt keine Zeit mir das näher anzusehen. Ganz radikal kannst du dieses Asset erstmal mit JS wieder aus dem DOM werfen. Ich würde aber auch mal den Anbieter kontaktieren und fragen, wieso das eingebunden wird.

[n!ck]

Ich habe nun nochmals mit dem Anbieter Kontakt aufgenommen. Eventuell gibt es eine Sonderlösung, ich rechne jedoch offen gestanden nicht damit.

Ganz radikal kannst du dieses Asset erstmal mit JS wieder aus dem DOM werfen.

Musste erstmal googlen was damit gemeint ist Wenn ich die Zeile

<link rel="stylesheet" type="text/css" href="https://www.opentable.de/frontdoor/js/jquery-ui/css/custom-theme/jquery-ui-1.8.5.custom.css">

aus dem DOM nehme, gibt es Probleme mit dem Datum Dropdown des Widget. Es lässt sich nicht mehr schließen (erst nach Auswahl eines Tages) und die Formatierungen fehlen.

Datum-Dropdown.png

Das Widget würde ansonsten wunderbar funktionieren. Das Akkordeon ebenfalls.

Ich könnte mir das CSS und die Klassen des Kalenders rauspicken und die Formatierungen direkt in den style-Bereich schreiben.
Wenn es dann noch eine Möglichkeit gibt das jQuery UI nachträglich wieder zu entfernen, müsste ich doch zum Ziel kommen. Geht das so wie ich es mir denke?

[Spooky]

Dass die ihr CSS nicht in einen eigenen Selector gewrapped haben ist natürlich Fatal. Das sollten die ändern.

[Andreas]

...Geht das so wie ich es mir denke?

Müsste gehen, aber wie Spooky schon sagt, die sollten dafür sorgen, dass sie CSS mitliefern, welches nur ihre Widgets beeinflussen.

Und da sind noch zwei weitere CSS-Dateien von Opentable, wo auch nicht alle Selektoren "gewrappt" sind.

Wenn du mal ne Netzwerkanalyse mit den Dev-Tools von Firefox machst und nach opentable filterst, das ist ganz schön gewaltig, was da alles geladen wird, jede Menge Serveranfragen. Und dabei habe ich abcde.biz, websta.me und facebook.com noch nicht mal erlaubt.

[n!ck]

Müsste gehen, aber wie Spooky schon sagt, die sollten dafür sorgen, dass sie CSS mitliefern, welches nur ihre Widgets beeinflussen.

Ich habe erneut mit OpenTable Kontakt aufgenommen. Leider mit keiner Lösung, stattdessen soll ich ein eigenes Widget schreiben. Eine Anleitung dazu habe ich bekommen - dort wird ebenfalls mit der jQuery rangegangen

Und da sind noch zwei weitere CSS-Dateien von Opentable, wo auch nicht alle Selektoren "gewrappt" sind.

Naja, immerhin konsequent...

Wenn du mal ne Netzwerkanalyse mit den Dev-Tools von Firefox machst und nach opentable filterst, das ist ganz schön gewaltig, was da alles geladen wird, jede Menge Serveranfragen. Und dabei habe ich abcde.biz, websta.me und facebook.com noch nicht mal erlaubt.

Das wären Piwik, die Anzeige des Instagram-Feeds (gibt es da eine elegantere Lösung, evtl. sogar mit einen Contao-Plugin? In der Repo habe ich nichts gefunden) und eben Facebook.
Erschreckend finde ich wieviel überhaupt für das "kleine" Widget geladen wird.

Ich kann nur hoffen, dass die Änderung der Widgets von Opentable zeitnah vorgenommen werden. Sie müssten doch nur ihre Selektoren wrappen.

Vielen lieben Dank für eure Unterstützung! Sollte ich etwas erfreuliches von OpenTable hören, melde ich mich gerne nochmal dazu.
Vielleicht gibt es noch weitere OpenTable und Contao Nutzer mit dem gleichen Problem.

[Spooky]

dort wird ebenfalls mit der jQuery rangegangen

jQuery an sich ist ja nicht das Problem.

[n!ck]

In der Anleitung wird der Standardkalender aus der jQuery-Datenbank verwendet. Wie auch im Widget mit dem dazu passenden CSS von jquery.com.

Ich werde nach einer anderen Kalenderlösung suchen, sobald ich den Rest der Website fertig habe. Die Anleitung beschreibt ansonsten einfach nur ein ganz normales GET-Formular mit Angabe der zu übergebenden Feldnamen.
Irgendwie finde ich es aber nicht richtig, als Kunde von OpenTable mich damit auseinander setzen zu müssen. Ich möchte ja kein individuelles Widget, sondern das vorgefertigte - ohne Beeinflussung des bestehenden Codes.