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 différents en même temps. Nous pouvons ajouter, supprimer, et modifier les fils de commentaires à la demande.

Ajouter et permuter dynamiquement des fils de commentaires

Tout cela se réalise 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 ci‑dessous est interactif (cliquez sur Exécuter en haut à gauche) et vous permet d'ajouter et d'échanger des fils de commentaires à la demande. Nous pourrions également 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 courriels de notification et le tableau de bord de modération
                    "url": productURL, // pour les courriels 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!`);
            }
    
            // add some 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 d'actualiser le widget pour nous. Avec VanillaJS, nous devons le gérer nous‑mêmes comme montré.

N'hésitez pas à poser des questions ci‑dessous et nous ferons de notre mieux pour vous aider !

Langue 🇨🇦 Français (Canada)

Exemples

Ajouter et permuter dynamiquement des fils de commentaires