Add Comments to BigCommerce Sites

Сначала давайте создадим пользовательскую тему, которую мы будем редактировать. Если у вас уже настроена пользовательская тема, вы можете пропустить этот шаг.

Для этого перейдите в Storefront, затем в Themes.

Выберите 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

Теперь мы вставим код виджета на Line 6. Важно, чтобы код был добавлен перед строкой с {{/partial}}.

Вставьте на Line 6

You should end up with something like this:

После добавления кода

Теперь можно сохранить файл:

Сохранить

...и выйти из редактора:

Выйти из редактора

Наш последний шаг — использовать новый шаблон темы.

В правом верхнем углу вы увидите либо Publish, либо Make Active Theme. Нажмите на него, чтобы продолжить и применить изменения:

Опубликовать изменения

Теперь мы можем проверить наш сайт! Если перейти к записи в блоге, внизу вы должны увидеть поле для комментариев.

Изменения опубликованы

Отличная работа! Вы добавили живые комментарии на свой сайт BigCommerce.

Если вы столкнулись с ошибкой "permission denied" или хотите настроить FastComments, читайте дальше.

FastComments разработан для настройки под ваш сайт.

Если вы хотите добавить пользовательские стили или изменить конфигурацию, ознакомьтесь с нашей документацией по кастомизации, чтобы узнать, как.

Не рекомендуется добавлять FastComments через конструктор страниц BigCommerce, так как в этом случае код придётся вручную добавлять на каждую нужную страницу.

Однако, если это необходимо, следует использовать следующий фрагмент кода. Фрагменты кода из других руководств не будут работать из‑за особенностей 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