여러분, 안녕하세요!
이 특정 애플리케이션에 대해 여기저기 검색을 해 봤는데, 대부분의 질문이 WordPress 게시물에 Discourse를 댓글로 사용하는 것과 관련이 있는 것 같습니다.
이 안내(Embed Discourse comments on another website via Javascript)를 제외하고, 특히 Shopify 블로그 게시물에 Discourse 댓글을 구현하는 방법에 대해 공유해 주실 수 있는 지침이 있을까요?
제가 구상하는 모습의 예시는 macrumors.com의 댓글 처리 방식을 참고하시면 됩니다. 즉, 기사를 볼 때 상위 댓글이 기사 아래에 표시되고, 사용자는 모든 댓글을 보기 옵션을 선택할 수 있습니다. 해당 링크를 클릭하면 기사에서 생성된 포럼 토픽이 로드됩니다.
미리 감사합니다!
자바스크립트 임베드에 어떤 문제가 있나요?
답변 주셔서 감사합니다!
오늘 바로 구현해 보겠습니다. 문제가 발생하면 다시 이곳에서 말씀드릴게요 — 자바스크립트 임베드 옵션이 제가 위에서 설명한 것과 같은 방식으로 작동하는지 몰랐던 것 같습니다. 죄송합니다! 
안녕하세요 @MarximusMG! 진행 상황은 어땠나요? JS 임베드를 사용하신 경험을 공유해 주시겠어요? 아니면 이 프로젝트를 포기하셨나요?
오래전부터 이 부분에 대해 궁금해 왔고, 직접 테스트해 보기로 했습니다. 참고로 저는 Shopify에 대해 경험이 거의 없지만, Discourse 고객 지원 업무를 수행할 때 꽤 자주 질문을 받은 내용입니다.
Shopify 스토어와 Discourse 사이트 모두 익명(로그인하지 않은) 사용자에게 열려 있도록 구성되어 있다면, Shopify 제품 페이지에 Discourse 댓글을 임베드할 수 있습니다. 이렇게 하려면 Discourse 사이트의 관리자 / 사용자 지정 / 임베딩(Admin / Customize / Embedding) 페이지의 허용 호스트(Allowed Hosts) 섹션에 스토어의 도메인을 추가하세요:
Discourse Shopify 토픽의 작성자로 표시될 Discourse 사용자의 사용자 이름을 ‘토픽 생성용 사용자 이름(Username for topic creation)’ 설정에 추가하는 것을 확인하세요. 그런 다음 페이지 하단의 ‘임베딩 설정 저장(Save Embedding Settings)’ 버튼을 클릭합니다.
임베딩 페이지에 표시되는 임베드 코드를 Shopify 제품 페이지의 ‘설명(Description)’ 섹션에 복사해 넣으세요. 코드를 삽입하기 전에 에디터의 ‘HTML 표시(show html)’ 버튼을 클릭하는 것을 잊지 마세요:
임베드 코드를 편집하여 DISCOURSE_USERNAME을 Discourse 임베딩 페이지에서 '토픽 생성용 사용자 이름’으로 입력한 사용자 이름으로 교체하세요. 또한 임베드 코드의 EMBED_URL 텍스트를 제품의 URL로 교체하세요. 그런 다음 제품 페이지를 저장합니다.
참고로, Discourse 댓글 임베딩에 대한 자세한 내용은 여기에서 확인할 수 있습니다: Embed Discourse comments on another website via Javascript.
이제 Shopify 제품 페이지에 Discourse 댓글 섹션(iframe으로 임베드됨)이 표시되어야 합니다. 오류가 없다면, 처음 방문할 때 "토론 로딩 중(Loading discussion)"이라는 텍스트가 표시될 수 있습니다. 이는 페이지 방문이 Discourse에서 해당 제품 페이지를 위한 토픽 생성을 트리거했기 때문입니다. 몇 초 후, "토론 시작(Start discussion)"이라는 텍스트가 표시되어야 합니다. 이 링크를 클릭하면 관련 Discourse 토픽으로 이동합니다.
토픽을 방문하여 답변을 게시하면, 해당 답변이 Shopify 제품 페이지에 표시됩니다.
발생할 수 있는 문제:
기본 Shopify 테마의 설명 섹션은 Discourse 댓글 섹션을 표시하기에 다소 좁아 보입니다:
이는 사용자 지정 Shopify 테마를 통해 쉽게 수정될 수 있다고 생각합니다.
Discourse는 Shopify 제품에서 Discourse 토픽으로 가져오는 콘텐츠에 대해 많은 제어 권한을 제공하지 않습니다. Discourse에 연결한 제품에 대해 제가 확인하는 내용은 다음과 같습니다:
‘전체 게시물 표시(Show Full Post)’ 버튼을 클릭한 후:
제가 보고 싶은 것은 제품 설명, 가격, 이미지입니다. 다음 텍스트가 표시되는 것은 절대 원하지 않습니다:
Product variants
Couldn’t load pickup availability Refresh
이것은 Discourse의 allowed embed selectors 사이트 설정을 조정하여 수정할 수 있을 수 있습니다. 이 설정에 대한 자세한 내용은 여기에서 확인할 수 있습니다: 허용된 임베드 셀렉터 설정 구성. Discourse에는 유용할 수 있는 숨겨진 blocked embed selectors 사이트 설정도 있습니다. 저는 최근 Discourse 임베딩 설정 구성을 돕기 위해 온라인 디버거를 설정했습니다. 이는 진행 중인 작업이지만, 사용해 보고 싶으시다면 개인 메시지(PM)를 보내 주세요.
Discourse 사이트 또는 Shopify 스토어 중 하나가 익명 사용자에게 열려 있지 않도록 구성되어 있다면, 임베드된 댓글에서 문제가 발생할 것으로 예상됩니다.
이전에 게시된 대량의 Shopify 제품에 Discourse 임베드 코드를 수동으로 추가해야 하는 것은 번거로울 수 있습니다. 모든 제품 설명에 Discourse 임베드 코드를 자동으로 추가하는 Shopify 앱을 만들 수 있을 것으로 예상됩니다.
또한 처리해야 할 또 다른 문제는 임베드된 Discourse 댓글의 스타일을 Shopify 제품 페이지의 스타일에 맞게 조정하는 것입니다. 기본 Discourse 테마의 테마 에디터의 임베드 CSS(Embed CSS) 섹션에 몇 가지 CSS를 추가하면 이를 수행할 수 있을 것입니다. 예를 들어, 이는 이전 스크린샷의 배경색 문제를 수정합니다:
OP의 질문에 제대로 답변하지 못했음을 깨달았습니다. 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 블로그 게시물의 경우, 댓글 섹션을 가운데 정렬하고 너비를 제한하기 위해 Liquid 섹션에 일부 사용자 지정 CSS를 추가해야 할 가능성이 높습니다. 예를 들어:
div#discourse-comments {
max-width: 726px;
margin: 0 auto;
}
제품 페이지와 달리 블로그 게시물의 경우, Discourse가 해당 주제에 적절한 콘텐츠를 가져오는 데 잘 작동하는 것을 발견했습니다:
