Add Comments to ThriveCart Learn+ Courses

Devido ao design do ThriveCart Learn+, precisamos adicionar o código do FastComments em cada página do curso na qual quisermos exibir comentários.

Podemos usar o mesmo trecho de código em todas as páginas, e tópicos de comentários separados serão automaticamente vinculados a cada página individual.

Começaremos abrindo nosso curso no editor e adicionando um bloco HTML.

À esquerda você deverá ver a opção de bloco HTML. Arraste-o para a página onde deseja exibir os comentários.

Abra o Curso e Adicione um Bloco HTML

Agora selecione o novo elemento HTML. Um bloco aparecerá à esquerda onde podemos colar nosso código.

Agora você está pronto para o Passo 2.

Para o Passo 2, precisamos copiar nosso trecho de código. Verifique se a linha 50 não diz "demo" - você vai querer garantir que isso contenha o seu tenant id. Deve ser preenchido para você.

Agora vamos copiar nosso trecho de código FastComments específico para o ThriveCart Learn.

É bastante grande, porque a integração com o ThriveCart tem muitos recursos, então apenas clique no botão Copiar no canto superior direito do trecho de código:

Código de comentários do 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'); // a classe é diferente para o preview.

14 }

15 // seletor amplo do campo de e-mail caso o ThriveCart mude o 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')) { // permitir que o preview funcione - sem e-mail disponível.

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); // aumentar o tempo de espera após 5 tentativas caso a internet esteja lenta.

27 }

28 if (profileLink) {

29 // usar a consulta "img" diretamente caso o ThriveCart altere o seletor de classe da imagem.

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

31 if (avatarImg && avatarImg.src) {

32 isAuthenticated = true;

33 simpleSSO.avatar = avatarImg.src;

34 }

35 // usar innerText caso o ThriveCart altere como o nome do perfil é exibido.

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); // aumentar o tempo de espera após 5 tentativas caso a internet esteja lenta.

53 }

54

55 let url;

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

57

58 if (selectedNavLink) {

59 // às vezes o TC usa múltiplos links na mesma página, então vamos remover duplicatas.

60 url = getPathnameFromUrl(selectedNavLink.href);

61 } else {

62 // remover parâmetros de marketing e nome do domínio

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 // remover parâmetros de marketing e nome do domínio

84 return parsedUrl.pathname;

85 } catch (error) {

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

87 return window.location.pathname; // default to current, so at least it works sometimes

88 }

89 }

90

91 })();

92</script>

93

Agora cole-o no bloco de código à esquerda no editor do ThriveCart. Deve ficar assim:

Código Adicionado

É isso! Agora só precisamos publicar:

Publicar

É isso! Agora você deve ver a caixa de comentários no seu curso ao visualizar em Preview, e usuários reais poderão deixar comentários sem precisar fazer login ou fornecer seu nome de usuário/e-mail pela segunda vez.

Observação sobre testes!

Se você tiver comentários anônimos desabilitados, o que ocorre por padrão, você não poderá deixar comentários no modo Preview como o usuário John Smith. Você receberá um erro de autenticação pois o usuário padrão John Smith não tem e-mail. Se quiser testar, sugerimos que use um código de cupom e navegue pelo seu site como um usuário real.

Sucesso! Agora você deve ver o widget de comentários do FastComments.

Sucesso!

Parabéns por configurar o FastComments com o ThriveCart! Se você encontrou um Domain Error, ou gostaria de aprender como personalizar a área de comentários, continue lendo!

FastComments foi projetado para ser personalizado para corresponder ao seu site.

Se você quiser adicionar estilos personalizados ou ajustar a configuração, Consulte nossa Documentação de Customização para saber como.