Add Comments to BigCommerce Sites

먼저, 편집할 커스텀 테마를 생성하겠습니다. 이미 커스텀 테마가 설정되어 있다면 이 단계를 건너뛰십시오.

이를 위해, 우리는 Storefront로 이동한 다음 Themes를 선택합니다.

스토어프런트 선택

테마 선택

이 튜토리얼에서는 기본 테마를 사용하지만, 지침은 모든 테마에 동일합니다.

다음으로, 우리는 맞춤설정을 클릭하지 않습니다. 대신, Advanced와 Make a Copy를 클릭합니다.

복사본 만들기

테마 복사를 확인하세요:

복사본 저장

완료되면, 페이지 하단의 Themes 아래에 테마가 나열되어 있는 것을 볼 수 있습니다.

커스텀 테마 생성됨

이제 새 테마를 편집하여 FastComments를 추가할 수 있습니다.

테마 파일 편집

다음 단계는 통합을 작동시키는 위젯 코드를 추가하는 것입니다.

이전 단계의 지시대로 테마 편집기에 들어가면 왼쪽에는 파일 브라우저가, 오른쪽에는 편집기가 표시됩니다.

여기서는 블로그 게시물 페이지를 나타내는 템플릿을 편집할 것입니다.

왼쪽 탐색에서 templates->pages->blog-post.html로 이동하세요.

템플릿 열기

다음으로, FastComments를 설치하는 데 사용할 코드를 복사하세요:

BigCommerce Comments Code

Copy

1

2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5window.fcConfigs = [{

6 "tenantId": "demo"

7}];

8</script>

9

이제 위젯 코드를 Line 6에 붙여넣겠습니다. 코드는 {{/partial}}가 있는 줄보다 앞에 추가되어야 합니다.

Line 6에 붙여넣기

결과는 다음과 같아야 합니다:

코드 추가 후

이제 파일을 저장할 수 있습니다:

저장

...그리고 편집기를 종료합니다:

편집기 편집

우리의 마지막 단계는 새 테마 템플릿을 사용하는 것입니다.

오른쪽 상단에서 이제 Publish 또는 Make Active Theme 중 하나가 표시됩니다. 계속 진행하여 변경 사항을 라이브로 적용하려면 클릭하세요:

변경 사항 게시

이제 사이트를 확인해 봅시다! 블로그 게시물로 이동하면 하단에 댓글 상자가 보일 것입니다.

변경 사항 적용됨

잘하셨어요! BigCommerce 사이트에 실시간 댓글을 추가했습니다.

권한 거부 오류가 발생했거나 FastComments를 사용자화하고 싶다면 계속 읽으세요.

FastComments는 귀하의 사이트에 맞게 맞춤 설정할 수 있도록 설계되었습니다.

맞춤 스타일을 추가하거나 설정을 조정하려면, 맞춤 설정 문서 보기에서 방법을 알아보세요.

FastComments를 BigCommerce의 Page Builder를 통해 추가하는 것은 권장되지 않습니다. 그렇게 하면 코드를 원하는 각 페이지에 수동으로 추가해야 하기 때문입니다.

하지만 이렇게 하기를 원한다면, 다음 코드 스니펫을 사용해야 합니다. BigCommerce의 특성상 다른 튜토리얼의 코드 스니펫은 작동하지 않습니다:

BigCommerce 페이지 빌더 스니펫

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 loaded = false;

7 function attemptLoad() {

8 if (loaded) {

9 return;

10 }

11 if (!window.FastCommentsUI) {

12 return;

13 }

14 FastCommentsUI(document.getElementById('fastcomments-widget'), {

15 tenantId: "demo"

16 });

17 loaded = true;

18 }

19 attemptLoad();

20 const interval = setInterval(function () {

21 attemptLoad();

22 if (loaded) {

23 clearInterval(interval);

24 }

25 }, 300);

26 })();

27</script>

28