Hallo,
Ich habe es bisher mit keiner der mir zur Verfügung stehenden Methoden zum Laufen gebracht und möchte wissen, ob meine Erwartungen einfach falsch sind.
Ich integriere mich in meine pretix-Installation (zum Verkauf von Event-Tickets). Dies sollte einfach darin bestehen, HTML zu einem Beitrag hinzuzufügen und sicherzustellen, dass das pretix HTML und CSS enthalten sind.
<link rel="stylesheet" type="text/css" href="https://pretix.eu/demo/democon/widget/v1.css">
<script type="text/javascript" src="https://pretix.eu/widget/v1.en.js" async></script>
<!-- anderswo, in einem Beitrag -->
<pretix-widget event="https://pretix.eu/demo/democon/">
</pretix-widget>
<noscript>
<div class="pretix-widget">
<div class="pretix-widget-info-message">
JavaScript ist in Ihrem Browser deaktiviert. Um unseren Ticketshop ohne JavaScript zu nutzen,
klicken Sie bitte <a target="_blank" href="https://pretix.eu/demo/democon/">hier</a>.
</div>
</div>
</noscript>
Offensichtlich scannen die pretix-Skripte das Dokument nach den entsprechenden Elementen anhand des Tags und ersetzen sie dann durch anpassbare Einträge (wie ich es wünsche).
Ich glaube, ich kann (und möchte) diese Integration leicht erreichen, und ich dachte, ich könnte einfach die benutzerdefinierten Theme-Komponenten verwenden, um dies zu erreichen, indem ich die externen pretix-Skripte/Stile einbinde und das Widget-HTML zu Beiträgen hinzufüge (d. h. nur mit ‘Konfiguration’).
Zuerst stieß ich auf CSP-Schutzmaßnahmen (gut) und die AllowList (auch gut). Ebenso habe ich die CSP-Konfiguration hinzugefügt, aber jetzt kann ich die AllowList scheinbar nicht mehr ändern, ohne tatsächliche Codeänderungen vorzunehmen – daher muss ich ‘geschmücktes’ HTML in Beiträge einfügen und dann versuchen, diese nach dem Rendern zu ändern.
Ich habe versucht, ein leichtes JS in der Theme-Komponenten-Spezifikation zu verwenden (nur als Inline-Skript) – so etwas wie dieses, nur unter Verwendung der [data-*]-Ausnahme der AllowList.
function upgradeWidgets() {
const divsWithDataEvent = document.querySelectorAll('div[data-event]');
divsWithDataEvent.forEach((div) => {
const attributes = div.attributes;
for (let i = 0; i < attributes.length; i++) {
const attr = attributes[i];
if (attr.nodeName.startsWith('data-')) {
const newAttrName = attr.nodeName.replace('data-', '');
const attrValue = attr.nodeValue;
div.setAttribute(newAttrName, attrValue);
div.removeAttribute(attr.nodeName);
}
}
});
}
Natürlich unterliegt dies nun Timing-Problemen – ich kann kein onload einhaken (das Skript wird aus der Theme-Komponente entfernt?!) und jedes andere DOM-Ereignis, das ich von Skripten abfangen kann, ist nicht an einem Punkt, an dem dieses Beitrags-HTML zuverlässig im Dokument verfügbar ist.
Ich bin sicher, dass es eine besonders idiomatische Methode gibt, dies alles in Discourse zu tun – aber ich hoffte, dass ich kein Fachexperte sein müsste, um eine so leichte Integration durchzuführen.
Ich freue mich über Ratschläge.