Agregar e intercambiar hilos de comentarios de forma dinámica

Con FastComments, podemos tener tantos widgets de comentarios en la misma página como queramos. Podemos configurarlos todos al mismo hilo, y se mantendrán sincronizados, o podemos hacer que todos sean hilos diferentes al mismo tiempo. Podemos añadir, eliminar, y cambiar los hilos de comentarios bajo demanda.

Agregar e intercambiar hilos de comentarios de forma dinámica

Esto se hace configurando el urlId y los parámetros relacionados, y llamando a update() en las instancias del widget para reemplazarlas por un hilo de comentarios diferente.

A continuación se muestra un ejemplo interactivo (pulsa run en la parte superior izquierda) que te permite añadir e intercambiar hilos de comentarios a demanda. También podríamos eliminarlos llamando a instance.destroy en lugar de update.

Añadir e intercambiar hilos de comentarios

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"; // PON AQUÍ TU TENANT ID
    
            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, // para correos de notificación y el panel de moderación
                    "url": productURL, // para correos de notificación y el panel de moderación
                    "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!`);
            }
    
            // añadir algunos 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>

Esto es similar a cómo funciona la paginación.

Con React y las librerías relacionadas podemos simplemente actualizar la configuración y la librería (React, Angular, Vue) se encargará de refrescar el widget por nosotros. Con VanillaJS tenemos que gestionarlo nosotros mismos, como se muestra.

¡No dudes en hacer cualquier pregunta abajo y haremos nuestro mejor esfuerzo por ayudarte!

Idioma 🇪🇸 Español

Ejemplos

Agregar e intercambiar hilos de comentarios de forma dinámica

Agregar e intercambiar hilos de comentarios de forma dinámica