FastComments.com

Add Comments to BigCommerce Sites


With FastComments 我們可以輕鬆地為任何 BigCommerce 網站新增即時留言功能。

下面的說明針對建立在 BigCommerce 上的部落格,但也同樣適用於 BigCommerce 的任何其他部分。

請注意,本教學需要一個 FastComments 帳戶。建議您先註冊,然後再回來此處。 您可以在這裡建立帳戶。


步驟一:準備佈景主題 Internal Link

首先,讓我們建立一個要編輯的自訂主題。如果您已經有自訂主題設定,您可以跳過此步驟。

為此,我們將前往 Storefront 然後 Themes

選擇 Storefront
選擇 Storefront
選擇 Themes
選擇 Themes

在本教學中我們將使用預設主題,但這些指示對所有主題都相同。

接下來,我們是 會點選 Customize。取而代之的是,點選 Advanced 然後 Make a Copy

建立複本
建立複本

確認複製主題:

儲存複本
儲存複本

完成後,您應該會在頁面底部的 Themes 下看到列出的主題,如下所示。

已建立自訂主題
已建立自訂主題

現在我們可以編輯新的主題以加入 FastComments。

編輯主題檔案
編輯主題檔案

步驟二:編輯正確的模板 Internal Link

下一步是新增使整合運作的 widget 程式碼。

按照前一個步驟的指示進入主題編輯器後,你會在左側看到檔案瀏覽器,右側看到編輯器。

我們將編輯代表部落格文章頁面的 範本

在左側導覽中,前往 templates->pages->blog-post.html

開啟範本
開啟範本

步驟三:加入小工具程式碼 Internal Link

接下來,複製我們將用來安裝 FastComments 的程式碼:

BigCommerce Comments Code
Copy 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

現在我們要將 widget 程式碼貼到 Line 6。重要的是程式碼必須在包含 {{/partial}} 的那一行 之前 新增。

貼到第 6 行
貼到第 6 行

你應該會得到類似下面的結果:

新增程式碼後
新增程式碼後

現在我們可以儲存檔案:

儲存
儲存

...並離開編輯器:

編輯編輯器
編輯編輯器

步驟四:啟用新佈景主題 Internal Link

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.

變更已上線
變更已上線

成功 Internal Link


做得好!你已為你的 BigCommerce 網站新增即時評論功能。

如果你遇到權限被拒的錯誤,或想要自訂 FastComments,請繼續閱讀。


自訂 Internal Link


FastComments 設計為可客製化,以配合您的網站。

如果您想新增自訂樣式,或微調設定,查看我們的自訂與設定文件 以瞭解如何操作。


額外:頁面建立器的程式碼片段 Internal Link

建議不要透過 BigCommerce 的頁面建構器新增 FastComments,因為這樣程式碼必須手動加入到每一個想要的頁面。

然而,如果仍希望這麼做,必須使用下列程式碼片段。由於 BigCommerce 的特性,其他教學中的程式碼片段將無法運作:

BigCommerce 頁面建構器 片段
Copy 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