Wszystko to wykonuje się przez skonfigurowanie urlId i powiązanych parametrów oraz wywołanie update() na instancjach widgetów, aby zamienić je na inny wątek.

Poniżej znajduje się interaktywny przykład (naciśnij run w lewym górnym rogu), który pozwala na dodawanie i zamienianie wątków komentarzy na żądanie. Możemy je też usunąć, wywołując instance.destroy zamiast update.

Dodaj i zamień wątki komentarzy

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"; // WSTAW SWÓJ TENANT ID TUTAJ

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, // do e-maili powiadomień i panelu moderacji

49 "url": productURL, // do e-maili powiadomień i panelu moderacji

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 // dodaj kilka widżetów

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

To działa podobnie jak paginacja.

W przypadku React i pokrewnych bibliotek możemy po prostu zaktualizować konfigurację, a biblioteka (React, Angular, Vue) zajmie się odświeżeniem widżetu. W VanillaJS musimy zarządzać tym sami, jak pokazano.

Nie wahaj się zadać pytań poniżej — zrobimy co w naszej mocy, aby pomóc!