Quelques problèmes de configuration d'un composant de thème pour l'intégration avec pretix

Dev
1

Salut -

Je n’ai pas encore réussi à faire fonctionner cela par aucun des moyens que j’ai trouvés, et j’aimerais savoir si mes attentes sont erronées.

Je m’intègre à mon installation pretix (pour la vente de billets d’événements). Cela devrait simplement consister à ajouter du HTML à un article, et à s’assurer que le HTML et le CSS de pretix sont inclus.

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

<!-- ailleurs, dans un article -->
<pretix-widget event="https://pretix.eu/demo/democon/">
</pretix-widget>
<noscript>
   <div class="pretix-widget">
        <div class="pretix-widget-info-message">
            JavaScript est désactivé dans votre navigateur. Pour accéder à notre billetterie sans JavaScript,
            veuillez <a target="_blank" href="https://pretix.eu/demo/democon/">cliquer ici</a>.
        </div>
    </div>
</noscript>

Évidemment, les scripts pretix analysent le document à la recherche des éléments appropriés par balise, puis les remplacent par des entrées personnalisables (comme je le souhaite).

Je pense que je peux (et souhaite) réaliser cette intégration facilement, et je pensais que je pourrais simplement utiliser les composants de thème personnalisés pour y parvenir en incluant les scripts/styles externes de pretix, et en ajoutant le HTML du widget aux articles (c’est-à-dire, avec juste la « configuration »).

J’ai d’abord rencontré les protections CSP (bonnes) et la liste d’autorisation (également bonne). De même, j’ai ajouté la configuration CSP, mais maintenant, je ne peux apparemment plus modifier la liste d’autorisation sans modifications de code réelles - je suis donc contraint d’insérer du HTML « aromatisé » dans les articles, puis d’essayer de les modifier après le rendu.

J’ai procédé à l’essai d’utilisation d’un peu de JS léger dans la spécification du composant de thème (juste comme script inline) - quelque chose comme ceci, en utilisant l’exclusion [data-*] de la liste d’autorisation.

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);
        }
      }
    });
}

Bien sûr, cela est maintenant soumis à des problèmes de synchronisation - je ne peux pas utiliser onload (le script est supprimé du composant de thème ?!) et tous les autres événements DOM que je peux intercepter à partir des scripts ne sont pas à un point où ce HTML d’article est de manière fiable disponible dans le document.

Je suis sûr qu’il existe une manière particulièrement idiomatique de faire tout cela dans Discourse - mais j’espérais ne pas avoir à être un expert pour effectuer une intégration aussi légère.

Je suis preneur de quelques conseils à ce sujet.

2

Recherchez api.onPageChange(), cela vous donnera un bon endroit pour gérer cela.

3 « J'aime »
3

Cela a nécessité quelques éléments distincts pour être résolu, je les note ici pour les futurs explorateurs.

  • <script type="text/discourse-plugin" /> (surprenant)
  • loadScripts (sympa)
  • api.decorateCookedElement (pas la première chose à laquelle j’ai pensé chercher)
  • api.pageLoaded (utile)

Et avec seulement la « configuration », j’ai réussi à intégrer pretix et mon site Discourse.

1 « J'aime »
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.