Dynamically Add and Swap Comment Threads

Avec FastComments, nous pouvons avoir autant de widgets de commentaires sur la même page que nous le souhaitons. Nous pouvons tous les configurer sur le même fil de discussion, et ils resteront synchronisés, ou nous pouvons les avoir tous comme des fils de discussion différents en même temps. Nous pouvons ajouter, supprimer, et modifier les fils de discussion des commentaires à la demande.

Ajouter et échanger dynamiquement des fils de commentaires

Tout cela se fait en configurant le urlId et les paramètres associés et en appelant update() sur les instances du widget pour les remplacer par un fil différent.

L'exemple interactif ci-dessous (cliquez sur run en haut à gauche) vous permet d'ajouter et d'échanger des fils de commentaires à la demande. Nous pourrions aussi les supprimer en appelant instance.destroy au lieu de update.

Ajouter et échanger des fils de commentaires

Copy

Run

    <script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
    <div id="fastcomments-widgets"></div>
    <div class="demo-form">
        <section>
            <h3>Add or Swap a Product/Comment Thread</h3>
            <label>
                Product Name
                <input type="text" name="name" />
            </label>
            <label>
                Product ID
                <input type="text" name="id" />
            </label>
            <label>
                Product URL
                <input type="url" name="url" />
            </label>
            <label>
                Replaces Product (id)
                <input type="text" name="replaces_id" />
            </label>
            <button type="button">Add/Swap</button>
        </section>
    </div>
    <script>
        (function () {
            const target = document.getElementById('fastcomments-widgets');
            const tenantId = "demo"; // INSÉREZ VOTRE TENANT ID ICI
    
            function setHeading(heading, {name, productID}) {
                heading.innerHTML = `${name} (${productID})`;
            }
    
            function addWidget({name, productID, productURL}) {
                const outer = document.createElement('div');
                const heading = document.createElement('h5');
                setHeading(heading, {name, productID});
                const inner = document.createElement('div');
                inner.append(heading);
                outer.append(inner);
                const widgetTarget = document.createElement('div');
                outer.append(widgetTarget);
                target.append(outer);
                window.FastCommentsUI(widgetTarget, {
                    "tenantId": tenantId,
                    "pageTitle": name, // pour les e-mails de notification et le tableau de bord de modération
                    "url": productURL, // pour les e-mails de notification et le tableau de bord de modération
                    "urlId": productID,
                    "showLiveRightAway": true
                });
            }
    
            function switchProduct(oldId, {name, productID, productURL}) {
                for (const instanceWrapped of fcUIInstances) {
                    if (instanceWrapped.targetElement) {
                        const config = instanceWrapped.config;
                        if (config.urlId === oldId) {
                            const heading = instanceWrapped.targetElement.parentNode.querySelector('h5');
                            setHeading(heading, {name, productID});
                            config.pageTitle = name;
                            config.urlId = productID;
                            config.url = productURL;
                            instanceWrapped.instance.update(config);
                            return;
                        }
                    }
                }
                alert(`Product ${oldId} not found to replace!`);
            }
    
            // ajouter quelques widgets
            addWidget({name: "Product A", productID: 'product-id-a', productURL: 'https://example.com/a'});
            addWidget({name: "Product B", productID: 'product-id-b', productURL: 'https://example.com/b'});
    
            const form = document.querySelector('.demo-form');
            form.querySelector('button').addEventListener('click', function() {
                const name = form.querySelector('input[name=name]').value;
                const productID = form.querySelector('input[name=id]').value;
                const productURL = form.querySelector('input[name=url]').value;
                const replaces_id = form.querySelector('input[name=replaces_id]').value;
    
                if (replaces_id) {
                    switchProduct(replaces_id, {
                        name,
                        productID,
                        productURL,
                    });
                } else {
                    addWidget({name, productID, productURL});
                }
            });
        })();
    </script>
    <style>
        #fastcomments-widgets {
            display: flex;
        }
        #fastcomments-widgets > div {
            width: 100%;
        }
    
        .demo-form section label {
            display: block;
            margin-bottom: 20px;
        }
    </style>

Ceci est similaire au fonctionnement de la pagination.

Avec React et les bibliothèques associées, nous pouvons simplement mettre à jour la configuration et la bibliothèque (React, Angular, Vue) se chargera de rafraîchir le widget pour nous. Avec VanillaJS, nous devons le gérer nous-mêmes comme illustré.

N'hésitez pas à poser vos questions ci-dessous, nous ferons de notre mieux pour vous aider !

Langue 🇫🇷 Français (France)

Exemples

Ajouter et échanger dynamiquement des fils de commentaires