कमेंट थ्रेड्स को डायनामिक रूप से जोड़ें और बदलें

यह सब urlId और संबंधित पैरामीटर को कॉन्फ़िगर करके तथा विजेट इंस्टेंसेस पर update() को कॉल करके उन्हें किसी अलग थ्रेड से बदलकर किया जाता है।

नीचे एक इंटरैक्टिव उदाहरण दिया गया है (ऊपर बाईं ओर run दबाएं) जो आपको मांग पर कमेंट थ्रेड जोड़ने और बदलने की सुविधा देता है। हम अपडेट के बजाय instance.destroy को कॉल करके उन्हें हटा भी सकते हैं।

कमेंट थ्रेड जोड़ें और बदलें

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>प्रोडक्ट/कमेंट थ्रेड जोड़ें या बदलें</h3>

8 <label>

9 प्रोडक्ट का नाम

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

11 </label>

12 <label>

13 प्रोडक्ट ID

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

15 </label>

16 <label>

17 प्रोडक्ट URL

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

19 </label>

20 <label>

21 बदला जाने वाला प्रोडक्ट (id)

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

23 </label>

24 <button type="button">जोड़ें/बदलें</button>

25 </section>

26 </div>

27 <script>

28 (function () {

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

30 const tenantId = "demo"; // PUT YOUR TENANT ID HERE

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, // for notification emails and moderation dashboard

49 "url": productURL, // for notification emails and moderation 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 // add some 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

यह उसी तरह काम करता है जैसे पेजिनेशन काम करता है।

React और संबंधित लाइब्रेरीज़ के साथ हम बस कॉन्फ़िगरेशन अपडेट कर सकते हैं और लाइब्रेरी (React, Angular, Vue) हमारे लिए विजेट को रिफ्रेश करने का काम संभाल लेगी। VanillaJS के साथ हमें इसे स्वयं प्रबंधित करना पड़ता है, जैसा ऊपर दिखाया गया है।

नीचे कोई भी प्रश्न पूछने में संकोच न करें और हम मदद करने की पूरी कोशिश करेंगे!