הוספה והחלפה דינמיות של שרשורי תגובות

עם FastComments, נוכל להציג כמה שיותר ווידג'טים של תגובות באותו דף כפי שנרצה. נוכל להגדיר את כולם לאותו שרשור, והם יהיו מסונכרנים, או שנוכל שיהיו כולם שרשורים שונים בו-זמנית. נוכל להוסיף, להסיר, ולשנות את שרשורי התגובות לפי דרישה.

הוספה והחלפה דינמיות של שרשורי תגובות

זה נעשה על ידי קביעת תצורת ה-urlId והפרמטרים הקשורים, וקוראת ל-update() על מופעי הווידג'ט כדי להחליף אותם בשרשרת אחרת.

הלהלן דוגמה אינטראקטיבית (הקלק על הפעל למעלה משמאל) המאפשרת לך להוסיף ולהחליף שרשראות תגובות לפי דרישה. ניתן גם להסיר אותן על ידי קריאה ל-instance.destroy במקום update.

הוספה והחלפת שרשראות תגובות

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"; // הכנס כאן את מזהה השוכר שלך
    
            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, // עבור הודעות דוא"ל של התראות ולוח ניהול
                    "url": productURL, // עבור הודעות דוא"ל של התראות ולוח ניהול
                    "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!`);
            }
    
            // הוסף כמה וידג'טים
            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>

זה דומה לאופן שבו פגינציה עובדת.

עם React והספריות הקשורות נוכל פשוט לעדכן את התצורה והספרייה (React, Angular, Vue) תטפל ברענון הווידג'ט עבורנו. עם VanillaJS עלינו לנהל זאת בעצמנו כפי שמוצג.

אל תהססו לשאול שאלות למטה ונעשה כמיטב יכולתנו לעזור!

שפה 🇮🇱 עברית

דוגמאות

הוספה והחלפה דינמיות של שרשורי תגובות

הוספה והחלפה דינמיות של שרשורי תגובות