Add Comments to BigCommerce Sites

まず、編集するカスタムテーマを作成します。すでにカスタムテーマが設定されている場合は、この手順をスキップできます。

これを行うには、Storefront に移動し、次に Themes を選択します。

ストアフロントを選択

テーマを選択

このチュートリアルではデフォルトテーマを使用しますが、手順はすべてのテーマで同じです。

次に、Customize をクリックするのはしません。代わりに、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

Now we're going to paste the widget code on Line 6. It's important the code is added before the line with {{/partial}}.

Line 6 に貼り付け

You should end up with something like this:

コードを追加した後

Now we can save the file:

保存

...and exit the editor:

エディタを編集

Our final step is to use the new theme template.

In the top right, you'll now see either Publish or Make Active Theme. Click that to continue and make the changes live:

変更を公開

Now we can check out our site! If you go to a blog post, you should see a comment box at the bottom.

変更が公開されました

よくできました！BigCommerce サイトにライブコメント機能を追加しました。

権限が拒否されるエラーが発生した場合、または FastComments をカスタマイズしたい場合は、続きをお読みください。

FastComments はサイトに合わせてカスタマイズできるように設計されています。

カスタムスタイリングを追加したり、設定を微調整したりしたい場合は、カスタマイズのドキュメントを参照してください。

FastComments を BigCommerce の Page Builder 経由で追加することは推奨されません。そうするとコードを目的の各ページに手動で追加する必要があるためです。

ただし、それでも追加したい場合は、次のコードスニペットを使用する必要があります。他のチュートリアルのコードスニペットは、BigCommerce の性質上動作しません:

BigCommerce の Page Builder スニペット

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