FastComments.com

Add Comments to BigCommerce Sites


使用 FastComments,我们可以轻松地为任何 BigCommerce 站点添加实时评论。

下面的说明适用于在 BigCommerce 上构建的博客,但也适用于 BigCommerce 的任何部分。

请注意,本教程需要一个 FastComments 帐户。建议您先注册,然后再回来此处。您可以在这里创建帐户。


第一步:准备主题 Internal Link

首先,让我们创建一个将要编辑的自定义主题。如果你已经设置了自定义主题,可以跳过此步骤。

为此,我们将前往 Storefront,然后点击 Themes

选择 Storefront
Select Storefront
选择 Themes
Select Themes

在本教程中,我们将使用默认主题,但对于所有主题,说明步骤是相同的。

接下来,我们将不会点击 Customize。相反,请点击 Advanced 然后 Make a Copy

Make a Copy
Make a Copy

确认复制主题:

保存副本
Save The Copy

完成后,你应该会在页面底部的 Themes 下看到列出的主题,如下所示。

自定义主题已创建
Custom Theme Created

现在我们可以编辑新主题以添加 FastComments。

编辑主题文件
Edit Theme Files

第二步:编辑正确的模板 Internal Link

下一步是添加使集成生效的小部件代码。

按照上一步的指示进入主题编辑器后,你会在左侧看到文件浏览器,右侧看到编辑器。

我们要做的是编辑表示博客文章页面的模板

在左侧导航中,转到 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

现在我们将在 Line 6 粘贴小部件代码。请确保代码被添加在包含 {{/partial}} 的那一行的之前

粘贴到第 6 行
粘贴到第 6 行

你应该会得到类似下面的结果:

添加代码后
添加代码后

现在我们可以保存此文件:

保存
保存

...并退出编辑器:

退出编辑器
退出编辑器

第四步:激活新主题 Internal Link

我们的最后一步是使用新的主题模板。

在右上角,你现在会看到 PublishMake Active Theme。点击它以继续并使更改生效:

发布更改
发布更改

现在我们可以查看我们的网站了!如果你打开一篇博客文章,应该会在底部看到一个评论框。

更改已上线
更改已上线

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