This is all done by configuring the urlId and related parameters and calling update() on the widget instances to swap them out with a different thread.

El siguiente es un ejemplo interactivo (pulsa Ejecutar en la esquina superior izquierda) que te permite añadir e intercambiar hilos de comentarios bajo demanda. También podríamos eliminarlos llamando a instance.destroy en lugar de update.

Agregar e intercambiar hilos de comentarios

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"; // PON TU TENANT ID AQUÍ

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, // para los correos de notificación y el panel de moderación

49 "url": productURL, // para los correos de notificación y el panel de moderación

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 // agregar algunos widgets

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

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

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

No dudes en hacer cualquier pregunta a continuación y haremos todo lo posible por ayudar!