Ajouter un Event "OnClick" Javascript sur un bouton webstudio

Oui, il est techniquement possible d’ajouter l’événement “Click” (et toute autre logique) dans un Widget HTML en utilisant du code JavaScript pur.

Cependant, dans un outil comme Webstudio, cette approche est fortement déconseillée pour lier des variables d’état (comme isModalOpen ou SelectedPost) car elle nécessite de connaître et d’interagir directement avec l’API interne JavaScript de Webstudio, qui n’est généralement pas documentée ou stable.

Voici la comparaison des deux méthodes :

---

🆚 Méthode Recommandée (Interface Webstudio)

C’est la méthode que nous avons détaillée, qui utilise les fonctionnalités natives de l’éditeur Webstudio.

• Où l’appliquer : Sur l’élément réel du bouton “Lire l’article” dans le modèle de la Collection.

• Avantages :

  • Stabilité et Sécurité : Utilise l’API officielle de Webstudio pour manipuler les variables, garantissant que votre logique ne sera pas rompue par des mises à jour internes de la plateforme.

  • Maintenance Facile : La logique est visible et modifiable directement dans l’interface graphique (panneau Interactions).

  • Accès Direct aux Variables : Vous avez un accès direct et intuitif à collectionItem, SelectedPost et isModalOpen.

• Inconvénients : Nécessite de localiser le bon onglet (”Interactions” / “Events”) dans l’interface Webstudio.

---

💻 Méthode Alternative (Widget HTML avec JavaScript)

Cette méthode est utilisée uniquement si l’interface d’interaction de Webstudio est trop limitée ou si vous devez exécuter une logique complexe avant d’ouvrir la modale.

1. Structure du Code

Vous placeriez ce code JavaScript sous le HTML de votre modale dans le Widget HTML :

HTML

<script>
    // NOTE: C’est du PSEUDO-CODE. Le nom exact des fonctions (Webstudio.setVariable)
    // dépend de l’API JavaScript interne de Webstudio et pourrait ne pas fonctionner.

    document.addEventListener(’DOMContentLoaded’, function() {
        const modalBackdrop = document.getElementById(’custom-blog-modal-backdrop’);
        const closeButton = document.getElementById(’modal-close-button’);

        // Événement de Fermeture dans le Widget HTML
        if (closeButton) {
            closeButton.addEventListener(’click’, function() {
                // Tenter d’appeler l’API interne pour définir la variable à FALSE
                if (typeof Webstudio !== ‘undefined’ && Webstudio.setVariable) {
                    Webstudio.setVariable(’isModalOpen’, false);
                } else {
                    // Solution de secours (ne met pas à jour la variable Webstudio)
                    modalBackdrop.style.display = ‘none’;
                }
            });
        }
        
        // La VRAIE DIFFICULTÉ est de lier le bouton “Lire l’article” de la COLLECTION
        // à ce code sans casser l’isolation des composants de Webstudio.

    });
</script>

2. Le Problème de l’Accès aux Données

Le plus grand défi est que le Widget HTML est isolé du contexte de la Collection.

• Problème 1 (Le Clic) : Si vous mettez le JavaScript du clic dans le Widget HTML, il ne saura pas identifier quel bouton a été cliqué dans la Collection.

• Problème 2 (Les Variables) : Même si vous capturez le clic, vous ne savez pas comment dire à Webstudio : “Copie les données de collectionItem dans SelectedPost.”

Conclusion

Utilisez toujours le panneau “Interactions” (ou “Events”) de Webstudio pour lier l’événement Click et définir les variables. Le Widget HTML doit être réservé uniquement à l’affichage du HTML/CSS de la modale et, occasionnellement, à des scripts tiers.