Самый эффективный способ использовать Discourse для комментариев в постах блога Shopify?

[MarximusMG]

Всем привет!

Я поискал здесь информацию об этом конкретном приложении, но, похоже, большинство вопросов связаны с использованием Discourse для комментариев к записям в WordPress.

Помимо этого руководства (Embed Discourse comments on another website via Javascript), может ли кто-нибудь поделиться рекомендациями по внедрению комментариев Discourse специально для записей блога Shopify?

Пример того, что я имею в виду, можно увидеть в том, как macrumors.com обрабатывает комментарии (то есть при просмотре статьи основные комментарии отображаются под ней, и пользователю предоставляется возможность просмотреть все комментарии. После перехода по этой ссылке загружается тема форума, созданная в результате публикации статьи).

Заранее спасибо!

[pfaffman (Jay Pfaffman)]

В чём проблема с внедрением JavaScript?

[MarximusMG]

Спасибо за ответ!

Я внедряю это сегодня и вернусь сюда с любыми возникшими проблемами — похоже, я не осознавал, что функция встраивания JavaScript работает так же, как я описал выше. Извините!

[jord8on (Jordan)]

Привет, @MarximusMG! Как у тебя всё прошло? Не мог бы ты поделиться своим опытом использования JS-вставки? Или ты отказался от этой инициативы?

[simon]

Я уже давно задавался этим вопросом, поэтому решил проверить. Обратите внимание, что у меня очень мало опыта работы с Shopify, но этот вопрос мне довольно часто задавали, когда я занимался поддержкой клиентов в Discourse.

Если и магазин Shopify, и сайт Discourse настроены так, что их могут просматривать анонимные пользователи (не авторизованные), то комментарии Discourse можно встроить на страницу товара Shopify. Для этого добавьте домен вашего магазина в раздел «Разрешённые хосты» на странице администрирования Discourse: Администрирование / Настройка / Встраивание:

Обязательно добавьте имя пользователя пользователя Discourse, который будет отображаться как автор тем Discourse для Shopify, в настройку «Имя пользователя для создания тем». Затем нажмите кнопку «Сохранить настройки встраивания» в нижней части страницы.

Скопируйте код встраивания, отображаемый на странице встраивания, в раздел «Описание» страницы товара Shopify. Перед вставкой кода обязательно нажмите кнопку «Показать HTML» в редакторе:

Отредактируйте код встраивания, заменив DISCOURSE_USERNAME на имя пользователя, которое вы указали в настройке «Имя пользователя для создания тем» на странице встраивания Discourse. Также замените текст EMBED_URL в коде встраивания на URL товара. Затем сохраните страницу товара.

Обратите внимание: более подробную информацию о встраивании комментариев Discourse можно найти здесь: Embed Discourse comments on another website via Javascript.

Теперь на странице товара Shopify должен отображаться раздел «Комментарии Discourse» (встроенный как iframe). Если ошибок нет, при первом посещении может отображаться текст «Загрузка обсуждения». Это происходит потому, что посещение страницы запустило создание темы для страницы товара в Discourse. Через несколько секунд должен появиться текст «Начать обсуждение». Если вы нажмёте на эту ссылку, вас перенаправит на соответствующую тему в Discourse.

Если вы посетите тему и оставите ответ, он отобразится на странице товара Shopify.

Возможные проблемы:

Раздел описания в теме Shopify по умолчанию, похоже, недостаточно широк для отображения раздела комментариев Discourse:

Предполагаю, что это можно легко исправить с помощью пользовательской темы Shopify.

Discourse не предоставляет большого контроля над содержимым, которое извлекается из товара Shopify в тему Discourse. Вот что я вижу для товара, на который я дал ссылку в Discourse:

После нажатия кнопки «Показать полный пост»:

Я бы хотел видеть описание товара, цену и изображение. Мне точно не нужно отображение следующего текста:

Варианты товара
Не удалось загрузить доступность для самовывоза Обновить

Возможно, это можно исправить, настроив параметр сайта Discourse allowed embed selectors. Подробная информация об этой настройке доступна здесь: Настройка параметра «Разрешённые селекторы встраивания». В Discourse также есть скрытый параметр сайта blocked embed selectors, который может быть полезен. Недавно я настроил онлайн-отладчик для помощи в конфигурации настроек встраивания Discourse. Это ещё не готовый продукт, но напишите мне в личные сообщения, если хотите его протестировать.

Если либо сайт Discourse, либо магазин Shopify настроены так, что их нельзя просматривать анонимным пользователям, я предполагаю, что возникнут проблемы со встроенными комментариями.

Ручное добавление кода встраивания Discourse к большому количеству ранее опубликованных товаров Shopify может быть утомительным. Я предполагаю, что можно создать приложение Shopify, которое автоматически добавляет код встраивания Discourse ко всем описаниям товаров.

Ещё один момент, который, возможно, потребуется решить, — это согласование стилей встроенных комментариев Discourse со стилями страницы товара Shopify. Это должно быть возможно, добавив немного CSS в раздел «CSS для встраивания» редактора тем вашей темы Discourse по умолчанию. Например, это решает проблему с цветом фона на моих предыдущих скриншотах:

[simon]

Я понял, что не до конца ответил на вопрос автора оригинального поста. Вот общий подход, который подойдет для страниц товаров или записей блога в Shopify. Перейдите в раздел «Тема / Настроить» вашего магазина и откройте шаблон страницы, к которой вы хотите добавить комментарии Discourse. В зависимости от типа страницы добавьте либо блок «Собственный Liquid» в секцию, либо создайте новую секцию «Собственный Liquid». Затем вставьте код встраивания Discourse в эту секцию.

Для параметра discourseEmbedUrl в коде встраивания используйте location.href. Таким образом, discourseEmbedUrl будет устанавливаться автоматически. Например:

<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>

Для записей блога в Shopify, вероятно, потребуется добавить немного пользовательского CSS в секцию Liquid, чтобы центрировать блок комментариев и ограничить его ширину. Например:

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

В отличие от страниц товаров, в случае с записями блога Discourse, как я заметил, отлично справляется с извлечением соответствующего контента в тему: