Add Comments to BigCommerce Sites

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

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

Выберите 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 через Page Builder 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