Add Comments to ThriveCart Learn+ Courses

Debido al diseño de ThriveCart Learn+, tenemos que añadir el código de FastComments a cada página del curso en la que queramos mostrar comentarios.

Podemos usar el mismo fragmento de código en cada página, y los hilos de comentarios separados se vincularán automáticamente a cada página individual.

Empezaremos abriendo nuestro curso en el editor y añadiendo un bloque HTML.

A la izquierda deberías ver una opción de bloque HTML. Arrástrala a la página donde quieras mostrar los comentarios.

Abrir el curso y añadir bloque HTML

Ahora selecciona el nuevo elemento HTML. Aparecerá un bloque a la izquierda donde podremos pegar nuestro código.

Ahora estás listo para el Paso 2.

Para el Paso 2 tenemos que copiar nuestro fragmento de código. Comprueba que la línea 50 no diga "demo" - querrás asegurarte de que tenga tu tenant id. Debería estar rellenado para ti.

Ahora vamos a copiar nuestro fragmento de código específico de FastComments para ThriveCart Learn.

Es bastante grande, porque la integración con ThriveCart tiene muchas funcionalidades, así que simplemente haz clic en el botón Copiar en la esquina superior derecha del fragmento de código:

Código de comentarios de 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'); // la clase es diferente para la vista previa.

14 }

15 // selector amplio del campo de correo electrónico en caso de que ThriveCart cambie el 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 la vista previa funcione - no hay correo electrónico disponible.

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 el tiempo de espera tras 5 intentos en caso de conexión lenta.

27 }

28 if (profileLink) {

29 // usar la consulta 'img' sin procesar en caso de que ThriveCart cambie el selector de la clase de la imagen.

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

31 if (avatarImg && avatarImg.src) {

32 isAuthenticated = true;

33 simpleSSO.avatar = avatarImg.src;

34 }

35 // usar innerText en caso de que ThriveCart cambie cómo se muestra el nombre del perfil.

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 el tiempo de espera tras 5 intentos en caso de conexión lenta.

53 }

54

55 let url;

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

57

58 if (selectedNavLink) {

59 // a veces TC usa múltiples enlaces para la misma página, así que los desduplicamos.

60 url = getPathnameFromUrl(selectedNavLink.href);

61 } else {

62 // eliminar parámetros de marketing y el nombre de dominio

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 // eliminar parámetros de marketing y el nombre de dominio

84 return parsedUrl.pathname;

85 } catch (error) {

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

87 return window.location.pathname; // por defecto a la actual, para que al menos funcione a veces

88 }

89 }

90

91 })();

92</script>

93

Ahora pégalo en el bloque de código a la izquierda en el editor de ThriveCart. Debería verse así:

Código añadido

¡Eso es todo! Ahora solo tenemos que publicar:

Publicar

¡Eso es todo! Ahora deberías ver el cuadro de comentarios en tu curso cuando lo previsualices, y los usuarios reales podrán dejar comentarios sin iniciar sesión ni introducir su nombre de usuario/correo electrónico por segunda vez.

Nota de prueba!

Si tienes los comentarios anónimos desactivados, que es la configuración por defecto, no podrás dejar comentarios en Preview mode as the John Smith user. Recibirás un error de autenticación ya que el usuario por defecto John Smith no tiene correo electrónico. Si quieres probar, te sugerimos que uses un código de cupón y navegues por tu sitio como un usuario real.

¡Éxito! Ahora deberías ver el FastComments Comment Widget.

¡Éxito!

¡Felicidades por configurar FastComments con ThriveCart! Si te has encontrado con un Domain Error, o te gustaría aprender a personalizar el área de comentarios, sigue leyendo!

FastComments está diseñado para personalizarse para que coincida con tu sitio.

Si deseas añadir estilos personalizados, o ajustar la configuración, Consulta nuestra documentación de personalización para aprender cómo.