ThriveCart Learn+ コースにコメントを追加

ThriveCart Learn+ の設計上、コメントを表示したい各コースページに FastComments のコードを追加する必要があります。

同じコードスニペットをすべてのページで使用でき、コメントスレッドは自動的に各ページごとに紐づけられます。

まず、コースをエディターで開き、HTML ブロックを追加します。

左側に HTML ブロックのオプションが表示されるはずです。コメントを表示したいページの位置へそのブロックをドラッグしてください。

Open Course and Add HTML Block

新しく追加した HTML 要素を選択します。コードを貼り付けられるブロックが左側に表示されます。

これでステップ 2 の準備が整いました。

ステップ2では、コードスニペットをコピーします。50行目に「demo」と表示されていないことを確認してください。ここにはテナントIDが入っている必要があります。通常は自動的に入力されています。

次に、ThriveCart Learn 専用の FastComments コードスニペットをコピーしましょう。

ThriveCart との連携には多くの機能があるため、スニペットはかなり大きくなっています。コードスニペットの右上にある「コピー」ボタンをクリックするだけです:

ThriveCart Learn+ Comments Code

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 はあなたのサイトに合わせてカスタマイズできるよう設計されています。

カスタムスタイリングを追加したり、設定を微調整したい場合は、カスタマイズに関するドキュメントをご覧ください。方法が記載されています。