Add Comments to ThriveCart Learn+ Courses

ThriveCart Learn+의 설계 때문에, 댓글을 표시하려는 모든 강의 페이지에 FastComments 코드를 추가해야 합니다.

같은 코드 스니펫을 모든 페이지에서 사용할 수 있으며, 별도의 댓글 스레드는 자동으로 각 개별 페이지에 연결됩니다.

에디터에서 강의를 열고 HTML 블록을 추가하는 것부터 시작하겠습니다.

왼쪽에서 HTML 블록 옵션을 볼 수 있습니다. 댓글을 표시할 페이지로 드래그하세요.

강의 열고 HTML 블록 추가

이제 새 HTML 요소를 선택하세요. 코드를 붙여넣을 수 있는 블록이 왼쪽에 나타납니다.

이제 2단계로 넘어갈 준비가 되었습니다.

Step 2에서는 코드 스니펫을 복사해야 합니다. 50번째 줄이 "demo"로 되어 있지 않은지 확인하세요 - 여기에는 귀하의 tenant id가 있어야 합니다. 보통 자동으로 채워져 있습니다.

이제 ThriveCart-Learn 전용 FastComments 코드 스니펫을 복사하겠습니다.

ThriveCart와의 통합에는 많은 기능이 포함되어 있어 코드가 꽤 큽니다. 코드 스니펫의 오른쪽 상단에 있는 복사 버튼을 클릭하세요:

ThriveCart Learn+ 댓글 코드

Copy

1

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

3<div id="fastcomments-widget"></div>

4<script>

5 (function () {

6 let attemptsRemaining = 10;

7

8 function tryLoad() {

9 const simpleSSO = {optedInNotifications: true, optedInSubscriptionNotifications: true};

10 let isAuthenticated = false;

11 let profileLink = document.querySelector('.thrivecart-courses-header-profile-link');

12 if (!profileLink) {

13 profileLink = document.querySelector('.thrivecart-courses-header-profile'); // 미리보기에서는 클래스가 다름.

14 }

15 // ThriveCart가 id를 변경할 경우에 대비한 광범위한 이메일 입력 필드 선택자.

16 const emailInputField = document.querySelector('input[type=email]');

17 if (emailInputField && emailInputField.value) {

18 isAuthenticated = true;

19 simpleSSO.email = emailInputField.value;

20 } else if (profileLink && !profileLink.innerText.includes('John Smith')) { // 미리보기가 작동하도록 허용 - 이메일 없음.

21 attemptsRemaining--;

22 if (!attemptsRemaining) {

23 return console.error('Could not load FastComments - could not determine user information (email). Please reach out to FastComments support.');

24 }

25 console.warn('FastComments: No user email found - waiting and trying again.');

26 return setTimeout(tryLoad, attemptsRemaining < 5 ? 3000 : 100); // 인터넷 속도가 느릴 경우를 대비해 5회 시도 이후 대기 시간을 늘립니다.

27 }

28 if (profileLink) {

29 // ThriveCart가 이미지 클래스 선택자를 변경할 경우를 대비해 원시 "img" 쿼리를 사용합니다.

30 const avatarImg = profileLink.querySelector('img');

31 if (avatarImg && avatarImg.src) {

32 isAuthenticated = true;

33 simpleSSO.avatar = avatarImg.src;

34 }

35 // ThriveCart가 프로필 이름 표시 방식을 변경할 경우에 대비해 innerText를 사용합니다.

36 if (profileLink.innerText) {

37 isAuthenticated = true;

38 simpleSSO.username = profileLink.innerText;

39 } else {

40 const bold = profileLink.querySelector('b');

41 if (bold && bold.innerText) {

42 isAuthenticated = true;

43 simpleSSO.username = bold.innerText;

44 }

45 }

46 } else {

47 if (!attemptsRemaining) {

48 return console.error('Could not load FastComments - could not determine user information (user name/avatar). Please reach out to FastComments support.');

49 }

50 console.warn('FastComments: No user profile info found - waiting and trying again.');

51 attemptsRemaining--;

52 return setTimeout(tryLoad, attemptsRemaining < 5 ? 3000 : 100); // 인터넷 속도가 느릴 경우를 대비해 5회 시도 이후 대기 시간을 늘립니다.

53 }

54

55 let url;

56 const selectedNavLink = document.querySelector('.tcc-browse-lesson.active a');

57

58 if (selectedNavLink) {

59 // 경우에 따라 TC가 동일 페이지에 여러 링크를 사용할 수 있으므로 중복을 제거합니다.

60 url = getPathnameFromUrl(selectedNavLink.href);

61 } else {

62 // 마케팅 매개변수와 도메인 이름을 제거합니다.

63 url = window.location.pathname;

64 }

65

66 if (url) {

67 url = url.replace('/starte-hier', '');

68 url = url.replace('/start-here', '');

69 }

70

71 FastCommentsUI(document.getElementById('fastcomments-widget'), {

72 tenantId: 'demo',

73 urlId: url,

74 simpleSSO: isAuthenticated ? simpleSSO : null

75 });

76 }

77

78 tryLoad();

79

80 function getPathnameFromUrl(url) {

81 try {

82 const parsedUrl = new URL(url);

83 // 마케팅 매개변수와 도메인 이름을 제거합니다.

84 return parsedUrl.pathname;

85 } catch (error) {

86 console.error("Invalid URL", url, error);

87 return window.location.pathname; // 기본값으로 현재 경로를 사용하므로 적어도 때때로 동작합니다

88 }

89 }

90

91 })();

92</script>

93

이제 이를 ThriveCart 편집기의 왼쪽 코드 블록에 붙여넣으세요. 다음과 같이 보일 것입니다:

코드 추가됨

이제 끝났습니다! 이제 게시하기만 하면 됩니다:

게시

이제 완료되었습니다! 미리보기할 때 강좌에서 댓글 상자를 볼 수 있으며, 실제 사용자는 다시 로그인하거나 사용자명/이메일을 두 번째로 입력하지 않고도 댓글을 남길 수 있습니다.

테스트 참고!

익명 댓글 기능이 비활성화되어 있다면(기본값은 비활성화) Preview 모드에서 John Smith 사용자로 댓글을 남길 수 없습니다. 기본 John Smith 사용자에는 이메일이 없어 인증 오류가 발생합니다. 테스트를 원하시면 쿠폰 코드를 사용하여 실제 사용자처럼 사이트를 진행해 보시길 권장합니다.

성공! 이제 FastComments 댓글 위젯을 보실 수 있습니다.

성공!

ThriveCart와 함께 FastComments 설정을 완료하신 것을 축하합니다! 도메인 오류가 발생했거나 댓글 영역을 사용자화하는 방법을 알고 싶으시다면 계속 읽어보세요!

FastComments는 귀하의 사이트에 맞게 맞춤화되도록 설계되었습니다.

커스텀 스타일을 추가하거나 구성을 조정하려면 맞춤 설정 문서을 확인하여 방법을 알아보세요.