Dies wird alles durchgeführt, indem die urlId und zugehörige Parameter konfiguriert und update() auf den Widget-Instanzen aufgerufen werden, um sie durch einen anderen Thread zu ersetzen.

Das Folgende ist ein interaktives Beispiel (oben links auf "Run" klicken), das es ermöglicht, Kommentar-Threads nach Bedarf hinzuzufügen und auszutauschen. Wir könnten sie auch entfernen, indem wir statt update instance.destroy aufrufen.

Kommentare hinzufügen und Threads austauschen

Copy Run

1

2 <script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3

4 <div id="fastcomments-widgets"></div>

5 <div class="demo-form">

6 <section>

7 <h3>Add or Swap a Product/Comment Thread</h3>

8 <label>

9 Product Name

10 <input type="text" name="name" />

11 </label>

12 <label>

13 Product ID

14 <input type="text" name="id" />

15 </label>

16 <label>

17 Product URL

18 <input type="url" name="url" />

19 </label>

20 <label>

21 Replaces Product (id)

22 <input type="text" name="replaces_id" />

23 </label>

24 <button type="button">Add/Swap</button>

25 </section>

26 </div>

27 <script>

28 (function () {

29 const target = document.getElementById('fastcomments-widgets');

30 const tenantId = "demo"; // TRAGE HIER DEINE TENANT-ID EIN

31

32 function setHeading(heading, {name, productID}) {

33 heading.innerHTML = `${name} (${productID})`;

34 }

35

36 function addWidget({name, productID, productURL}) {

37 const outer = document.createElement('div');

38 const heading = document.createElement('h5');

39 setHeading(heading, {name, productID});

40 const inner = document.createElement('div');

41 inner.append(heading);

42 outer.append(inner);

43 const widgetTarget = document.createElement('div');

44 outer.append(widgetTarget);

45 target.append(outer);

46 window.FastCommentsUI(widgetTarget, {

47 "tenantId": tenantId,

48 "pageTitle": name, // für Benachrichtigungs-E-Mails und das Moderations-Dashboard

49 "url": productURL, // für Benachrichtigungs-E-Mails und das Moderations-Dashboard

50 "urlId": productID,

51 "showLiveRightAway": true

52 });

53 }

54

55 function switchProduct(oldId, {name, productID, productURL}) {

56 for (const instanceWrapped of fcUIInstances) {

57 if (instanceWrapped.targetElement) {

58 const config = instanceWrapped.config;

59 if (config.urlId === oldId) {

60 const heading = instanceWrapped.targetElement.parentNode.querySelector('h5');

61 setHeading(heading, {name, productID});

62 config.pageTitle = name;

63 config.urlId = productID;

64 config.url = productURL;

65 instanceWrapped.instance.update(config);

66 return;

67 }

68 }

69 }

70 alert(`Product ${oldId} not found to replace!`);

71 }

72

73 // einige Widgets hinzufügen

74 addWidget({name: "Product A", productID: 'product-id-a', productURL: 'https://example.com/a'});

75 addWidget({name: "Product B", productID: 'product-id-b', productURL: 'https://example.com/b'});

76

77 const form = document.querySelector('.demo-form');

78 form.querySelector('button').addEventListener('click', function() {

79 const name = form.querySelector('input[name=name]').value;

80 const productID = form.querySelector('input[name=id]').value;

81 const productURL = form.querySelector('input[name=url]').value;

82 const replaces_id = form.querySelector('input[name=replaces_id]').value;

83

84 if (replaces_id) {

85 switchProduct(replaces_id, {

86 name,

87 productID,

88 productURL,

89 });

90 } else {

91 addWidget({name, productID, productURL});

92 }

93 });

94 })();

95 </script>

96 <style>

97 #fastcomments-widgets {

98 display: flex;

99 }

100 #fastcomments-widgets > div {

101 width: 100%;

102 }

103

104 .demo-form section label {

105 display: block;

106 margin-bottom: 20px;

107 }

108 </style>

109

Das ähnelt dem Vorgehen bei der Paginierung.

Bei React und verwandten Bibliotheken können wir einfach die Konfiguration aktualisieren und die Bibliothek (React, Angular, Vue) übernimmt das Auffrischen des Widgets für uns. Mit VanillaJS müssen wir es selbst verwalten, wie gezeigt.

Stellen Sie gerne unten Fragen — wir tun unser Bestes, um zu helfen!