¿Cuál es la forma más eficiente de usar Discourse para comentarios en publicaciones de blog de Shopify?

[MarximusMG]

¡Hola a todos!

He buscado un poco por aquí sobre esta aplicación específica, pero parece que la mayoría de las preguntas están relacionadas con el uso de Discourse para comentarios en publicaciones de Wordpress.

Aparte de este tutorial (Embed Discourse comments on another website via Javascript), ¿hay alguna guía que alguien pueda compartir para implementar comentarios de Discourse específicamente para las publicaciones del blog de Shopify?

Un ejemplo de lo que imagino se puede ver en cómo macrumors.com maneja los comentarios (es decir, al ver un artículo, los comentarios principales se muestran debajo del artículo, y al usuario se le da la opción de ver todos los comentarios. Después de hacer clic en ese enlace, se carga el tema del foro que se crea como resultado del artículo).

¡Gracias de antemano!

[MarximusMG]

[pfaffman (Jay Pfaffman)]

¿Cuál es el problema con la incrustación de javascript?

[MarximusMG]

¡Gracias por la respuesta!

Lo implementaré hoy y volveré aquí si surge algún problema. Supongo que no me di cuenta de que la opción de incrustación de JavaScript funcionaba de la misma manera que describí anteriormente. ¡Mis disculpas!

[jord8on (Jordan)]

¡Hola @MarximusMG! ¿Cómo te fue con esto? ¿Te importaría compartir tu experiencia usando el embed de JS? ¿O abandonaste esta iniciativa?

[simon]

He estado preguntándome sobre esto por un tiempo, así que decidí probarlo. Tenga en cuenta que tengo muy poca experiencia con Shopify, pero es algo sobre lo que me preguntaron bastante cuando trabajaba en soporte al cliente para Discourse.

Si tanto la tienda Shopify como el sitio Discourse están configurados para que puedan ser vistos por usuarios anónimos (no iniciados sesión), los comentarios de Discourse se pueden incrustar en una página de producto de Shopify. Para hacer eso, agregue el dominio de su tienda a la sección “Allowed Hosts” (Hosts permitidos) en la página “Admin / Customize / Embedding” (Administrador / Personalizar / Incrustar) de su sitio Discourse:

Asegúrese de agregar el nombre de usuario del usuario de Discourse que se mostrará como autor de los temas de Discourse en Shopify a la configuración “Username for topic creation” (Nombre de usuario para la creación de temas). Luego, haga clic en el botón “Save Embedding Settings” (Guardar configuración de incrustación) en la parte inferior de la página.

Copie el código de incrustación que se muestra en la página de incrustación en la sección “Description” (Descripción) de la página del producto de Shopify. Asegúrese de hacer clic en el botón “show html” (mostrar html) en el editor antes de insertar el código:

Edite el código de incrustación para reemplazar DISCOURSE_USERNAME con el nombre de usuario que ingresó como “Username for topic creation” en la página de incrustación de Discourse. También reemplace el texto EMBED_URL del código de incrustación con la URL del producto. Luego, guarde la página del producto.

Tenga en cuenta que puede obtener más detalles sobre la incrustación de comentarios de Discourse aquí: Embed Discourse comments on another website via Javascript.

Ahora debería ver una sección de “Discourse Comments” (Comentarios de Discourse) (incrustada como un iframe) en la página del producto de Shopify. Suponiendo que no haya errores, puede que muestre el texto “Loading discussion” (Cargando discusión) la primera vez que la visite. Lo que está sucediendo es que al visitar la página se activó Discourse para crear un tema para la página del producto. Después de unos segundos, debería ver el texto “Start discussion” (Iniciar discusión). Si hace clic en ese enlace, será llevado al tema relacionado de Discourse.

Si visita el tema y responde, esa respuesta aparecerá en la página del producto de Shopify.

Posibles problemas:
La sección de descripción del tema predeterminado de Shopify no parece lo suficientemente ancha para mostrar la sección de comentarios de Discourse:

Supongo que esto se puede solucionar fácilmente con un tema personalizado de Shopify.

Discourse no le da mucho control sobre el contenido que se extrae del producto Shopify al tema de Discourse. Aquí está lo que estoy viendo para el producto que vinculé a Discourse:

Después de hacer clic en el botón “Show Full Post” (Mostrar publicación completa):

Lo que me gustaría ver es la descripción del producto, el precio y la imagen. Definitivamente no quiero que se muestre el siguiente texto:

Product variants
Couldn’t load pickup availability Refresh

Puede ser posible solucionar esto jugando con la configuración del sitio de Discourse allowed embed selectors (selectores de incrustación permitidos). Algunos detalles sobre esa configuración están aquí: Configure the Allowed Embed Selectors Setting. Discourse también tiene una configuración de sitio oculta blocked embed selectors (selectores de incrustación bloqueados) que podría ser útil. Recientemente configuré un depurador en línea para ayudar a configurar los ajustes de incrustación de Discourse. Es un trabajo en progreso, pero envíeme un mensaje privado si desea probarlo.

Si el sitio de Discourse o la tienda de Shopify están configurados de manera que no puedan ser vistos por usuarios anónimos, sospecho que tendrá problemas con los comentarios incrustados.

Tener que agregar manualmente el código de incrustación de Discourse a un gran número de productos de Shopify publicados anteriormente podría ser un problema. Sospecho que sería posible crear una aplicación de Shopify que agregara automáticamente el código de incrustación de Discourse a todas las descripciones de productos.

Otra cosa que podría necesitar ser tratada es hacer que los estilos de los comentarios incrustados de Discourse coincidan con los estilos de la página del producto de Shopify. Debería ser posible hacerlo agregando algo de CSS a la sección “Embed CSS” (CSS de incrustación) del editor de temas de su tema predeterminado de Discourse. Por ejemplo, esto soluciona el problema con el color de fondo en mis capturas de pantalla anteriores:

[simon]

Me di cuenta de que no respondí completamente a la pregunta del OP. Aquí hay un enfoque general que funcionará para las páginas de productos o las publicaciones de blog de Shopify. Desde la sección Temas / Personalizar de tu tienda, ve a la plantilla de página a la que deseas agregar comentarios de Discourse. Dependiendo de la página, agrega un bloque de Liquid personalizado a una sección o agrega una nueva sección de Liquid personalizado. Luego, agrega el código de inserción de Discourse a la sección.

Para discourseEmbedUrl del código de inserción, usa location.href. De esa manera, discourseEmbedUrl se establecerá automáticamente. Por ejemplo:

<div id='discourse-comments'></div>
<meta name='discourse-username' content='DISCOURSE_USERNAME'>

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'DISCOURSE_URL',
    discourseEmbedUrl: location.href,
    // className: 'CLASS_NAME',
  };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
</script>

Para las publicaciones de blog de Shopify, probablemente necesitarás agregar CSS personalizado a la sección Liquid para mantener la sección de comentarios centrada y limitar su ancho. Por ejemplo:

div#discourse-comments {
  max-width: 726px;
  margin: 0 auto;
}

Con las publicaciones de blog, a diferencia de las páginas de productos, encuentro que Discourse hace un buen trabajo al extraer el contenido apropiado en el tema: